To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

Complex HTML elements

The previous article describes the simple elements of HTML. This article describes the more 'complex' structures of HTML, particularly those that involve nesting such as tables and lists. To start with, let's look at tables.

Tables

Tables are a crucial part of HTML. Not only are tables a way of representing data, back in the day, websites were formed using tables. The design of my site where the page is in the middle could be made with tables (when I was naive as a web developer, back in 2012, I was accustomed to the use of table designed websites as I had not touched HTML since about 2004 properly).

Table designs can look something like this below:

     
  This is where the main content will go.  
     

With the advent of CSS, this is no longer the case and tables have become a tool simply for tabular data.

Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!

Back in the early 21st century all websites were designed this way. But with CSS getting more and more advanced year after year, it is now possibly to build better layouts without needing tables.

Table layouts are not useless. In some cases where CSS is not permitted, for instance in some software programs HTML is used for the help files, and the browser built-in is highly limited (as some environments provide limited browsers) and so CSS may be very limited. In such a case, table layouts can be useful.

Tables are one of the more complex elements to construct parts of HTML. A table consists of a table, row and a column, ordered as that. A table can be constructed as with the following sample:

HTML
<table>
	<tr>
		<td>
			First column, first row
		</td>
		<td>
			Second column, first row
		</td>
	</tr>
	<tr>
		<td>
			First column, second row
		</td>
		<td>
			Second column, second row
		</td>
	</tr>
</table>
						

The result is displayed below:

First column, first row Second column, first row
First column, second row Second column, second row

Tables need not follow a table structure where the number of columns per row is the same for each row. They can be displayed without this.

The following table shows how to construct a table in summary:

HTML tags Name and definition
<table></table> Table. Constructs a new table.
<tr></tr> Table row. This represents a new table row containing columns.
<td></td> Table data. This represents a table column.
<th></th> Table heading. This is a column of significance.

Tables can also contain divisions to represent the body and head of the table and some JQuery table sorting algorithms require this, although these have since been deprecated as of HTML5. These were accomplished using <thead> and <tbody>.

Lists

In general, a list is a very structured way of displaying information. In HTML, it is also considered the same. So much so that the HTML specification deprecated the <menu> element in favour of the list element for creating menus. Most of today's menus are formed using the list pattern, implementing an unordered list.

Whilst the <menu> tag has disappeared from the HTML specification, it has been replaced by the <nav> and <ul> tags as a combination. A <ul> should be encapsulated in the <nav> element to inform search engines and the like that it is indeed reading a menu. This allows the search engine to crawl pages using the navigation of the site.

There are three types of list; unordered lists, ordered lists and description lists. All of these lists are fully customisable to the degree that bulleting etc can be defined. This is done with CSS and will be covered in the later part of this tutorial.

Lists themselves are defined as a list of elements. Each element is a leaf (that is the last element of the document tree) or another list. This means that lists can have lists nested within them, thus creating a structure tree of lists.

The three types of lists can be represented using the following tags:

HTML tags Name and definition
<ul></ul> Unordered list. As the name suggests, a list intended for elements where order or count is not important
<ol></ol> Ordered list. A list where ordering or count is important.
<dl></dl> Description list. Also known as a definition list because it defines information about an item.

Unordered lists

Both of these lists follow exactly the same structure. These lists contain a sub item called a list item, represented by <li>. Below is an example of each in action:

HTML
<ul>
	<li>First item in the list</li>
	<li>Second item in the list</li>
</ul>
						
  • First item in the list
  • Second item in the list

The bullets can be customised for an unordered list so that Roman Numerals can be used for instance. This is covered in the CSS tutorial.

Ordered list

An ordered list differs from the unordered list because of it's structure. The code is identical for both, but the purpose of an ordered list is to show a list with numbers.

It is important to note that an ordered list does not represent one where the elements are ordered automatically, it is simply a list with numbers instead of bullets.

HTML
<ol>
	<li>First item in the list</li>
	<li>Second item in the list</li>
</ol>
						
  1. First item in the list
  2. Second item in the list

The formatting of the numbers can be changed for an ordered list.

Description lists

A description or definition list defines an item and information about the item that is specified. It works much like a dictionary or a hash dictionary.

As such, it is started with the <dl> tag and terminated with the </dl> tag. It is different to the other two lists because it defines information about the item as another element.

HTML tags Name and definition
<dl></dl> Description list. Starts a new description list.
<dt></dt> Description term. Contains the term.
<dd></dd> Description definition. Defines the term before.

The coupling of both the <dt> and <dd> elements permits them to display as a relation.

HTML
<dl>
	<dt>USB 1.1</dt>
	<dd>12Mbps</dd>

	<dt>USB 2.0</dt>
	<dd>480Mbps</dd>

	<dt>USB 3.0</dt>
	<dd>5Gbps</dd>

	<dt>FireWire 400</dt>
	<dd>400Mbps</dd>

  <dt>Thunderbolt</dt>
  <dd>10Gbps</dd>

  <dt>Thunderbolt 2</dt>
  <dd>20Gbps</dd>

  <dt>Thunderbolt 3</dt>
  <dd>40Gbps</dd>
</dl>
						
