Typography & semantics

The a tag stands for anchor from old hypertext speak. You can use abbr to abbreviate things. q is for creating a short quotation, great for getting smart quotes in without thinking about symbols, and also making the page more semantic. If you want to emphasise text you can use or em to do that, depending on the need for style or semantic emphasis.

Big quote

"Quote"

- Attribution

Citation of titles aren't usually visible cite the same is true of data. There's also few cases where you need ins (inserted text) or del (which is deleted text) unless you're tracking changes. Similarly the s tag specifies text that is no longer correct, accurate or relevant. The dfn tag represents the defining instance of a term in HTML, which could be useful for semantic expression.

Some microformats and search engines can understand your address:

Phrase tags

The human phrase tags are em which renders as emphasized text. and strong which defines important text.

Then we have a set of computer related tags, which we style all the same, they are samp, defines sample output from a computer program, kdb which defines keyboard input and var which defines a variable. These are super rare, so they all look the same to save writing styles.

em Renders as emphasized text

strong Defines important text

code Defines a piece of computer code

samp Defines sample output from a computer program

kbd Defines keyboard input

var Defines a variable like OK

Pre, samp & code

Then there's code which in this framework's opion is more like address and used as a block rather than an inline.

The pre tag defines preformatted text. It's at the same level as p.

 — preformatted text

 — code block

 — computer output block

the b, i, u & strong tags

b and strong are there for emphasis. We add basic typographical queues here. The i tag defines a part of text in an alternate voice or mood usually displayed in italic. The u tag represents some text that should be stylistically different from normal text, such as misspelled words or proper nouns in Chinese.

Use these elements only when there is not a more appropriate semantic element, such as: em, strong, mark, cite, dfn.

The small tag defines smaller text (and other side comments). This text contains _subscript text. This text contains ^superscript text. Time is a tag for semanticly adding timestamps like for Valentines day 2020. var tag is a phrase tag. It defines a variable.

Use the mark tag if you want to highlight parts of your text.

Headings and paragraphs

That was a heading level 1, often the biggest heading. Really this is about creating good semantic page structure for accessibility.

h2 heading

That was a heading level 2, usually smaller than the previous heading. Really this is about creating good semantic page structure for accessibility.

h3 heading

That was a heading level 2, usually smaller than the previous heading. Really this is about creating good semantic page structure for accessibility.

h4 heading

That was a heading level 2, usually smaller than the previous heading. Really this is about creating good semantic page structure for accessibility.

h5 heading

That was a heading level 2, usually smaller than the previous heading. Really this is about creating good semantic page structure for accessibility.

h6 heading

That was a heading level 2, usually smaller than the previous heading. Really this is about creating good semantic page structure for accessibility.

Forms and field widgets

Lists

Media

Figure

Picture

SVG

Audio

Video

Meters & Progress bars

IFrame

Canvas

Tables

Internationalisation

Page structural elements

DIVs don't do anything