Document Structure
| Tag | Purpose | Required? |
|---|---|---|
<!DOCTYPE html> |
Declares HTML5 document type | Yes — always line 1 |
<html> |
Root element. Use lang="en" attribute |
Yes |
<head> |
Contains metadata (title, charset, CSS links) | Yes |
<body> |
Contains all visible page content | Yes |
<meta> self-closing |
Page metadata (charset, viewport, description) | Yes (charset + viewport minimum) |
<title> |
Browser tab text. Critical for SEO | Yes |
<link> self-closing |
Links external resources (CSS files, favicons) | When needed |
<script> |
Embeds or links JavaScript files | When needed |
Text Content
| Tag | Purpose | Type |
|---|---|---|
<h1> – <h6> |
Headings. h1 = most important, h6 = least | block |
<p> |
Paragraph | block |
<strong> |
Bold / strong importance | inline |
<em> |
Italic / emphasis | inline |
<br> self-closing |
Line break | inline |
<hr> self-closing |
Horizontal rule (divider line) | block |
<blockquote> |
Block quotation | block |
<code> |
Inline code snippet | inline |
<pre> |
Preformatted text (preserves whitespace) | block |
Links & Media
| Tag | Key Attributes | Example |
|---|---|---|
<a> |
href, target |
<a href="url" target="_blank">Link</a> |
<img> self-closing |
src, alt (required!) |
<img src="pic.jpg" alt="description"> |
<video> |
src, controls |
<video src="vid.mp4" controls></video> |
<audio> |
src, controls |
<audio src="song.mp3" controls></audio> |
Lists
| Tag | Purpose | Contains |
|---|---|---|
<ul> |
Unordered list (bullet points) | <li> items |
<ol> |
Ordered list (numbered) | <li> items |
<li> |
List item | Text or other elements |
Containers (Grouping)
| Tag | Purpose | Type |
|---|---|---|
<div> |
Generic block container (no semantic meaning) | block |
<span> |
Generic inline container (no semantic meaning) | inline |
Block vs. Inline
Block elements take up the full width available and start on a new line (<div>, <p>, <h1>).
Inline elements only take up as much width as they need and don't break the line (<span>, <a>, <strong>).
Source: MDN: HTML Element Reference