HTML Tags

[ Back to HTML resources home page ]

This document is designed to outline the basic elements that make up a HyperText Markup document that effectively communicates whatever information you like. Some "modern" elements have been omitted as they are typically either useless or outright wasteful. You do not need to read what is here in any sequence, and you may skip around to whatever you need, whenever you need at any moment.

[ Formatting | Headings | Structure and Layout | Multimedia ]

Formatting

These tags are used for changing various text formatting. The B/STRONG, I/EM, and U tags, being in-line tags, can also be nested in almost any order. The CENTER and ADDRESS tags are not in-line, and should be on the outside of any nested groups of other tags.

While the order of closing tags do not completely matter on most browsers, it is better to open and close tags like:

<1> <2> <3> <4> <5> </5> </4> </3> </2> </1> Indenting is completely optional. It is only done here to show tag hierarchy. Closing tags are only required for in-line tags that affect text presentation like these.

<b>Text</b>

Make text bold.

Example:

<b>Bold text</b> Bold text

<i>Text</i>

Make text italic.

Example:

<i>Italic text</i> Italic text

<u>Text</u>

Make text underlined, but can easily confuse people who check for hyperlinks by looking for any and all underlined text anywhere on the page.

Example:

<u>Underline text</u> Underline text

<strong>Text</strong>

Same as B, but with semantic value detailing importance as opposed to just visual presentation. For most cases, B is good enough.

Example:

<strong>Strong text</strong> Strong text

<em>Text</em>

Same as I, but with semantic value detailing importance as opposed to just visual presentation. For most cases, I is good enough.

Example:

<em>Emphasized text</em> Emphasized text

<tt>Text</tt>

Renders text in a monospaced font, similarly to XMP and PRE, but within in-line with the text rather than in a separate group.

Example:

<tt>TeleType text</tt> TeleType text

<kbd>Text</kbd>

Same as TT, but explicitly in a way that represents user inputs, such as keyboard presses.

Example:

<kbd>Keyboard text</kbd> Keyboard text

<samp>Text</samp>

Same as TT, but explicitly in a way that represents computer outputs.

Example:

<samp>Non-System disk or disk error <br>Replace and strike any key when ready</samp> Non-System disk or disk error Replace and strike any key when ready

<code>Text</code>

Same as TT, but explicitly in a way that represents source code.

Example:

<code>int main() { return 1; }</code> int main() { return 1; }

<center>Text</center>

Centers the text.

Example:

<center>Centered text</center> Centered text

<address>Text</address>

Inserts an address block, usually italicized.

Example:

<address>Address text</address>

Address text

<big>Text</big>

Makes the text slightly bigger.

Example:

<big>Big text</big> Big text

<small>Text</small>

Makes the text slightly smaller.

Example:

<small>Small text</small> Small text

<sup>Text</sup>

Renders the text as superscript.

Example:

Some <sup>superscript text</sup> Some ^{superscript text}

A popular example: E=mc²

<sub>Text</sub>

Renders the text as subscript.

Example:

Some <sub>subscript text</sub> Some _{subscript text} --

A popular example: UO₂(NO₃)₂

<hr>

Draws a horizontal line.

Example:

The formatting tags may also be used within tags mentioned in other sections as well.

Headings

These tags are used for separating various sections and sub-sections. While H5 and H6 also exist, you will likely never need either of them, as the text is, for the most part, going to almost always be too small to read on modern displays anyways.

<h1>Text</h1>

Main headings such as the page title.

Example:

<h1>Heading 1</h1>

Heading 1

<h2>Text</h2>

Headings of sections. Use if there is an H1 tag above it.

Example:

<h2>Heading 2</h2>

Heading 2

<h3>Text</h3>

Headings if sub-sections. Use if there is an H2 tag above it.

Example:

<h3>Heading 3</h3>

Heading 3

<h4>Text</h4>

Headings of sub-sub-sections. Use if there is an H3 tag above it.

Example:

<h4>Heading 4</h4>

Heading 4

Structure

These are basic tags for separating contents and defining page structure. The ending tags to P, BR, LI, DT, and DD tags are optional, but they are required for A, XMP, PRE, TT, KBD, UL, OL, and DL.

<p>Text</p>

Inserts a "paragraph" text block.

Example:

<p> Paragraph text

Paragraph text

<br>

Inserts a single line break without creating a separate paragraph container.

Example:

Line<br>broken<br>text Line
broken
text

<a href="link">Text</a>

A (Hyperlink): provides a clickable path that links documents together. This feature is a key component of what makes the HyperText Transfer Protocol (HTTP) and HyperText Markup Language (HTML).

Example:

Link to <a href="https://www.aperture.akron.oh.us/">Aperture</a>'s home page. Link to Aperture's home page.

<a name="link">Text</a>

Another use of tags for anchoring to parts of pages. (If you're doing JS or overly complicated CSS things, you'll want the "id=" attribute. If you need IDs for anything though, you should reconsider what you're doing.)

Example:

Sample <a name="aname">anchor</a>. <p> Link to <a href="#aboth">sample anchor</a>. <p> <a href="#aname" name="aboth">Both a href and name simultaneously!</a> Sample anchor.

Link to sample anchor.

Both a href and name simultaneously!

<xmp>Text</xmp>

Displays all text as plain-text in a separate container, similar to the P tag.

Example:

<xmp>XMP block which the code needs to be demonstrated
in a PRE block for so that the code sample works.</xmp>

XMP block which the code needs to be demonstrated in a PRE block for so that the code sample works.

<pre>Text</pre>.

Same as XMP, but <anything> is parsed by the browser still as HTML tags rather than just displayed as plain-text characters.

Example:

<pre>PRE block, so I can use things like <b>bold</b> & <i>italics</i>, and have them render.</pre>

PRE block, so I can use things like bold &
italics, and have them render.

<ul>Text</ul>

Bulleted items list. Items would need to be within a LI tag.

Example:

UL text with no LI

<ol>Text</ol>

Similar to UL, but with numbers instead of solid, outlined, and squared bullet marks.

Example:

OL text with no LI

<li>Text</li>

Items within UL or OL tags.

Example:

<ul><li>Example<ul><li>in<ul><li>nested<li>ULs</ul></ul></ul> <ol><li>Example<ol><li>in<ol><li>nested<li>OLs</ol></ol></ol>

Example
- in
  - nested
  - ULs

Example
1. in
  1. nested
  2. OLs

<dl>Text</dl>

Inserts a definition list. These are similar to both UL and OL, except you use DT and DL instead of LI inside them.

Example:

Example with no title or description

<dt>Text</dt>

Inserts a definition title. On this page, the B tag is also used to make the titles bold. By default, they have no distinct styling.

Example:

<dl><dt>This title is without description</dl>

This title is without description

<dd>Text</dd>

Inserts a definition description.

Example:

<dl> <dt>This title is with description... <dd>...and here it is. </dl>

This title is with description...: ...and here it is.

<blockquote>Text</blockquote>

Creates an indented container suitable for longer quotations, especially ones that span multiple paragraphs.

Example:

<blockquote>Blockquote text.<p>A second paragraph</blockquote>

Blockquote text.
A second paragraph

Multimedia

While some web browsers now support embedded audio and video, this document does not include them as they are always very costly on bandwidth for both the server and the user(s), and should not be used in documents. If you want to show people a video or audio, give a hyperlink to it instead.

<img>: Inserts a static image embed.
Example:

Anton McClure / asm@aperture.akron.oh.us