tohya.net
| Table of Contents |
|---|
| HTML Framework |
| Text Formatting |
| Links |
| Lists |
| Icons |
| Document Structure |
| Miscellaneous |
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
| Element | Semantic Meaning |
|---|---|
<p>...</p> |
Paragraph |
<em>...</em> |
Emphasis (italic styling) |
<strong>...</strong> |
Strong emphasis (bold styling) |
<h1...h6>...</h1...h6> |
Heading levels |
Links
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>
Lists
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>
Icons
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
| 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. |
Miscellaneous
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 />
Whitespace
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.
| Character | Entity Name |
|---|---|
| " | " |
| ' | ' |
| & | & |
| < | < |
| > | > |
Quotation
001 <a href="source-url"><cite>title of quoted resource</cite></a>
002 <blockquote cite="source-url">
003 <p>quote...</p>
004 </blockquote>
005
006 <!-- inline quotation -->
007 <p>... <q>quote</q></p>
Abbreviations
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
| 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>