It provide meaningful structure to web documents, improving readability and accessibility.
<header>: Represents the introductory contents or a section for the site’s title, logo, navigation links or menu, etc.
Example
```html
My Website
```
<nav>: Used for the navigation section containing links to other pages or parts of the website.
Example
```html
```
<section>: Represents a standalone section of content, typically with a heading.
Example
```html
About Us
Information about our company.
```
<article>: Represents self-contained content that can be independently distributable or reusable.
Example
```html
Blog Post Title
Blog post content goes here.
```
<aside>: Used for content related to the surrounding content (like sidebars).
Example
```html
```
<footer>: Defines the footer section for a document or section.
Example
```html
```
<main>: Represents the main content of the body, excluding headers, footers, and sidebars.
Example
```html
Article Title
Article content goes here.
```
<figure> and <figcaption>: Use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a caption for the photo:
Example
```html
Fig.1 - Trulli, Puglia, Italy.
```
2. Form Inputs and attributes
Input types: new input types that provide better input validation and user experience.
Example
```html
```
placeholder: The placeholder attribute allows you to provide hints or example values within input fields. It disappears when the user starts typing.
Example
```html
```
required: The required attribute specifies that an input field must be filled out before submitting the form.
Example
```html
```
pattern: The pattern attribute allows you to specify a regular expression pattern that the input value must match.
Example
```html
```
autocomplete: The autocomplete attribute specifies whether a form field should have autocomplete functionality enabled or disabled.
Example
```html
```
3. Multimedia Support:
Native support for multimedia elements, eliminating the need for plugins like Adobe Flash. The <audio> and <video> elements allow developers to embed audio and video content directly into web pages.
<audio>: Embeds an audio file on a web page.
Example
```html
```
<video>: Embeds a video file on a web page.
Example
```html
```
<source>: Specifies alternative media resources for <audio> and <video> elements.
Example
```html
```
<track>: Specifies timed text tracks, such as captions or subtitles, for <video> and <audio> elements.
Example
```html
```
<embed>: Embeds external content, such as plugins or multimedia content, within an HTML document.
Example
```html
```
4. HTML5 Api’s
Geolocation API: Retrieves the geographical location of the user.
Local Storage: Persistent storage until manually cleared.
Example
```javascript
localStorage.setItem('key', 'value');
let data = localStorage.getItem('key');
```
Session Storage: Data stored only for the session.
Example
```javascript
sessionStorage.setItem('key', 'value');
```
Web Workers: Runs JavaScript in background threads, helping to offload tasks.
Example
```javascript
let worker = new Worker('worker.js');
worker.postMessage('Hello');
```
Drag and Drop API: Enables dragging and dropping of elements.
Example
```html
Drag me
```
History API: Manipulates browser history.
Example
```javascript
history.pushState({ page: 1 }, "title 1", "?page=1");
```
5. Canvas and SVG for Graphics
It supports drawing and animations directly on the web page.
<canvas>: Used for rendering 2D graphics via JavaScript.
Script Tags: Links to external JavaScript files, though it’s often recommended to place scripts at the end of the <body> for better performance.
<script src="script.js"defer></script>
5. Body Section
The <body> section contains the content that is rendered on the page, such as text, images, links, and forms.
This is where the primary structure and layout of the visible content is defined using HTML elements.
<body><!-- Visible content goes here --></body>
6. HTML Document Structure Example
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Basic HTML Document Structure</title><linkrel="stylesheet"href="styles.css"><script src="script.js"defer></script></head><body><h1>Welcome to My Website</h1><p>This is a sample HTML document structure.</p></body></html>
7. Best Practices for HTML Document Structure
Use Semantic HTML: Use tags like <header>, <footer>, <article>, <section>, and <aside> to give meaning to your content and improve accessibility.
Organize the <head> Properly: Ensure meta tags for character encoding and viewport settings are placed at the top of the <head> section.
Load CSS Before JS: Always load CSS files before JavaScript files to avoid blocking page rendering.
Defer or Place Scripts at the End: Use defer or async attributes for external JavaScript files, or place them just before the closing </body> tag for better page load performance.
8. Key Elements to Know
<html lang="en">: Sets the language attribute for accessibility and SEO.
<meta charset="UTF-8">: Defines the character encoding to support most languages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures responsiveness by setting the viewport width to the device width.
<title>: Defines the page title, which is important for SEO and bookmarking.
<link rel="stylesheet" href="styles.css">: Links to the CSS file.
<script src="script.js" defer></script>: Links to an external JavaScript file without blocking page rendering (using defer).
