Skip to main content

Top HTML Theory

What is HTML and what is it used for?​

HTML stands for HyperText Markup Language. It is the standard language used to create and design web pages. HTML defines the structure of web content by using elements represented by tags. It allows embedding images, links, tables, and other media types to make web pages more interactive and visually appealing. HTML files are saved with a .html or .htm extension.

Explain the structure of a basic HTML document​

A basic HTML document structure consists of several key components:

<!DOCTYPE html>: Defines the document type and HTML version.
<html>: The root element of an HTML page.
<head>: Contains meta-information about the document, such as the title, character set, and linked resources like stylesheets and scripts.
<title>: Specifies the title of the web page, displayed in the browser tab.
<body>: Contains the actual content of the web page, such as text, images, links, and other media.

<!DOCTYPE html>
<html>
<head>
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a basic HTML document.</p>
</body>
</html>

What is semantic HTML and why is it important? Provide examples of semantic tags​

Semantic HTML refers to the use of HTML tags that convey the meaning and structure of the content. This approach enhances accessibility, SEO, and maintainability of web pages by providing clear information about the document's structure.

Examples of semantic tags include:

<header>: Represents introductory content or a set of navigational links.
<nav>: Contains navigation links.
<main>: Indicates the main content of the document.
<article>: Represents a self-contained piece of content that could be independently distributed or reused.
<section>: Defines a section in a document.
<footer>: Represents footer content for its nearest sectioning content or sectioning root element.

What are the differences between block and inline elements in HTML? Provide examples of each​

Block elements and inline elements are two categories of HTML elements with different display properties.
Block Elements: These elements start on a new line and take up the full width available. They can contain other block elements and inline elements.
Inline Elements: These elements do not start on a new line and only take up as much width as necessary. They cannot contain block elements.

Examples: <div>, <p>, <h1>, <ul>, <section>
Examples: <span>, <a>, <img>, <strong>, <em>

What are attributes in HTML and how are they used?​

Attributes provide additional information about HTML elements. They are always included in the opening tag and usually consist of a name and a value.

<img src="image.jpg" alt="Description of the image">
<a href="https://example.com">Visit Example</a>
<input type="text" placeholder="Enter your name">

In this example:
src and alt are attributes of the <img> tag.
href is an attribute of the <a> tag.
type and placeholder are attributes of the <input> tag.

The linking system in HTML uses the <a> tag to create hyperlinks that connect one page to another.

Anchor Links: Used to link to a specific section within the same page or another page.
Example:
<a href="#section1">Go to Section 1</a>
<a href="page.html#section2">Go to Section 2 on another page</a>

Absolute URLs: Full URL including protocol and domain.
<a href="https://example.com">Visit Example</a>

Relative URLs: URL relative to the current page.
<a href="page.html">Go to Page</a>
<a href="../folder/page.html">Go to Page in Parent Directory</a>

What are forms in HTML and how are they created? Provide examples of basic form elements​

Forms in HTML are used to collect user input. They are created using the <form> tag, and include various form elements such as input fields, checkboxes, radio buttons, and submit buttons.

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <input type="submit" value="Submit">
</form>

How do you create lists in HTML? Provide examples of using <ul>, <ol>, and <li> tags​

Lists in HTML are created using <ul> for unordered lists, <ol> for ordered lists, and <li> for list items.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ol>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ol>

Accessibility with ARIA​

ARIA (Accessible Rich Internet Applications) is a set of special attributes for web content that improves the accessibility of web applications for users with disabilities, particularly those using assistive technologies like screen readers.

Main Components of ARIA​

Roles
ARIA roles define what function or purpose an element serves on the page.
Examples of roles include button, navigation, dialog, and alert.
They help assistive technologies understand how to interact with the element.

<div role="button" tabindex="0">Click Me</div>

States
ARIA states describe the current condition of an element, such as whether it is selected, disabled, or hidden. Examples of states include aria-checked, aria-disabled, and aria-hidden.

<input type="checkbox" aria-checked="true" />

Properties
ARIA properties provide additional information about an element, such as its label, description, or available actions. Examples of properties include aria-label, aria-labelledby, and aria-describedby.

<input type="text" aria-label="Search" />

Live Regions
ARIA live regions are used to inform users about dynamic changes on the page, such as chat updates or changes to a shopping cart. The aria-live and aria-atomic attributes control how and when updates should be announced.

<div aria-live="polite">New message received.</div>

Best Practices for Using ARIA​

Use When Necessary
ARIA attributes should not be used if the desired behavior can be achieved with standard HTML elements.
Keep It Simple
Avoid unnecessarily complicating the code structure with redundant ARIA attributes.
Accessibility Testing
Always test how your ARIA attributes interact with screen readers and other assistive technologies.

<button aria-label="Close dialog" aria-haspopup="dialog">Close</button>

In this example, aria-label is used to provide a clear text label, and aria-haspopup indicates that the button opens a dialog.