Commonly used elements

A handful of HTML elements can go a long way in authoring a web document. As a developer, you need to extend this to author content that in the modern web is more likely to be manipulated by many computer programs before received (read, listend to, or watched) by a human on a variety of devices. A click on a hyperlink for a document involves several programs before being rendered on your desk-top browser or mobile phone.

The aim is to author documents that are accurately interpreted by as wide a range of programs running on as many devices as possible.

Exercise – HTML5 element reference

  1. Open the HTML element reference.
  2. Click on the p element and select Mozilla in the pop up window.
  3. A reference page is opened for the particular element, briefly read the summary and scroll down to the example.

For each element introduced in this tutorial, take a brief look at its reference page.

doctype

Whilst not required, it is good practice to always include a doctype as the first line in every document indicating the version of html being used. In the absence of a doctype browsers will interpret your markup with a different logic, known as the ‘quirck mode’ with possible unexpected results. The doctype for html5 is simply:

<!doctype html>

Root element

The root element is simply html. Whilst not required in html5, it is needed for XML conformance in XHTML and good practice to include it in every document. Being the root element, it should be included imediately after the doctype

<html>
	...
</html>

HTML element reference

Metadata and scripting

The commonly used elements in this group are head, title, meta and link elements. Here are some examples:

<head>
	<title>My web document</title>
	<meta charset="utf-8" />
	<meta name="author" content="your name" />
	<meta name="description" content="Web development exercises" />
	<link href="main.css" rel="stylesheet" type="text/css" />
</head>

HTML element reference

The head element generally has meta data (information about the document) elements such as the character set, author, and style sheet nested within it. It is generally the first element nested in the html element.

Other elements in this category include style and script elements; generally, you should avoid these elements and instead include any CSS style definition and Javascript in seperate files and use the link element to include them in your html document.

Document sections

The most common elements in this section are, body, article, header, h1 to h6, nav, section, and footer. None of these elements are required in HTML5 but generally they apply to most documents and provide for a more maintainable structure.

<body>
  <article>
	  <header>
		  <h1>TODO: page header</h1>	
		  <nav>
			  <h1>TODO: Main navigation</h1>	
		  </nav>
	  </header>
	  <section id="main_section">
		  <h1>TODO: Main content section</h1>	
	  </section>
	  <footer>	
		  <h1>TODO: Page footer</h1>	
	  </footer>
  </article>
</body>

HTML element reference

Headings - h1 to h6

There are six levels of headings. A heading describes the topic of a section in a logical order; think of a table of content compiled from headings and apply headings in a logical order.

Headings are often misused for the way they are displayed in a browser; you would not expect a table of content jumping from a heading level 4 to 6 nor should you do that in your markup . The purpose is to represent a logical order within a section.

Grouping content

Much content is grouped together in a paragraph, for which there is the obvious p element. However, content can also be grouped in lists or quoatation from another source. We may wish to group content in a combination of paragraphs, lists, and quatations for later referencing. Then there are particular types of content, such as code or definitions as in a dictionary. Let us consider some common examples.

Paragraph

Here is an example of a paragraph

<p>Example paragraph grouping text content.</p>
<p>And here is a more interesting paragraph with a special copy right characters, ©.</p>

HTML element reference

Certain characters such as the copyright © or mathematical symbols are represented by character entities.

To distinguish the character entities from other characters, they follow a particular format; they start with an & followed by a keyword, such as copy (short for copyright) and end with a semicolon; so &copy; would be displayed in a browser as ©. Here is a typical example code:

<p>&copy; Copyright - no rights reserved!</p>

Common misused keyboard characters instead of character entities include:

You will find a complete list of special characters here.

Block quoates

Here is an example of a block quote:

<blockquote cite="http://developer.mozilla.org">
	<p>This is a quotation taken from the Mozilla Developer Center.</p>
</blockquote>					

HTML element reference

Also see the q element for inline quoate

Lists

Content can be grouped in lists which have list items. The two commonly used lists are:

<p>Schedule for today</p>
<ol>
	<li>Wake up, drink coffee</li>
	<li>Feed the cat</li>
	<li>Ponder on the duality of human existence</li>
