HTML Tutorial – 10 – Structural Markup

Structural markup describes the purpose of text and lets the appearance be decided by the browser.

Text can be structured as a header using one of the six header tags – <h1>…<h6> – with <h1> being the largest and <h6> the smallest.

<h1>Header 1</h1><h2>Header 2</h2><h3>Header 3</h3>
<h4>Header 4</h4><h5>Header 5</h5><h6>Header 6</h6>

The header can be aligned with the values left, right, center or justified.

<h1 align="center">Header 1</h1>

Other common content-based styles are emphasis <em> and strong emphasis <strong>. They will typically be rendered the same as italic and bold.

<em>emphasis</em>, <strong>strong emphasis</strong>

Insert <ins> and delete <del> are used to markup replacement text. They are typically rendered as underlined and strikethrough.

<ins>new text</ins>
<del>old text</del>

When including a quotation there are two elements available – <q> and <blockquote>. The inline quote tag <q> is intended for short quotes. However, since not all browsers render the double quotes it is often better to just use normal quotation marks instead of this element.

<q>quote</q>

For longer quotations there is blockquote which will cause the text to be indented.

<blockquote>blockquotes are good for longer quotations</blockquote>

Then there is the <cite> element which is used for citations or for specifying references to quotes.

<cite>citation</cite>

Both quotation elements may also use the attribute named cite to provide a reference, but the value of this attribute will not be displayed in the browser.

<q cite="reference.html">quote</q>
<blockquote cite="reference.html">blockquote</blockquote>

There are three elements useful in technical documents: definition <dfn>, abbreviation <abbr> and acronym <acronym>.

<dfn>definition</dfn>
<abbr>abbr.</abbr>
<acronym>HTML</acronym>

The generic title attribute can be used to enter the full name for an abbreviation or acronym. This text will appear as a tooltip when the mouse cursor hovers over the element.

<abbr title="abbreviation">abbr.</abbr>
<acronym title="Hypertext Markup Language">HTML</acronym>

There are four elements related to programming. Code <code> can be used to structure programming code. Sample <samp> to show output from a program. Keyboard <kbd> for text to be entered by the user and variable <var> for program variable names.

<code>computer code</code> 
<samp>sample output</samp>
<kbd>keyboard input</kbd> 
<var>variable</var>

Recommended reading:
Sams - Teach Yourself HTML and CSS in 24 Hours

PVT book:
Handbook of C++ Syntax