/

HTML / CSS / JavaScript Tutorial

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


Desktop view | Switch to Mobile