HTML5 Elements

Text

Headings

HTML has six levels of headings h1, h2, h3, h4, h5 and h6. 

The h1 element is for the main heading on a page. As the number increases, the headings become sub-headings, sub-sub-headings, etc. By default a Web browser will display the text enclosed in a heading element in different sizes.

 The element h1 is displayed in the largest font size, and the font size gets successively smaller as the number increases. The default behaviour of how headings are displayed by the browser can be overridden using CSS (this will be covered later).

Paragraphs

HTML has an element type for paragraphs. The HTML element for a paragraph is p.

 By default, the paragraph element will display each paragraph element on a new line, as is done for written English. Some additional white space is also added between paragraphs.

Bold & Emphasis

HTML has a couple of elements to format text in bold face font. Traditionally, in versions of HTML prior to HTML5, this would be done through the b element.

 However, in HTML5 it is recommended that the strong element is used instead. By default the browser will display the text enclosed in b or strong as a bold face font. This default behaviour can be overridden in CSS.

HTML also provides a method of providing emphasis that is different from bold. It can be used similarly to italics or where a subtle emphasis needs to be applied to a particular word or phrase in a sentence. The HTML element that provides this functionality is the em element.

Subscript & Superscript

The HTML elements sup and sub enable superscript and subscript respectively. By default the browser will alter the alignment of text such that the text sits above or below the horizontal center line of the text.

Line breaks & Horizontal rules

The browser employs a system called white space collapsing. 

This system means that white space in HTML code is ignored if it is immediately preceded by another white space character. Because of this system, HTML has a set of elements for displaying white space. 

The br element introduces a line break - a clear blank line. To introduce a horizontal line, the hr element is used.

 Both the br and hr elements are self closing elements. This means that the elements do not have to have opening and closing tags. It is sufficient to have use the tag of the following form <br/> and <hr/>.

Quotes

HTML provides a means for quoting text. There are two HTML elements that provide this functionality. They are blockquote and q. 

The two elements are displayed differently by the browser. 

The blockquote element will be indented by the browser and is intended for longer quotation whereas the q element is used for quoting inside a paragraph (inline). This default behaviour can be overridden in CSS.

It is worth noticing that the blockquote element has an attribute called cite which allows a url to be provided where the quotation comes from.

Abbreviations

The HTML element abbr provides a method of using an abbreviation. The element uses an attribute called title to set the full expansion of the abbreviation.

The default behaviour of the browser for an abbreviation is to provide a mouse-over tooltip - that is, if the mouse is hovered over the abbreviation, then the expansion is displayed to the user.

Citation

The HTML cite element provides a method of citing a book, film or research paper. 

The browser has a default behaviour for displaying cite elements. The browser will display the text enclosed in the cite element in an italic font.

Definition

For the introduction of new terminology, HTML provides the dfn element. The dfn> element is for the first time that a technical term is introduced on a webpage. The default display of a definition varies according to the browser used. If a consistent display for definitions is desired, the display element can be overridden in CSS.

Address

The address HTML element provides information about the author of the current page.

 The default display of the address element in most browsers is to display the text in italics.

Changes to content

Content on the Web is constantly changing. When information changes it is often a good idea to annotate the change to allow the user to see the change. This facility is provided by ins, del and s. 

The ins element is used to show that content has been inserted into a document. The default display of an ins element is to underline the text enclosed in the element. 

The del element is used to indicate that content has been deleted from the document. The default display of the del element is to strike the text through with a line.

Lists

Lists are a common feature in many documents. HTML provides three types of lists: ordered lists, unordered lists and definition lists. 

The list elements provide a bullet point or enumerate list. The style of the list can be overridden in CSS.

 By default the display of an ordered list is to number the elements and the default display of an unordered list is bullet points.

Ordered lists are provided by the ol element in HTML. The ol element is the container for the ordered list element. Each element in the list is provided by the li element.

Unordered lists are provided by the ul element in HTML. The ul element is the container for the unordered list element. Each element in the list is provided by the li element.

Definition lists provide a means of listing a set of definitions. The display of a definition list is similar to that of words in a dictionary. The HTML element for the definition list container is dl. Inside a dl element it is normal to see pairs of dt and dd.

