HTML Tutorial
7. HTML Elements (and their attributes)
[this page | pdf | back links]
The basic building blocks
of HTML
are elements (also called tags). A list of recognised elements is shown here. Some HTML elements,
like the hyperlinks in HTMLTutorialHyperlinks,
are by default differentiated from the text around them. The most general way
of formatting text (capable of altering any of the default formatting of any
visible HTML element) involves use of Cascading Style Sheets (CSS) or in-file
or in-line equivalents, see Nematrian's CSS Tutorial.
In-line CSS involves assigning a specific style attribute to
a given element. Other sorts of attributes can also be assigned to different
sorts of elements. A list of recognised attributes is shown here. The exact range
of attributes valid for a specific element type does vary; see individual
elements or attributes for further details.
Many other elements are
also by default differentiated from the text around them or exist primarily to
facilitate this sort of differentiation. Examples include:
HTML element
|
Normally used for e.g.
|
example
|
<address>
|
Contact information for
the author or owner of a document
|
Mr. Smith, 1, George
Street, Georgetown
|
<b>
|
Bold text
|
1, George Street,
Georgetown
|
<blockquote>
|
Section that is quoted
from another source
|
1, George Street,
Georgetown
|
<cite>
|
Title of a work
|
Systemic Risk
|
<code>
|
A piece of computer
code
|
var x = 2.0;
|
<del>
|
Indicates text deleted
from a document
|
abc
|
<dfn>
|
Defining instance of a
term
|
HTML, a markup
language
|
<em>
|
Emphasised text (often
used to italicise text, but ideally this should be done using CSS, as
emphasis does not need to involve italics)
|
HTML, a markup
language
|
<footer>
|
Footer for a document
or section
|
HTML
|
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
|
HTML headings
|
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
|
<header>
|
Header for a document
or section
|
HTML
|
<i>
|
A part of text in an
alternate voice or mood
|
HTML, a markup
language
|
<ins>
|
Indicates text added to
a document
|
def
|
<kbd>
|
Keyboard input
|
text representing keyboard input
|
<mark>
|
Marked/highlighted text
|
text to highlight
|
<pre>
|
Preformatted text
|
preformatted text (in fixed
-width
font that also
preserves spaces and
line breaks
|
<q>
|
Short quotation
|
Mary had a little lamb
|
<s>
|
Text that is no longer
correct
|
abc
|
<samp>
|
Sample output from a
computer program
|
output
|
<small>
|
Smaller text
|
1, George Street,
Georgetown
|
<strong>
|
Defines more important
text, commonly used as another way of highlighting text or making it bold
|
Mary had a little lamb
|
<sub>
|
Subscripted text
|
A1
|
<summary>
|
Heading for a <details>
element
|
Heading
|
<sup>
|
Superscripted text
|
A1
|
<time>
|
Date / time (N.B. isn't
normally differentiated from standard text in most modern browsers)
|
10:00
|
<u>
|
Text that should be
stylistically different from normal text, commonly used for underlining
|
abc
|
<var>
|
Variable
|
Param1
|
<wbr>
|
Posible line-break, the
Word Break Opportunity tag specifies where in a text it would be ok to add a
line-break
|
|
Some HTML elements are no longer supported in HTML5. Although they often work
in browsers you should ideally use CSS instead.
These include:
HTML element
|
Normally used for
e.g.
|
example
|
<big>
|
Big text
|
1, George Street, Georgetown
|
<center>
|
Centred text
|
abc
|
<font> as in
e.g. <font
color="green">
|
Green text
|
green text
|
<strike>
|
Strikethrough text, not
supported in HTML 5 (instead use <del> or <s>)
|
abc
|
<tt>
|
Teletype text
|
abc
|
Some HTML tags differentiate content, but primarily to assist the browser's
understanding of that content, e.g.:
HTML element
|
Normally used for
e.g.
|
example
|
<abbr> as in
e.g. <abbr
title="Mister">
|
Abbreviation or acronym
|
Mr.
|
<data> as in
e.g. <data
value="1011">
|
Links content with a
machine-readable translation
|
Apple
|
Some HTML tags demarcate content so that the material can be segmented up more
effectively, or assigned different formatting styles, e.g.:
HTML element
|
Normally used for
e.g.
|
example
|
<article>
|
Article
|
Title
Material
|
<aside>
|
Content aside from the
page content
|
Title
Material
|
<details>
|
Additional details that
a user can view or hide
|
Title
Material
|
<div>
|
Section in a document
|
a single piece of
content
|
<main>
|
Main content of a
document
|
main text
|
<p>
|
Paragraph (by default
has space added above and below the text)
|
a paragraph
|
<section>
|
Section in a document
|
a section
|
<span>
|
Section in a document
|
a section (span)
|
A summary of the default
styles applied to each HTML element is set out here.
NAVIGATION LINKS
Contents | Prev | Next | HTML