Tutorial 17.2 - HTML
17 Nov 2018
About
Hyper Text Markup Language (HTML) is the main markup language used for creating pages and information on web browsers. A markup language is a language that combines plain text with some form of syntactically distinguishable tags that define how the regular text elements should be formatted when displayed in a suitable viewer (such as a web browser).In HTML, most tags are paired into opening (<> and closing ( tags that specify the form of formatting to apply to all the text bounded by the tag pair. There are also empty tags that are unpaired and typically indicate the location of a specific action.
Not only does HTML define the format of text, it also defines the presentation semantics - the overall layout and structure of the document. Furthermore, HTML documents often embed other media and link to other resources as well as other languages (such as Cascading Style Sheets and Javascript) that provide additional and dynamic structural formatting. Collectively, all the marked up content and formatting information are interpreted and rendered by a redering or layout engine.
Since HTML documents are just text files, they can be created in any text editor. Thereafter, they are viewed in a browser. A browser is an application that understands the HTML format and is able to retrieve and render documents and other resources over the Internet as well as local file systems. As of the start of 2013, the major desktop browsers (in order of usage share) where:
- Google Chrome
- Microsoft Internet Explorer
- Mozilla Firefox
- Safari
- Opera
Whilst HTML is generally governed by certain standards (W3C) that have been established to attempt to ensure compatibility between browsers, such is the popularity of the world wide web (for anything from content consumption, goods and services trading, banking as well as cloud and collaborative computing), browsers compete to be the first to introduce new, more enabling capabilities. Often new capabilities are developed in parallel, thereby resulting in different HTML dialects and associated layout engines and thus incompatibilities.
| Feature | Google Chrome | Microsoft IE | Mozilla Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Layout engine | Webkit | Trident | Gecko | Webkit | Presto |
| Operating system | Windows, OSX, Linux | Windows | Windows, OSX, Linux | OSX | Windows, OSX, Linux |
| Web inspector/development tools | Yes | Yes | Yes | Yes | No |
Document structure
In its simplest form, a HTML document comprises of a head (in which the overall structure and formatting rules are defined) and the body (containing the marked up content). Although HTML documents are plain text files (*.html), they do have a specific structure that must be adhered to. A minimum example is helpful at this point.Simple example
Copy (and paste) the text (code) in the left hand box below into a text editor. Save the plain text file with an extension of .html and then open this file with a web browser. The result should be similar to that displayed in the right hand bo| HTML code | Result in browser |
|---|---|
|
|
The text of the document goes here. |
- The first line indicates that the document is a html document. Typically, this line will also include information above what version of HTML to use.
For example,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> would indicate HTML version 4.01 - The full HTML document starts with the tag <html> and ends with </html>. Within the <html></html> tags, there are two regions (the head and the body)
- The <head></head> tags define the document preamble or header. Text and code in this section are not rendered directly on the screen page - that is, the header is not for document content. Rather, this region is for defining styling rules and linking to other scripts.
- The <title></title> tags define a document title. This title is used as document meta data. The title will be displayed on the title bar of the browser rather than being rendered within the screen document (as it is in the header), instead it
- The <body></body> tags define the content of the document. Text within the body is usually rendered within the screen document.
- The <p></p> tags define a paragraph.
Most tags are in pairs and the tag pairs define the start and end of an environment. End tags are distinguished from start tags by the presence of a / before the tag name.
A HTML tag or tag pair defines an element. In the case of the above example, the <p> pair define a paragraph element.
More about tags and elements
Almost all HTML elements (the entities established by a tag pair and the enclosed content) have attributes. Attributes of elements modify the meaning or context (such as identity) of the element.
Some attributes are appropriate for all elements (these are called global attributes). A table of the most common of these global attributes follows. Other attributes are only applicable to specific elements and will thus be covered in association with the relevant elements.
| Attribute | Description |
|---|---|
| class | Indicates the name of a element class for Cascading Style Sheets. Classes are types of elements that share certain characteristics or behaviours. |
| id | Indicates a unique identity for the element. This allows the element to be referred to by other elements. |
| style | Defines the elements in-line style. |
Simple markup
Ordinary text and punctuation
HTML has few (if any) built in grammatical and punctuation rules. In the absence of any user defined markup, plain text will be presented as is. That is, a continuous stream of words.
Carriage returns (line feeds) are ignored by the browser, as are multiple spaces. Such formatting features are achieved via special tags (such as the <br> tag) and entity characters (such as the non-breaking space character, ).
Consider the following HTML code and associated result.| HTML code | Result in browser |
|---|---|
|
|
return can be forced however. The following three spaces are ignored, however these three entity characters are not. |
To arrange text into paragraphs, it is best to surround all the sentences of a paragraph between a pair of paragraph tags (<p>). The paragraph tags automatically apply extra line spacing above and below the first and last sentence, thereby separating the paragraphs visually.
| HTML code | Result in browser |
|---|---|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius, quam id ullamcorper feugiat, est dui accumsan justo, id pharetra tortor lectus in ante. Morbi molestie sem vel felis accumsan sed convallis libero tempus. Pellentesque a velit ut nunc convallis cursus. Curabitur feugiat, urna eu ultricies tristique, risus orci euismod +\n isi, et sodales nulla neque eget nunc. Fusce interdum lectus eget leo egestas eget consectetur leo iaculis. Aenean egestas dignissim rutrum. Donec sit amet libero est, dapibus vehicula lorem. Nunc varius feugiat enim sed vestibulum. Donec ultrices cursus blandit. |
Paragraph justification
You might have noticed that the paragraphs are left justified within the browser. This is the default behaviour, yet can be altered. Most tags have attributes that can be set to alter some aspect of the tag's behaviour.
Prior to HTML5 (version 5 of the HTML language), text alignment could be modified via the align attribute. This attributes could be set to either left, right, center or justify. For example.
| HTML code | Result in browser |
|---|---|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius, quam id ullamcorper feugiat, est dui accumsan justo, id pharetra tortor lectus in ante. Morbi molestie sem vel felis accumsan sed convallis libero tempus. Pellentesque a velit ut nunc convallis cursus. Curabitur feugiat, urna eu ultricies tristique, risus orci euismod +\n isi, et sodales nulla neque eget nunc. Fusce interdum lectus eget leo egestas eget consectetur leo iaculis. Aenean egestas dignissim rutrum. Donec sit amet libero est, dapibus vehicula lorem. Nunc varius feugiat enim sed vestibulum. Donec ultrices cursus blandit. |
A more modern and flexible approach to making such a style change involves engaging the element's style attribute. We will return to styles in the Cascading Style Sheets section.
| HTML code | Result in browser |
|---|---|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius, quam id ullamcorper feugiat, est dui accumsan justo, id pharetra tortor lectus in ante. Morbi molestie sem vel felis accumsan sed convallis libero tempus. Pellentesque a velit ut nunc convallis cursus. Curabitur feugiat, urna eu ultricies tristique, risus orci euismod nisi, et sodales nulla neque eget nunc. Fusce interdum lectus eget leo egestas eget consectetur leo iaculis. Aenean egestas dignissim rutrum. Donec sit amet libero est, dapibus vehicula lorem. Nunc varius feugiat enim sed vestibulum. Donec ultrices cursus blandit. |
Text formatting
Font styles and sizes
Brief changes to font styles is within a block of text can be effective at emphasizing or applying different meanings to characters.
Common text modifier styles are: italic, bold, strikethrough and underline.
Similarly, different font families are also used to imply different meaning. For example, courier font, roman or serif font, sans serif font.
HTML has an element called <em> that emphasizes (usually italics) the text within the curly braces. Further control of font styles is provided via either Cascading Style Sheets or the depreciated <font> tag as described in the following table. There are also a couple of other common styles that have dedicated tags.
Again, the scope of pure HTML font modifiers is rather limited. Cascading Style Sheets offer a much more flexible means to alter text formatting. Consequently many of the tags featured in the following tables have been are depreciated in HTML 4.01 and not defined at all within HTML5. Universally supported tags are indicated by a *.
| Tag | Font type | HTML5 Support |
|---|---|---|
| <i>..</i> | italic font | * |
| <em>..</em> | emphasized font | * |
| <b>..</b> | bold font | * |
| <u>..</u> | underlined font | * |
| <strike>..</strike> | * | |
| <font face="roman">..</font> | roman or serif font. This is the default font. | |
| <font face="sans-serif">..</font> | sans serif font. This is an Arial or Helvetica like font. | |
| <font face="courier">..</font> | courier or typewriter font. This is typically used to illustrate code |
The above elements can also be nested within one another for example to produce bold, italic text (<b><i>bold, italic text</b></i>).
There are a (depreciated) couple of tags for altering font sizes (and positions) in aesthetic increments.
| Tag | Font size | HTML5 Support |
|---|---|---|
| <small>..</small> | small font | |
| <big>..</big> | big font | |
| <sub>..</sub> | subscript font | * |
| <sup>..</sup> | superscript font | * |
Special characters
The following characters within HTML have special meaning (to define the markup) and thus do not render literally.& < >These characters must instead by included via a HTML character reference. There are also HTML character references for other non-standard characters. Alternatively, characters can be indicated via their Unicode number codes. The following table provides a small selection of the most common characters.
| HTML character reference | Unicode number | Result |
|---|---|---|
| & | & | & |
| < | < | < |
| > | > | > |
| HTML character reference(s) | Unicode number(s) | Result(s) |
|---|---|---|
| À Á Â | À Á Â | À Á Â |
| Ã Ä Å | Ã Ä Å | Ã Ä Å |
| Æ | Æ | Æ |
| Ç | Ç | Ç |
| È É Ê Ë | È É Ê Ë | È É Ê Ë |
| Ì Í Î Ï | Ì Í Î Ï | Ì Í Î Ï |
| Ð | Ð | Ð |
| Ñ | Ñ | Ñ |
| Ò Ó Ô | Ò Ó Ô | Ò Ó Ô |
| Õ Ö Ø | Õ Ö Ø | Õ Ö Ø |
| Ù Ú Û Ü | Ù Ú Û Ü | Ù Ú Û Ü |
| Ý | Ý | Ý |
| Þ | Þ | Þ |
| ß | ß | ß |
| à á â | à á â | à á â |
| ã ä å | ã ä å | ã ä å |
| æ | æ | æ |
| ç | ç | ç |
| è é ê ë | è é ê ë | è é ê ë |
| ì í î ï | ì í î ï | ì í î ï |
| ð | ð | ð |
| ñ | ñ | ñ |
| ò ó ô | ò ó ô | ò ó ô |
| õ ö ø | õ ö ø | õ ö ø |
| ù ú û ü | ù ú û ü | ù ú û ü |
| ý ÿ | ý ÿ | ý ÿ |
| þ | Ā | þ |
Headings
There are six hierarchical levels of headings defined in HTML. These, numbered h1...h6 represent headings, subheadings, subsubheadings etc. The default styles (font and sizes) of these headings have been chosen to reflect the hierarchy of the headings.| HTML code | Result in browser |
|---|---|
|
|
Main headingLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius, quam id ullamcorper feugiat, est dui accumsan justo, id pharetra tortor lectus in ante. Morbi molestie sem vel felis accumsan sed convallis libero tempus. Pellentesque a velit ut nunc convallis cursus. Curabitur feugiat, urna eu ultricies tristique, risus orci euismod nisi, et sodales nulla neque eget nunc. Sub headingFusce interdum lectus eget leo egestas eget consectetur leo iaculis. Aenean egestas dignissim rutrum. Donec sit amet libero est, dapibus vehicula lorem. Sub subheadingNunc varius feugiat enim sed vestibulum. Donec ultrices cursus blandit. |
Comments
Within HTML, comments (blocks of text intended only as notes for the developer) are included by placing the comment between <!-- and --> tags. For example:| HTML code | Result in browser |
|---|---|
|
|
Fusce interdum lectus eget leo egestas eget consectetur leo iaculis. Aenean egestas dignissim rutrum. Donec sit amet libero est, dapibus vehicula lorem. Nunc varius feugiat enim sed vestibulum. Donec ultrices cursus blandit. |
Cascading Style Sheets (css)
apply multiple styling rules to a single tag the formatting tags illustrated earlier are now discouraged as they fix the presentation rules with the content. This impedes flexibility. Cascading Style Sheets, allow styling rules to be defined in a separate layer (in the head or an external file), so that styles can be altered and reflected by changes throughout the entire document. Decoupling the content from the presentation rules allows for a change in presentation styles without requiring any changes to the content markup. This is in the true spirit of markup - content should be authored with very minimal styling. The styling rules are defined separately and therefore can be altered independently.Lists
There are three basic list elements available within HTML:- Ordered lists (<ol>...</ol>) for numbered lists
- Un-ordered lists (<ul>...</ul>) for un-numbered, bullet lists
- Definition lists (<dl>...</dl>) for descriptive or definition lists
| HTML code | Result in browser |
|---|---|
|
|
|
Nested lists
Lists can be nested within lists. That is, a list item can be another list, in which case, the new items (sub-items) are indented.| HTML code | Result in browser |
|---|---|
|
|
|
Definition lists
Definition or description lists display a set of emphasized (bold) words or small phrase along with their associated descriptions (indented on a new line).The list itself is bounded by a pair of <dl>...<\dl> tags.
The terms are enclosed in <dt>...<\dt> tags and the definitions enclosed in <dd>...<\dd> tags.| HTML code | Result in browser |
|---|---|
|
|
|
Graphics
Modern browsers are able to display a large number of graphical image types:- compressed bitmap images - which store images as a pixel array - the most popular of which are JPEG, GIF and PNG. These are best for photographs.
- scalable vector graphics (SNG) - which represent images as a series of coordinates and mathematically describable shapes. These are best for diagrams and text (particularly if they require resizing).
Images
Bitmapped images are included via the <img> tag. This tag is unusual in that it is not paired. Instead of operating on the plain text content between a pair of tags, the <img> tag provides a place holder for an image (resource) as well as a link to where the resource is located.
Whilst images can be hard-coded into the HTML document, more typically, the document mealy provides a link (via the src= parameter) to where the image (resource) is located. The browser takes care of retrieving the resource, determining the type of resource (and thus graphics driver) and renders the resource according to the location of the image place marker.
| HTML code | Result in browser |
|---|---|
|
|
 is placed exactly where the image tag appeared in text.
As no sizing information is provided, the image
will be rendered according to its natural dimensions.
|
By default the image is placed inline (as if it was a text character, albeit a large one) with the bottom of the image flush with the baseline of the surrounding text.
There are numerous other parameters that can be used to control various aspects of the dimensions and positioning of an image, although as with other elements, the best control is via Cascading Style Sheets.
Nevertheless, there are two important parameters (in addition to src). These are:
- alt - this parameter defines an alternative (text only) description of the image for visually impaired persons as well as text-only browsers.
- title
Tables
A table element is of course used to present tabular information. Within a table element (<table>...</table>) there are rows (<tr>...</tr>), within the rows are cells (<td>...</td>), and within cells are the content.Tables can appear anywhere and can even be nested within other tables. Furthermore, tables can also be used to arrange/align content within the HTML document (although yet again, CSS is a more sophisticated solution)..
| HTML code | Result in browser | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|
|
Table column headings
Often it is useful to be able to clearly distinguish the first row as headings. The <th>...</th> tag pair can be used instead of <td>...</td> tags and the enclosed content is centered and emphasized with bold font.| HTML code | Result in browser | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|
|
Table caption
Table captions are used to provide a description of the table content. Strictly, the caption should appear above the table and contain sufficient detail to allow the table and its caption to "stand alone" from the rest of the document.Sensibly enough, caption elements are supported via the <caption>..</caption> tag pair. Unfortunately however, it does not automatically prepend the caption with a prefix and incrementing counter (such as Table 1:).
| HTML code | Result in browser | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|
|
Cell padding and cell spacing
Cell padding and cell spacing define the amount of space within a cell and between cells respectively. By default, they are both set to 2px, yet cab be altered with the cellpadding= and cellspacing= parameters.
- When the cellpadding= and/or cellspacing= parameter(s) are applied to the <table> element, all cells of the table are affected.
- When the cellpadding= and/or cellspacing= parameter(s) are applied to a <tr> (row) element, just the cells in that row are affected.
- When the cellpadding= and/or cellspacing= parameter(s) are applied to a <td> or <th> (cell) element, only this cell will be affected.
| HTML code | Result in browser | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|
|
Content alignment
By default, cell contents are horizontally aligned to the left and vertically aligned in the center of the cell. The horizontal and vertical alignments can be respectively altered with the align= and valign= parameters of either the table (affects all cells), row (affects all cells in the row) or cell (affect only that cell).- horizontal alignment can be either align="left", align="center" or align="right"
- vertical alignment can be either valign="top", valign="middle" or valign="bottom"
| HTML code | Result in browser | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|
|
Spanning multiple rows or columns
Having a cell span multiple columns is achieved with the colspan= parameter to the cell (<td>) tag. When doing so, it is common to also adjust the text alignment such that the content is centered within the new multicolumn cell.| HTML code | Result in browser | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
|
||||||||||||
CSS and tables
In the following example, a new table class (called "elegantTable") is defined and CSS is used to make the following modifications from the standard table to this new table class:- Initially remove all cell borders, make the cellpadding equal to 2px and the border-spacing equal to 0px
- Specify a 1px solid black line above and below the header row
- Give the header row more padding and make the font slightly larger and bold
- Give the data rows a bit more padding
- Specify a 1px solid black line below the last data row
- Specify that the contents of the second data cell in each row (= second column) should be centered
- Specify that the contents of the last data cell in each row (= last column) should be right aligned
| HTML code | Result in browser | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|
|
Referencing (links)
Links are a prominent feature of the Internet. Browsing is essentially a process of following hyperlinks (links) between resources. These links can point to other resources, bookmarks within the current resources (page), or other content that can be downloaded.A hyperlink is specified via an <a>...</a> element. The href= parameter indicates the URL (Universal Resource Locator) of a resource, and the content between the <a>...</a> tag pair provides a clickable description of the resource or instruction.
The following example provides a link to the official R website.
| HTML code | Result in browser |
|---|---|
|
|
|
Absolute and relative links
The above example featured an absolute link. The link provided the full path or URL of the resource. However, if the resource resides within the same directory tree as the source HTML document (either in the same directory, or a nearby directory), then the link can be a path relative to the current location.For example to link to a resource called info.html:
- if the linked resource is in the same directory as the source HTML, then the hyperlink reference could be href="info.html"
- if the linked resource is in a directory called about within the same directory as the source HTML, then the hyperlink reference could be href="about/info.html"
- if the linked resource within the parent directory of the source HTML, then the hyperlink reference could be href="../info.html"
- if the linked resource is in a sibling directory (directory that shares a same root/parent as the current directory) called about, then the hyperlink reference could be href="../about/info.html"
Links to bookmarks within a page
The name parameter of any element provides a bookmark to which a link can refer. To link to a bookmark, the unique bookmark name is prefixed by a # character within the href= parameter string. Bookmarks are also not restricted to the same page - they can be bookmarks to specific locations within other pages.The following example provides a section element with a name of intro, and this is later referred to with a link. Note, as this is a very small example, the link will not appear to work (since the screen does not need to move in order to ensure that the linked section is on the screen).
| HTML code | Result in browser |
|---|---|
|
|
IntroductionLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a velit quis ante dignissim dignissim eget vitae tellus. Duis eget neque tellus, eu elementum leo. Nullam quis velit in magna bibendum dictum. Curabitur tincidunt cursus tellus, in egestas augue porta ut.MethodsPhasellus facilisis porttitor elit, vel pretium felis volutpat in. Praesent euismod sagittis tortor, eget varius nisi consequat eget. Sed facilisis aliquet accumsan. Maecenas aliquam, dolor id hendrerit viverra, lacus tortor elementum nunc, quis commodo ligula orci vel augue. Suspendisse dolor purus, volutpat vel viverra vitae, laoreet blandit nulla. In eros ligula, scelerisque id tempus nec, pulvinar vitae felis. Morbi tempor viverra orci, quis elementum metus lobortis sed. Curabitur sit amet ante massa here. |