Semantic HTML5 elements and their proper usage
| Command | Description |
|---|---|
<!DOCTYPE html> | HTML5 document declaration |
<html lang="en"> | Root element with language |
<head> | Document metadata container |
<body> | Document body |
| Command | Description |
|---|---|
<header> | Page or section header |
<nav> | Navigation links |
<main> | Main content (one per page) |
<article> | Self-contained content |
<section> | Thematic grouping |
<aside> | Sidebar content |
<footer> | Page or section footer |
| Command | Description |
|---|---|
<h1> - <h6> | Headings (h1 = most important) |
<p> | Paragraph |
<strong> | Important text (bold) |
<em> | Emphasized text (italic) |
<code> | Inline code |
<pre> | Preformatted text |
<blockquote> | Block quotation |
| Command | Description |
|---|---|
<ul> | Unordered list |
<ol> | Ordered list |
<li> | List item |
<dl> | Description list |
<dt> | Description term |
<dd> | Description details |
| Command | Description |
|---|---|
<form> | Form container |
<input type="text"> | Text input |
<input type="email"> | Email input (validates) |
<input type="password"> | Password input |
<textarea> | Multi-line text |
<select> | Dropdown select |
<button> | Clickable button |
<label for="id"> | Form label (accessibility) |