Semantic HTML is a coding practice that involves using HTML tags to convey the meaning and structure of the content on a web page. It is a way of writing HTML that focuses on the purpose of the content rather than just its appearance.
The use of semantic HTML has several benefits. Firstly, it makes the content more accessible to users with disabilities, such as those who use screen readers. By using semantic tags such as <header>, <nav>, <main>, and <footer>, screen readers can better understand the structure of the page and provide a more meaningful reading experience for users.
Secondly, semantic HTML can improve search engine optimization (SEO). Search engines use the structure of a web page to understand its content and rank it accordingly. By using semantic tags, web developers can provide search engines with a clear understanding of the content and improve its visibility in search results.
Semantic HTML is a best practice for web development that can improve accessibility, SEO, and code maintainability. By using semantic tags to convey the meaning and structure of content, developers can create more accessible, searchable, and maintainable web pages.
This cheat sheet provides an overview of semantic HTML elements and their descriptions.
Basic Elements
Element
Description
<!DOCTYPE html>
Defines the document type and version of HTML
<html>
Defines the root element of an HTML document
<head>
Contains metadata about the document, such as title and links to stylesheets
<title>
Defines the title of the document, which appears in the browser tab
<body>
Contains the visible content of the document
Text Elements
Element
Description
<h1> to <h6>
Defines headings of different levels, with <h1> being the most important
<p>
Defines a paragraph of text
<a>
Defines a hyperlink to another web page or resource
<em>
Defines emphasized text
<strong>
Defines strongly emphasized text
<blockquote>
Defines a block of quoted text
<q>
Defines a short inline quotation
<cite>
Defines the title of a work, such as a book or article
<abbr>
Defines an abbreviation or acronym
<address>
Defines contact information for the author or owner of the document
<time>
Defines a date or time
List Elements
Element
Description
<ul>
Defines an unordered list
<ol>
Defines an ordered list
<li>
Defines a list item
<dl>
Defines a description list
<dt>
Defines a term in a description list
<dd>
Defines the description of a term in a description list
Table Elements
Element
Description
<table>
Defines a table
<caption>
Defines a caption for a table
<thead>
Defines the header section of a table
<tbody>
Defines the body section of a table
<tfoot>
Defines the footer section of a table
<tr>
Defines a row in a table
<th>
Defines a header cell in a table
<td>
Defines a data cell in a table
Form Elements
Element
Description
<form>
Defines a form for user input
<input>
Defines an input field, such as text, password, checkbox, radio, or submit
<label>
Defines a label for an input field
<select>
Defines a drop-down list
<option>
Defines an option in a drop-down list
<textarea>
Defines a multi-line input field
<button>
Defines a clickable button
<fieldset>
Groups related form elements
<legend>
Defines a caption for a fieldset
Media Elements
Element
Description
<img>
Defines an image
<audio>
Defines audio content
<video>
Defines video content
<source>
Defines alternative media sources for audio or video