Common HTML tags
HTML works best when the markup describes the meaning of the content. Use headings for structure, lists for grouped items, tables for data and form elements for input.
| HTML code | Purpose | When to use it |
|---|---|---|
<!DOCTYPE html> | Document declaration | Tells the browser to render the page as modern HTML. |
<html> | Root element | Wraps the complete HTML document and can define the page language. |
<head> | Metadata container | Holds the title, meta description, canonical URL, CSS links and scripts. |
<title> | Page title | Shown in browser tabs and used as an important search result signal. |
<meta> | Metadata | Defines character encoding, viewport behavior, descriptions and social sharing data. |
<link> | External resource | Connects stylesheets, icons, canonical URLs and alternate language versions. |
<body> | Visible page body | Contains the content people and search engines read. |
<header> | Introductory content | Groups the logo, page heading or primary navigation. |
<nav> | Navigation | Marks a group of important site or page links. |
<main> | Main content | Identifies the unique central content of the page. |
<section> | Section | Groups related content with its own heading. |
<article> | Article | Represents a self-contained article, guide, listing or post. |
<aside> | Complementary content | Holds related links, notes, sidebars or supporting references. |
<footer> | Footer | Contains closing navigation, copyright and related information. |
<h1> to <h6> | Headings | Create a meaningful document outline from the main title down to subsections. |
<p> | Paragraph | Wraps blocks of text. |
<a> | Anchor link | Links to another page, file, email address or page fragment. |
<img> | Image | Embeds an image and should include useful alternative text when meaningful. |
<ul> | Unordered list | Creates a bulleted list. |
<ol> | Ordered list | Creates a numbered list. |
<li> | List item | Represents one item inside a list. |
<table> | Table | Displays structured rows and columns of data. |
<thead> | Table head | Groups header rows in a table. |
<tbody> | Table body | Groups the main rows in a table. |
<tr> | Table row | Creates a row in a table. |
<th> | Table header cell | Labels a row or column. |
<td> | Table data cell | Contains one table value. |
<form> | Form | Collects user input for submission or client-side processing. |
<label> | Label | Names a form control and improves accessibility. |
<input> | Input control | Creates text, email, checkbox, radio, file and many other controls. |
<textarea> | Multiline input | Accepts longer free-form text. |
<select> | Select menu | Lets a user choose from predefined options. |
<button> | Button | Triggers a form action or scripted behavior. |
<strong> | Strong importance | Marks important text. |
<em> | Emphasis | Marks emphasized text. |
<code> | Code | Represents code, file names, tags or commands. |
<pre> | Preformatted text | Preserves whitespace for code blocks or fixed-width text. |
<blockquote> | Quotation | Marks a longer quoted passage. |
<figure> | Figure | Groups media, code or diagrams with an optional caption. |
<figcaption> | Caption | Provides a caption for a figure. |
<script> | Script | Loads or embeds JavaScript. |
<style> | Embedded CSS | Adds CSS directly in a document. |
<noscript> | No-script fallback | Shows content when scripts are unavailable. |
HTML entities
Entities help publish reserved characters safely. They are especially useful when showing code examples, symbols or characters that could otherwise be interpreted as markup.
| Entity | Renders as | Description |
|---|---|---|
< | < | Less-than sign |
> | > | Greater-than sign |
& | & | Ampersand |
" | " | Quotation mark |
' | ' | Apostrophe |
| non-breaking space | Keeps adjacent words or values together |
© | © | Copyright sign |
® | ® | Registered trademark sign |
™ | ™ | Trademark sign |
€ | € | Euro sign |
£ | £ | Pound sign |
¥ | ¥ | Yen sign |