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:
- space
- =”
- 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. |