</ol>
<p>Places to visit</p>
<ul>
	<li>Honoloulou</li>
	<li>Yellow mountain, China/li>
	<li>Dark side of the moon</li>
</ul>

HTML element reference

Unordered lists with hyperlinks as list items are often used for navigation.

Div

The div element was introduced in html4 as a general container for grouping elements for styling purposes. It can wrap any other element and is typically used with a class attribute.

<div class="highlight">
	<p>Any element you wish!</p>
</div>

HTML element reference

html5 introduces more semantic sectioning elements, article, section, header, footer and nav and they should be used in preference to the more generic div.

Text level semantics

Choosing elements is essentially a semantic look at some content and choosing the most suitable element(s). In some cases this is straight forward, a paragraph has the equivalent p elements. In other cases the choice of elements is not so clear, for example, there is a fine difference between the strong, em and b elements; take a brief look at the Mozilla explanatory notes and examples.

Please don´t make a common mistake of choosing elements for the way a particular browser displays it!

Inline quoates

The q element can be used for short inline quoatation; here is an example:

<p>In the new world of semantic markup, 
	<q cite="http://chubkin.com/en/html/overview/index">
	  "separation of content from how it is presented is key to modern web development"
	</q>.
</p>

HTML element reference

Also see the blockquote element for block quoate

Hyperlink

The most significant text-level semantic element is the anchor, a, element that defines a hyperlink. Typically, hyperlinks display a ‘hot spot’ that when clicked, ‘jump to’ a particular address. The required attribute, href specifies the address to ‘jump to’.

here are some examples:

<a href="http://www.mozilla.com/">href defines an external site example</a>
<a href="http://chubkins.com/en/html/overview/index">href defines a particular document in an external site</a>
<a href="about_us.html">href defines a document in the same site</a>
<a href="about_us.html#tel_no">href defines a particular id (tel_no) within a document (about_us.html) in the same site</a>
<a href="#top">href defines a particular id (top) in this document</a>

HTML element reference

The hyperlink relies on the address specified by the href attribute.
  1. In the first examples, the href specifies a url to another site.
  2. The second examples, the href specifies a particular document on another site.
  3. The third example, the href specifies a document on the same site; note it is a relative address, in other words, the about_us document path is relative to the current document.
  4. The fourth example is similar to example three with the href specifying a particular element as well as an id attribute within the document (this is the # character); it assumes the id has been previously defined by something like <p id="tel_no">. The # character value mathes the id value
  5. The fifth examples, the href specifies a particular id within the same document, it assumes the id has been previously defined by something like <section id="top">.

The humble a element, badly named, is behind most clicks you make on the web and structures the web into a collection or related documents.

Span

The span element was introduced in html4 as a general container for grouping elements for styling purposes. It is an inline equivalent of the div element and is typically wrapped inside a block element such as a paragraph. It is often used with a class attribute.

<p>The following is <span class="highlight">wrapped in a span element</span> for special styling.</p>

HTML element reference

html5 introduces more semantic text level elements, code, strong, em and abbr and they should be used in preference to the more generic span.

This concludes our brief tour of the most commonly used elements. We have left the remainning sections for further tutorials. Time for a little self test in the following exercise

XHTML5 exercise ‐ Common elements

The aim is to create a valid XHTML5 document.

Task 1 – Common elements

Leave the presentation (spacing, font, position, colour, etc.) to the broswer default styling; we shall return to it in later tutorials.

  1. Create a file named, common_elements.html and copy and paste the html code from the structure tutorial into it.
  2. Insert an example for each of the elements discussed in this tutorial into the common_elements.html.
  3. Validate the common_elements.html file for HTML5 and XHTML conformance.

Task 2 – CV

Leave the presentation (spacing, font, position, colour, etc.) to the broswer default styling; we shall return to it in later tutorials.

  1. Create a detailed CV that includes personal information, education, work experiance and hobbies and interest sections. Be imaginitive, make your CV comprehensive enough to allow you to use as many of the elements as possible from the tutorials so far. This should include but not be limited to, elements:
    html, head, title, meta, link, body, article, section, header, p, a, ul, li, h1 to h6, strong, em, address, img, div and span
  2. Save the file as cv.html, we shall use this file in later exercises.
  3. Validate the cv.html file for HTML5 and XHTML conformance.