It is possible for a list item (a li) element to contain a list itself. In this case the bullet point or the numbering is adjusted appropriately.

Links

Links are a fundamental building block that enables the formation of a web of pages.

 A link is a portion of the page that is clickable. 

When the area is clicked, the link url is loaded in the browser.

 A link in HTML is made using the a element. 

The a element has an attribute named href which is the link url - where the link will go to. Any text or HTML elements enclosed in a a element will be a link to the link URL.

The URL provided as the link URL can be either relative or absolute.

 An absolute URL is a URL that contains the full path to the resource to be loaded. In the example above the URL is an absolute URL. 

A relative URL is a URL where the resource specified is relative to current document's location. Relative URL's are preferred when linking resources within a website. The structure of relative URL is different, but not impossible to understand - below are a set of examples:

<a href="faq.html">FAQ</a>

<a href="folder/faq.html">FAQ</a>

<a href="folder/another_folder/faq.html">FAQ</a>

<a href="../faq.html">FAQ</a>

<a href="../../faq.html">FAQ</a>

The a element can also be used to link to an email address. To do this the initial part of the URL should be set to mailto: (see example below).

The a element can also link to a section on a page. This is achieved in the same way as before only that the href attribute is set to the value of the id attribute of the element to link to.

<p id="bookmark">This is a paragraph to link to.</p>

<a href="#bookmark">Linked to the paragraph with id equal to bookmark</a>

Images

The inclusion of images on webpages is common. 

The HTML element that facilitates displaying images on webpages is the img element. 

The img element should have the src and alt attributes set. 

The src attribute sets the URL to the image that should be displayed. 

The alt attribute is the alternative text that is displayed in the event that the image cannot be loaded, or when the user is using a browser that is not capable of displaying images. The alt attribute must always be set, in order to be compliant with accessibility standards. 

The img element is similar to br and hr in that it is a self closing element.

<img src="cute_kitten.jpg" alt"Image of a cute kitten"/>

When an image is loaded by the browser it will be loaded at the native size, that is, the size of the image.

 It is possible to resize the image in HTML - this is a good practice as loading images takes longer than loading the HTML document. 

The browser can save space if it knows the size of the image to be loaded when displaying the page. This results in a more efficient displaying process. 

To specify the size of an image set the width and height attributes of the img element.

 By default, the unit used for the size of the images is pixels, however other units can also be used (this will be covered in more detail later). The location of where the image should be placed relative to the surrounding elements should be defined in the CSS.

Figures & Figure captions

In books and news papers, figures often come with a caption that explains the image or provides additional information about the image that allows the user to interpret the image in a particular context. In HTML this is facilitated by the figure and figurecaption elements. 

The figure element is the container for an img element and a figurecaption element. By default the caption is displayed beneath the image. This behaviour can be overridden in CSS.

CSS3

CSS allows style to be applied to HTML documents. The style determines how each of the HTML elements should be displayed by the browser. For example, it is possible define that the background of a webpage should be displayed in a certain colour, or that the text in all paragraphs should be blue. CSS defines style rules - these rules are read by the browser when the page is being loaded. It is possible to change the whole appearance of a webpage by altering the CSS.

The key to understanding CSS is understanding how CSS affects the elements of a webpage. One way of understanding CSS is to imagine that each element is enclosed in a box. An example can be seen below.

Each of the elements is enclosed by a box. CSS allows the definition of rules that control how each of the boxes are displayed by the browser. Almost any feature of each of the boxes can be controlled to alter how it is displayed.

CSS works by associating style rules with HTML elements. 

These rules determine how the content of the specified element should be displayed.

 Any CSS rule consists of two parts: a selector and a declaration.

 A selector indicates which HTML elements are affected by that particular CSS rule.

 The declaration indicates how the elements specified by the selector should be displayed. The declaration is a list of property-value pairs, which are separated by a colon. 

CSS declarations are enclosed by curly brackets ({ and }). Within the curly brackets it is possible to define multiple declarations. The first part of a declaration is called a property and the portion of a declaration after the colon is called the value.

In the example above the CSS rule affects the p element. There are two declarations that are applied to any p element. They first declaration sets the color to #770077, this changes the colour of the text to a dark purple colour. The second declaration sets the background-color to #00ee00, this sets the background of any p element to be green.

