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:
<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:
<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.
<ol> <li>First item in the list</li> <li>Second item in the list</li> </ol>
- First item in the list
- 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.
<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> <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.
<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> <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.
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> <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> <head> <title>Inline frame sample sandboxed</title> </head> <body> <iframe sandbox="allow-same-origin"></iframe> </body> </html>