USB 1.1
12Mbps
USB 2.0
480Mbps
USB 3.0
5Gbps
FireWire 400
400Mbps
Thunderbolt
10Gbps
Thunderbolt 2
20Gbps
Thunderbolt 3
40Gbps

It might be a good idea to split each term and definition combination with a space preceding or succeeding it, this way terms will not get as confusing when reading back the HTML or when adding more terms.

Divisions

Divisions or dividers are used to show seperate sections of HTML. They contain further HTML as a group of HTML elements. Divisions can be used to represent different things, for instance, this website has one central division called #container that contains the content of the website, on the desktop this looks like a central page, on tablet and smartphone it is 100% of the screen and print it is also 100% of the page width.

Divisions can be styled in so many ways that it is one of the most useful elements available.

The division element is the opposite of the span element in that a division displays as a block whereas span is an inline element.

Divisions are represented by the <div> element in HTML.

HTML
<html>
	<head>
		<title>Website</title>
	</head>
	<body>
		<div id="maincontent">
			<p>This is a piece of text inside the
							maincontent div.</p>
		</div>
		<div id="secondcontent">
			<p>This is a piece of text inside the
							secondcontent div.</p>
		</div>
	</body>
</html>
						

This is a piece of text inside the maincontent div.

This is a piece of text inside the secondcontent div.

Notice that divisions have a space between them by default.

Divisions have no borders or appearance until styled. CSS is used to do this. This tutorial will cover styling elements to make divisions look more attractive.

Spans

As mentioned, a span is the opposite of a division in that it is displayed inline rather than as a block. Spans can be used inside paragraphs for this reason such that they can style text.

As mentioned in this tutorial a few sections back, HTML font faces were covered so that bold and italic can be applied to text. The span element can do the same. If we define a span element that makes text green when it is applied to the text.

The span element is represented in HTML as <span>.

For the following sample, assume we have defined a class of span called 'ourSpan'. This class defines that the contents will go blue and italic.

HTML
<p>This is the text <span class="ourSpan">here</span>is blue and italic.</p>
						

This will place the word here under the effect of our span. Notice that it has been inlined, meaning it follows the natural structure of the paragraph element. Below is a preview of this.

This is the text here is blue and italic.

Inline frames

Sometimes parts of websites can be presented other web pages contained within them, for instance, dynamic parts of a website. As such, the HTML specification defines inline frames for this purpose. Inline frames can be made to look a part of the page so that they look like they are just divisions on the page. For this HTML provides a reasonably powerful set of attributes for the inline frame.

Inline frames are particularly useful in certain areas of the web where requesting data from a website cannot be hotlinked, such as a YouTube video or a Facebook Like Button.

In HTML, an inline frame is represented using the iframe tag. Just like an image, an inline frame has a src attribute. Below is a sample inline frame.

HTML
<html>
	<head>
		<title>Inline frame sample</title>
	</head>
	<body>
		<iframe src="sample.html"></iframe>

	</body>
</html>
						

Inline frames can also be given other attributes as specified by the W3. Such attributes include the seamless, srcdoc and sandbox attributes.

Firstly, the seamless attribute specifies how the inline frame integrates into the page. If the seamless attribute is applied to the inline frame, it appears to be part of the page. Both the HTML and XHTML syntaxes are shown below:

HTML
<html>
	<head>
		<title>Inline frame sample</title>
	</head>
	<body>
		<iframe src="sample.html" seamless></iframe>
	</body>
</html>
						
XHTML
<html>
	<head>
		<title>Inline frame sample</title>
	</head>
	<body>
		<iframe src="sample.html" seamless="true"/>
	</body>
</html>
						

Notice that in XHTML the attributes need a value. This was mentioned in the earlier part of this tutorial.

The srcdoc attribute specifies the HTML of the inline frame. This gives a lot of flexibility from a JavaScript point of view for instance for creating a page that is generated from HTML in JavaScript. It is also a very powerful way of manipulating web pages in a sandboxed manner such that the page cannot interfere with the main page.

srcdoc is not supported in any version of Internet Explorer up to version 11.

The following sample shows how this achieved and a preview of it in action.

HTML
<html>
	<head>
		<title>Inline frame sample</title>
	</head>
	<body>
		<iframe srcdoc="<html><head><title>Sample page</title></head><body><p>This is a <code>srcdoc</code> page</p></body></html>"></iframe>
	</body>
</html>
						

The final attribute mentioned in this article is that of sandbox. The sandbox attribute on the inline frame element allows sandboxing to be applied.

Sandboxing is a concept where something runs in a basic shell - giving it limited access to parts of a system. JavaScript applets would run in sandboxing mode thus preventing access to core features and potentially endangering the system. Sandboxing inline frames prevents access to the hosting page if required.

Inline frames apply this using the sandbox attribute with a value from the table below:

Value Description
"" Applies all restrictions
allow-same-origin Allows the iframe content to be treated as being from the same origin as the containing document
allow-top-navigation Allows the iframe content to navigate (load) content from the containing document
allow-forms Allows form submission
allow-scripts Allows script execution

The following sample demonstrates how to use this:

HTML
<html>
	<head>
		<title>Inline frame sample sandboxed</title>
	</head>
	<body>
		<iframe sandbox="allow-same-origin"></iframe>
	</body>
</html>
						
Provide feedback on this page
Comments are sent via email to me.