Using CSS

There are three places that CSS can be defined in a HTML document. 

It can either be defined at the top in the head element using the style element, it can be defined inline using the global attribute style, or it can be located in a separate CSS file. 

External CSS files normally have the file extension .css. To use an external CSS file it is required that the external file is linked to the HTML document. This is achieved through the use of the link element.

<link href="style.css" type="text/css" rel="stylesheet" />

The example above should be included in the head of a HTML document and tells the browser that the CSS style sheet for this HTML document is external and it can be found in the same folder as the HTML document and that it is called 'style.css'. 

The CSS file may be anywhere, the href attributes should be a URL to the CSS file.

It is possible to include CSS in the head element of a HTML document. CSS should be enclosed in the style element with the attribute type set to text/css. Below is a working minimal example of how to include CSS in an HTML document.

<html>
    <head>
        <style type="text/css">
            body {
                background-color: #227733;
            }
            h1 {
                color: rgb(255,255,255);
            }
        </style>
    </head>
    <body>
        <!-- main content of web page -->
    </body>
</html>

CSS selectors

There are many different types of CSS selectors which allow different HTML elements to be specified. The table below outlines the commonly used selectors.

Cascanding style sheets

Okay, so CSS is reasonably simple. But why the name?

 If two or more rules apply to the same element of an HTML document then there is a rule which determines which rule applies. There are two rules that apply when trying to determine which CSS rule gets applied to an element. If two selectors are identical then the last one is applied. If one selector is more specific than the other, then the more specific CSS rule will be applied over the general one.

CSS supports a concept called inheritance. This allows the property and value of one element to be carried over to all its descendent. This concept makes defining CSS files much easier and results in a better looking webpage. Consider having to change the font in all elements that are descendents of some HTML element type. Not all properties inherit though. As each of the properties are introduced the scope of the inheritence will be outlined. It is always possible however to force inheritence in the CSS.

CSS Colours

Colour is an important part of making a webpage appealing, however it can cause problems for accessibility.

 The color property is used to specify the colour (note: use the American spelling for the color property). The colour can be expressed in three different, but equivalent, ways. These three ways are via rgb, Hex code and colour names.

RGB

Colour can be seen as a mixture of three distinct colours; Red, Green and blue. Because of this it is possible to express a colour as a combination of these three colour values. These colour values are percentages. To express the color property the following notation is used color: rgb(100,100,90);.

Colour names

HTML has a list predefined colours. There are 147 different colour. For a complete list of predefined colour refer to the CSS colour reference section.

Hex codes

Hexidecimal is an encoding scheme for numbers that is commonly used in computer science. Unlike decimal, where numbers are encoded using base 10, in hexidecimal number are encoded using base 16. The values when encoding in hexidecimal are 0-F which are mapped onto 0-15. When using hex codes to respresent colours the colour is encoded similarly to RGB. Each of the colours (red, green and blue) are represented by a number in the range of 0-255. In hexidecimal any value between 0 and 255 can be represented as two characters. To encode an rgb value in hexidecimal each colour is encoded an individual hexidecimal value. Then the three values are concatenated togther, prefixed with a #. For examples of hexidecimal colours see the CSS colour reference.

To specify the colour of an element the CSS property color is used. To specify the background colour of an element the CSS property background-color.

To assist in the selection of colours there are tools. The tool colorpicker is recommended. There are some key considerations when selecting colours for webpages - one of which is to ensure that there is sufficient contrast between colours in order to make the content readable by the user. In later sections more will be said about contrast and accessibility.

Opacity

CSS3 introduced the CSS property opacity. This property allows the opacity of an element and any of its child elements to be specified. This property is inherited by its children. The value of the opacity property should be between 0.0 and 1.0 (shown in the example below p.one). Alternatively, instead of setting the opacity property it is possible to specify a colour with transparency (shown in the example below p.two).

/* unvisited link */
a:link {
    color: red;
}

/* unvisited link */
a:visited {
    color: red;
}

/* unvisited link */
a:hover {
    color: red;
}

/* unvisited link */
a:active {
    color: red;
}

/* unvisited link */
a:focus {
    color: red;
}