# HTML5

HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts:
1.  It is a new version of the language HTML, with new elements, attributes, and behaviors.
2.  It is a larger set of technologies that allows the building of more diverse and powerful Web sites and applications.

## 1. New Semantic Elements

HTML5 introduced semantic elements to clearly define different parts of a web page:

*   `<header>`: Defines a header for a document or a section.
*   `<nav>`: Defines a set of navigation links.
*   `<section>`: Defines a section in a document.
*   `<article>`: Defines an independent, self-contained content.
*   `<aside>`: Defines content aside from the page content (like a sidebar).
*   `<footer>`: Defines a footer for a document or a section.
*   `<main>`: Specifies the main content of a document.
*   `<figure>` and `<figcaption>`: Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

```html
<article>
  <header>
    <h1>Article Title</h1>
    <p>Posted by John Doe</p>
  </header>
  <p>Article content...</p>
  <footer>
    <p>Comments (3)</p>
  </footer>
</article>
```

## 2. Forms 2.0

HTML5 introduced many new input types and attributes to make form validation easier and improve user experience on mobile devices.

### New Input Types
*   `email`
*   `url`
*   `tel`
*   `number`
*   `date`, `time`, `datetime-local`, `month`, `week`
*   `range`
*   `color`
*   `search`

### New Attributes
*   `placeholder`: Specifies a short hint that describes the expected value.
*   `required`: Specifies that an input field must be filled out.
*   `autofocus`: Specifies that an input field should automatically get focus when the page loads.
*   `pattern`: Specifies a regular expression that the input field's value is checked against.
*   `min` / `max` / `step`: For numeric inputs.

```html
<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required placeholder="john@example.com">
  
  <label for="quantity">Quantity (1-5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
  
  <input type="submit">
</form>
```

## 3. Graphics and Multimedia

HTML5 brought native support for graphics and media, reducing the need for plugins like Flash.

*   **`<canvas>`**: Used to draw graphics, on the fly, via scripting (usually JavaScript).
*   **`<svg>`**: Scalable Vector Graphics.
*   **`<audio>`**: Defines sound content.
*   **`<video>`**: Defines video or movie content.

```html
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
```

## 4. New APIs

HTML5 is often associated with a suite of JavaScript APIs that extend the capabilities of the web.

*   **Geolocation API**: To get the geographical position of a user.
*   **Drag and Drop API**: To make elements draggable.
*   **Web Storage (localStorage / sessionStorage)**: A better alternative to cookies for storing data on the client.
*   **Web Workers**: For running scripts in the background.
*   **Server-Sent Events (SSE)**: For one-way updates from the server.

## 5. Removed Elements

Some elements from HTML 4.01 were removed or deprecated in HTML5 because their functionality is better handled by CSS:
*   `<center>`
*   `<font>`
*   `<strike>`
*   `<big>`
*   `<frame>`, `<frameset>`, `<noframes>`

[[programming/HTML/html]]