News & UpdatesProgrammingWeb programming Store My Projects

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.


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.


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>.


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> 
Recommended additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours