Semantic HTML
Semantic HTML means using HTML tags for their intended purpose. For example, using <h1> for the main heading of a page, not just because it's big and bold. This gives context to browsers, screen readers, and search engines.
A typical semantic page structure includes tags like <header>, <nav>, <main>, and <footer>.
Text & Content Elements
Headings & Paragraphs
Heading 1 (Only one per page)
Heading 2 (For major sections)
Heading 3 (For sub-sections)
This is a paragraph. It contains the main body of text. You can make text strong (important) or emphasized (italic).
<h1>...</h1>
<p>...<strong>strong</strong>...<em>emphasized</em></p>Lists
Unordered List
- Item A
- Item B
Ordered List
- First Step
- Second Step
<ul> <li>...</li> </ul>
<ol> <li>...</li> </ol>Media and Links
Links (Anchors)
This is a link to Google that opens in a new tab.
<a href="url" target="_blank">link text</a>Images
The alt attribute is vital for accessibility.
<img src="path/to/image.jpg" alt="description of image">Data Tables
| Name | Role | Experience |
|---|---|---|
| Alice | Developer | 5 years |
| Bob | Designer | 8 years |
<table>
<thead><tr><th>...</th></tr></thead>
<tbody><tr><td>...</td></tr></tbody>
</table>