Documentation – Basic HTML elements

The “M” in HTML means “Markup.” A webpage consists of content that is marked up with HTML elements that control where and how the content is to be displayed. There are a large number of HTML elements available, allowing for a rich variety of display. As an editor maintaining the IDRC alumni website, you need to know only a small subset of these elements.

But first, some general HTML basics:

      • All HTML elements are written between “<” and”>”. For example, a paragraph starts with “<p>”.
      • HTML elements are case insensitive <br>, <BR> and <Br> are all valid and mean the same thing.  However, best practices stipulate that you should use only lower case, and that is what is done here. It also makes everything compatible with XHTML, which is a stricter form of HTML. The same applies to the attributes (discussed below), with the exception that the values of “alt” and “title” should use appropriate case.
      • All closing HTML elements are written between “</” and”>”. For example, a paragraph ends with “</p>”. Thus: <p>This is a paragraph.</p>
      • Some HTML elements do not contain any content (whereas a paragraph contains the text that makes up the paragraph). An example of an element that contains no content is the line break element. It is written as “<br>”, but may also be written as “<br />”. These elements are called self-closing elements.
      • HTML elements may have attributes. Attributes provide more detail of how the element is to be handled. Attributes are usually separated by spaces, and have values. Here is an example of an element with two attributes:
        <hr class=”centred-content” id=”documentation”>
        Attributes are described elsewhere on this page.

HTML elements

Here  are the the most likely HTML elements that you will use:

Element Name Self closing? Common attributes Notes

Headings

h1 heading level 1 DO NOT USE. WordPress uses this for the page heading.
h2
h3
h4
heading levels 2, 3 and 4 id, class Three successively lower levels of headings and subheadings on a page
h5, h6 heading levels 5 and 6 It should not be necessary to go this low!

Text

br break Start a new line
p paragraph id, class
b
strong
bold Either can be used and mean the same thing
i
em
italics Either can be used
sup superscript
sup subscript

Lists

ol ordered list A list of items, numbered (1, 2, 3 or a, b, c or i ii iii, etc.). Use when the order is important.
ul unordered lists (bulleted lists) A list of bulleted items.
li list item One item in an ordered or unordered list. Note: a list item can in turn contain a sublist, by adding <ol> or <ul> immediately after the <li> of the containing list item. This can be repeated to several levels.

Lines

hr Horizontal rule A line is drawn across the page, within the margins

Images

img image src, alt Both attributes are required.

Links

a “anchor” href, title Any text, image, or combination of these can be a link. Both attributes are required.

Blocks

div id, class Defines a block. Everything within the <div>…</div> is controlled by the block. Used to define formatting. Box CSS attributes apply.
span class Defines a chunk of inline text. Like <div>, is used to define formatting. Box-related CSS attributes may be applied, but the chunk of text is not really a box (block).

Tables

table Defines a complete table. All other table elements are placed within this one.
thead table heading Defines one or more rows of table column headings.
tbody table body Defines one or more rows of table content.
tfoot table footer Defines one or more rows of table footer. Seldom used.
tr table row Defines one or more rows of the table, including the heading and footer. Placed inside “thead”, “tbody” or “tfoot”.
th table header cell Defines the cell heading for one column. Placed inside a “tr” that is inside the “thead” element.
td table data colspan, rowspan Defines one cell in the table proper. Placed inside a “tr” that is inside a “tbody” or “tfoot” element.

Element attributes (arranged alphabetically)

Attributes provide more information for the HTML element to which they are applied. Attributes are place after the  the name of the HTML element, but before the closing “>”.  All attributes have values, which follow the attribute name.  An example is: <a href=”linkURL” title=”link description”>  Thus, the form for one attrivute is:

  1.  space
  2. =”
  3. value

There can be more than one attribute for an HTML element.

There are far more attributess than listed here, but these are all you should normally need. (Note that WordPress may insert other attributes not listed here. This is OK and can be ignored).:

Attribute Name Possible values Notes
alt alternative text alternative text for an image Mandatory for images. Used by screen readers for the visually impaired.
class A reference to one or more class definitions in the style sheets. Use this to ensure common formatting of page contents.
href hyperlink (reference) A valid HTML link address required with element “a”
id An HTML  label to allow one to link to a specified point within a page. Is also used to apply formatting rules in a style sheet. An id must be unique within a page. It carries more weight than a class in style sheets, thereby overriding rules that may belong to classes.
src source A valid HTML address for an image
style Applies unique styling (CSS) to the element. This should be AVOIDED if possible. The style rules for the website should apply wherever possible.
title Description of a link Mandatory with links.