HTML Basics

Table of Contents
HTML Framework
Text Formatting
Document Structure

HTML Framework

001  <!DOCTYPE html>
002  <html lang="en-US">
003    <head>
004      <meta charset="utf-8" />
005      <meta name="viewport" content="width=device-width" />
006      <link href="my-css.css" rel="stylesheet" />
007      <script src="my-js.js" defer></script> <!-- defers causes script to run after dom is built -->
008      <title>televant for seo and shows in browser tabs</title>
009      <meta name="description" content="has seo relevance and is shown on social media links" />
010    </head>
011    <body>
012    </body>
013  </html>

Text Formatting

A collection of basic text formatting elements
Element Semantic Meaning
<p>...</p> Paragraph
<em>...</em> Emphasis (italic styling)
<strong>...</strong> Strong emphasis (bold styling)
<h1...h6>...</h1...h6> Heading levels

Link texts should be short and descriptive to make sense to screenreader users.

001  <!-- can wrap most elements -->
002  <a href="url">my link</a>
003  <a href="url"><img src="my-pic.jpg" alt="text for screenreaders"/>text for screenreaders (alternative)</a>
004  <!-- open in new tab -->
005  <a href="url" target="_blank">another link</a>
006  <!-- tooltip on hover -->
007  <a href="url" title="tooltip">link with tooltip</a>
008  <!-- doc fragments. url may be omitted when id is on same page -->
009  <a href="url#some-id">fragment link</a>


001  <!-- list where order of items does not matter -->
002  <ul>
003    <li>list item #1</li>
004    <li>list item #2</li>
005  </ul>
006  <!-- list where order of items DOES matter -->
007  <ol>
008    <li>list item #1</li>
009    <li>list item #2</li>
010  </ol>
011  <!-- description lists -->
012  <dl>
013    <dt>term</dt>
014    <dd>description</dd>
015    <dd>alternative description</dd>
016    <dt>term 2</dt>
017    <dd>description</dd>
018  </dl>


001  <!-- favicon 16x16px usually in  .ico format -->
002  <head>
003    <link rel="icon" href="favicon.ico" type="image/x-icon" />
004  </head>

Higher resolution icons can be used by certain systems for specific use cases. See MDN.

Document Structure

A collection of semantic structure elements
Element Semantic Meaning
<header>...</header> Document header
<nav>...</nav> For navigation bars/lists
<main>...</main> Actual content
<article>...</article> For articles, contained in <main>
<section>...</section> For section, contained in <main>
<aside>...</aside> Supplementary content
<footer>...</footer> Document footer
<div>...</div> Block with no semantic meaning
<span>...</span> Inline element with no semantic meaning
<hr /> Thematic break. Displays a horizontal line.


Block vs. Inline

Changing the CSS display type has no effect on what elements can contain or in what elements they may be contained in.
According to the standard there's actually more than these two categories: HTML5 element content categories

Boolean Attributes

These require no value. If set, their value is usually their name.

001  <!-- no '="anything"' required after 'disabled' -->
002  <input type text="whatever" disabled />


Successive occurences of whitespace in a row are collapsed to a single whitespace when rendering.

Special Characters

These characters have meaning for the HTML parsers and can't be shown in text directly. Authors are required to use their entity names instead.

CharacterEntity Name


001  <a href="source-url"><cite>title of quoted resource</cite></a>
002  <blockquote cite="source-url">
003    <p>quote...</p>
004  </blockquote>
006  <!-- inline quotation -->
007  <p>... <q>quote</q></p>


001  <abbr title="away from keyboard">afk</abbr>

Contact Info

001  <!-- meant to contain contact info of persons associated with document or article -->
002  <address>name, email, whatever...</address>

Superscript & Subscript

001  n<sup>2</sup> 
002  n<sub>1</sub> 

Code Elements

A collection of code formatting elements
Element Semantic Meaning
<pre>...</pre> Contained whitespaces don't collapse
<code>...</code> For marking up code. Usually contained within <code>
<var>...</var> Markup for variables
001  <!-- input & output -->
002  $ <kbd>ls</kbd>
003  <samp>dir1 dir2 dir3</samp>

Times and Dates

001  <!-- to assist machine's in reading dates -->
002  <time datetime="1879-03-14">march 14th 1879</time>

Further examples

Validator HTML Validator