HyperText Markup Language (HTML)

The standard markup language for documents designed to be displayed in a web browser

What is HTML?

HTML (HyperText Markup Language) is the code that is used to structure a web page and its content. It consists of a series of elements that you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act in a certain way.

HTML was created by Tim Berners-Lee in 1991 and has evolved through multiple versions, with HTML5 being the current standard.

HTML document structure diagram

Most Used HTML Tags

Some HTML tags are used more frequently than others. Here are the most commonly used HTML tags across the web:

HTML Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document Title</title>
</head>
<body>
  <header>
    <h1>Main Heading</h1>
    <nav>
      <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <section id="section1">
      <h2>Section Heading</h2>
      <p>Paragraph text with a <a href="#">link</a>.</p>
    </section>
  </main>
  
  <footer>
    <p>Copyright information</p>
  </footer>
</body>
</html>

Semantic HTML Elements

<header>

Represents introductory content, typically a group of introductory or navigational aids.

<nav>

Represents a section of a page whose purpose is to provide navigation links.

<main>

Represents the dominant content of the body of a document.

<article>

Represents a self-contained composition in a document, page, or site.

<section>

Represents a generic standalone section of a document.

<aside>

Represents a portion of a document whose content is only indirectly related to the main content.

<footer>

Represents a footer for its nearest sectioning content or sectioning root element.

<figure> & <figcaption>

Represents self-contained content, potentially with an optional caption.

HTML Forms

Basic Form Structure

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>
  
  <button type="submit">Submit</button>
</form>

HTML5 Input Types

  • type="email" - For email addresses
  • type="url" - For web addresses
  • type="tel" - For telephone numbers
  • type="number" - For numerical input
  • type="range" - For sliders
  • type="date" - For date selection
  • type="color" - For color selection
  • type="search" - For search fields

Accessibility in HTML

Semantic HTML

Using the correct HTML elements for their intended purpose provides built-in accessibility.

ARIA Attributes

Accessible Rich Internet Applications (ARIA) attributes provide additional semantic information.

<div role="navigation" aria-label="Main navigation">

Alt Text for Images

Always provide descriptive alt text for images to assist screen readers.

<img src="image.jpg" alt="Descriptive text about the image">

Form Labels

Properly associate labels with form controls for better accessibility.

<label for="username">Username:</label> <input type="text" id="username" name="username">