Part 3.2Complex 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:

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.

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:

<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:

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

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.

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:

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:

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

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.

<ol>
	<li>First item in the list</li>
	<li>Second item in the list</li>
</ol>
						

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.

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

<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>
						

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>
	<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>
						

Notice that divisions have a space between them by default.

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.

<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.

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>
	<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>
	<head>
		<title>Inline frame sample</title>
	</head>
	<body>
		<iframe src="sample.html" seamless></iframe>
	</body>
</html>
						

<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.

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

<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:

The following sample demonstrates how to use this:

<html>
	<head>
		<title>Inline frame sample sandboxed</title>
	</head>
	<body>
		<iframe sandbox="allow-same-origin"></iframe>
	</body>
</html>