SPACEBAR to move forward through slides.
SHIFT & SPACEBAR to move backwards through slides.
LEFT ARROW & RIGHT ARROW to move through sections.
ESC to see overview and ESC again to exit.
F to enter presentation mode and ESC to exit.
In order to do this exercise you will need some sort of HTML text editor.
There are many free HTML text editors available online.
This tutorial takes you through creating an HTML document for an imaginary company called "Bill's Hammers".
Open this HTML file in an editor:
exercises-start/exercise-106-01.html
This file will be completely blank to start with.
View this file in a browser and refresh after you have saved each step to see the document take shape.
Check your work against the finished HTML file:
exercises-finished/exercise-106-01.html
HTML, or Hyper Text Markup Language, is the standard markup language for creating web documents.
HTML uses elements and attributes to describe the structure of web documents and provide meaning to content.
We'll look at elements and attributes in detail as we move through the exercise.
Before displaying HTML documents, browsers need to determine which version of the HTML language the document uses.
This is achieved using a <!doctype> declaration.
The <!doctype> declaration must appear on the first line of code within an HTML document.
In the past, web authors had to write HTML in one of two possible versions of the language - HTML 4.01 or XHTML 1.0.
In both of these cases, there were three variations - strict, transitional and frameset.
As you will see, all of these doctypes were incredibly complicated!
<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"%gt;
<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"%gt;
<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"%gt;
<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"%gt;
<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"%gt;
<!-- XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"%gt;
Today, almost all web authors write in HTML 5.
This newer version of HTML is simpler, more flexible and allows authors to use a range new elements and functions.
To declare that your document is HTML 5, you must use the following declaration:
<!-- HTML 5 -->
<!doctype html>The doctype should appear as the first line in your HTML markup.
Use the HTML5 doctype as it is the simplest and easiest to use.
<!doctype html>
HTML elements are the building blocks of HTML markup. They help us define the content and structure of web documents.
In most cases, HTML elements consist of a start tag (or opening tag) and an end tag (or closing tag).
<p>This is a paragraph element.</p>
There is a wide range of HTML elements that can be used to give content specific meaning - such as headings, paragraphs, lists etc.
These elements should always be written in lower case only.
<!-- Heading levels -->
<h1>Level 1 heading</h1>
<h2>Level 2 heading</h2>
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<h5>Level 5 heading</h5>
<h6>Level 6 heading</h6>
Void elements are different to all other HTML elements as they have no content and no end tag.
<!-- Line break -->
<br>
Using HTML 5, void elements can be written in two different ways - with or without the trailing forward slash.
<!-- Without trailing slashes -->
<br>
<hr>
<img>
<input>
<link>
<meta>
<!-- With trailing slashes -->
<br />
<hr />
<img />
<input />
<link />
<meta />
Even though both of these methods can be used, it is best to choose one method and use it consistently.
The full list of allowed void elements:
<!-- HTML5 void elements - part 1 -->
<area>
<base>
<br>
<col>
<embed>
<hr>
<img>
<input>
<!-- HTML5 void elements - part 2 -->
<link>
<meta>
<param>
<source>
<track>
<wbr>
The <html> element is used to inform the browser that this is an HTML document.
This element wraps around all other elements in the document, excluding the doctype declaration.
<!doctype html>
<html>
</html>
HTML attributes are used to assign additional properties to HTML elements.
<p class="intro">
Some text
</p>
In almost all cases, attributes consist of an attribute name and an attribute value.
<!-- Attribute name -->
<p class="intro">
Some text
</p>
<!-- Attribute value -->
<p class="intro">
Some text
</p>
Attributes must appear in the start tag (or within the tag in the case of void elements)
<!-- Inside the start tag -->
<p class="intro">
Some text
</p>
<!-- Inside void elements -->
<hr class="special">
There can be any number of attributes applied to an HTML element.
<!-- Three attributes in an element -->
<input
id="email"
name="email"
type="text"
>
Attributes must be separated by spaces and can appear in any order.
Attribute values can be placed inside double quotes, single quotes or even no quotes at all.
<!-- Double quotes -->
<p class="intro">
Some text
</p>
<!-- Single quotes -->
<p class='intro'>
Some text
</p>
<!-- No quotes -->
<p class=intro>
Some text
</p>
Some attributes allow multiple values inside the one attribute.
<!-- Two attribute -->
<p class="intro highlight">
Some text
</p>
Attributes with more than one value must be enclosed in single or double quotes. They cannot be left unquoted.
<!-- Double quotes -->
<p class="intro highlight">
Some text
</p>
<!-- Single quotes -->
<p class='intro highlight'>
Some text
</p>
In HTML 5, some attributes, called boolean attributes, do not require a value.
<input type="radio" checked />
<input type="text" disabled />
<input type="email" multiple />
<input type="text" readonly />
<option selected> ... </option>
The presence of a Boolean attribute means the value is true.
The absence of the attribute means the value is false.
The full list of all possible HTML5 boolean attributes:
<!-- HTML5 boolean attributes - part 1 -->
async
autofocus
autoplay
checked
contenteditable
controls
default
defer
disabled
<!-- HTML5 boolean attributes - part 2 -->
formNoValidate
frameborder
hidden
ismap
itemscope
loop
multiple
muted
nomodule
<!-- HTML5 boolean attributes - part 3 -->
novalidate
open
readonly
required
reversed
scoped
selected
typemustmatch
You must always set the default language for your HTML documents in a way that can be 'programmatically determined'.
This is acheived by adding the lang attribute to the <html> element.
Browsers and other applications can use this information to deliver the most appropriate information to users.
<html lang="en">
The <head> element is a container for a range of elements that are not displayed in the browser.
<!doctype html>
<html lang="en">
<head>
</head>
</html>
You may have noticed that the <head> start and closing tags are slightly indented.
Whitespace inside your markup is ignored by browsers - apart from character spaces inside content.
From the browser's perspective, it doesn’t matter how the markup laid out in the HTML document.
The markup could be written in one continuous line:
<!doctype html><html lang="en"><head></head></html>
However, indenting makes it easier to see how the HTML page is structured.
The simplest method is to indent content that is placed inside another element.
<!doctype html>
<html lang="en">
<head>
<title>Bill's Hammers</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>
You should always specify the character encoding used for any HTML document.
Otherwise you risk that characters in your content may be incorrectly interpreted.
Documents should be encoded using a <meta> element with a charset attribute.
<meta charset="utf-8">
The declaration should fit within the first 1024 of the file, so it should be placed directly after the opening <head> tag.
The UTF-8 character encoding is the preferred option and can be written in uppercase or lowercase.
<meta charset="utf-8">
Add the <meta> element directly after the <head> element start tag.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
Add a document title inside the <head> element using the <title> element.
The contents of the <title> element will not be seen on the web page, but will be seen in the browser title strip (or browser tab).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bill's Hammers</title>
</head>
</html>
The <link> element allows you to link to external resources.
The <link> element is most commonly used to link to stylesheets.
These stylesheets contain Cascading Style Sheet rules (or CSS rules).
There are a two attributes you must use when linking to stylesheets.
The rel attribute specifies the relationship between the current document and the linked resource.
In this case, the relationship of the resource is defined as a stylesheet.
The href attribute specifies the location of the linked resource.
Add the <link> element with an href value of "exercise-106-01.css".
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bill's Hammers</title>
<link
rel="stylesheet"
href="exercise-106-01.css">
</head>
</html>
The <body> element contains all the contents of the HTML document, such as headings, links, images etc.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bill's Hammers</title>
<link rel="stylesheet" href="exercise-106-01.css">
</head>
<body>
</body>
</html>
Semantic markup is about using the appropriate HTML elements to convey meaning.
All HTML elements have a specific meaning and purpose. For example:
| Element | Semantic meaning |
|---|---|
<h1> |
Level 1 heading content |
<caption> |
A visible caption or title for a table |
<abbr> |
An abbreviation or acronym of a longer word or phrase |
<blockquote> |
A section that is quoted from another source |
Even the <div> and <span> elements have meaning. Their purpose is to be generic elements.
| Element | Semantic meaning |
|---|---|
<div> |
Generic block-level container to specify a section |
<span> |
Generic inline container |
Designers need to understand the basics of semantic markup, so they can communicate important information correctly to developers.
Designers should specify the following as part of handover:
Developers need to know how to use semantic markup as it vital for:
Semantic markup is especially important for screen readers as many users rely on specific elements in order to navigate around web pages effectively.
HTML has specific grammar and syntax rules defined in various HTML specifications.
All HTML documents are supposed to conform to these rules.
“Validation” is the process of testing an HTML document to see whether it follows these rules.
A document that passes this process without ant validation errors is determined to be “valid”.
HTML documents can be checked online using the W3C Markup Validation service.
Developers should always try to produce valid, well formed markup for the following reasons:
Non-valid markup relies on browsers to auto-correct your markup, and each browser does this differently.
If your code is valid, browsers have to do less processing, therefore the page will render faster.
Google advises that invalid HTML could affect their ability to crawl and index web pages.
While invalid markup does not always break accessibility, there is a chance that it can cause accessibility issues.
Failing to include an alt attribute with <img> elements.
Every <img> element is required to have an alt attribute for devices that cannot access the image.
<!-- Incorrect -->
<img src="example.png">
<!-- Correct -->
<img src="example.png" alt="Symbols">
Using duplicate id values.
The id attribute is a unique identifier. Each id value must be unique within that document.
<!-- Duplicate ID value -->
<div id="value01"></div>
<div id="value01"></div>
Incorrectly nesting elements
HTML elements cannot be incorrectly nested inside other elements.
<!-- Incorrect -->
<ul>
<li>item one
<li>sub-item</li>
</li>
</ul>
<!-- Correct -->
<ul>
<li>item one
<ul>
<li>sub-item</li>
</ul>
</li>
</ul>
Add a <div> inside the <body> element.
This <div> will be used to set the overall width of the layout.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bill's Hammers</title>
<link rel="stylesheet" href="exercise-106-01.css">
</head>
<body>
<div>
</div>
</body>
</html>
Add a class attribute to the element, and give it a value of container.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bill's Hammers</title>
<link rel="stylesheet" href="exercise-106-01.css">
</head>
<body>
<div class="container">
</div>
</body>
</html>
Complex page layouts can be overwhelming for users. They may need to spend a lot of additional effort scanning the page to find the content they need.
Creating clearly defined visual page regions help two different groups of people.
Page regions can help when scanning, searching and prioritising content.
Page regions can assist with overall orientation and navigation.
Including HTML landmarks as part of your markup can be helpful for two different groups of people.
HTML landmarks can be used to identify and navigate between page regions.
HTML landmarks can be used to navigate around pages more efficiently, without the need for extensive tabbing.
There are a range of HTL landmarks that can be used including:
<header><footer><nav><main><aside><section>The HTML5 <header> element represents a group of introductory or navigational aids.
<header>
</header>The <header> element can be used multiple times within a single layout.
It could be a header as the overall site header:
<body>
<header>
</header>
<main>
</main>
<aside>
</aside>
<footer>
</footer>
</body>It could be a header as a header for the <main> content:
<main>
<header>
</header>
</main>Or a header for a <section> of content:
<section>
<header>
</header>
</section>Or even as a header for <aside> content:
<aside>
<header>
</header>
</aside>The HTML5 <footer> element represents a footer for its nearest ancestor.
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
<footer>
</footer>The <footer> element can be used multiple times within a single layout. It is mainly used as the overall site footer:
<body>
<header>
</header>
<main>
</main>
<aside>
</aside>
<footer>
</footer>
</body>Use the <nav> element to identify the navigation landmark, which contain groups of links used for site or page navigation.
<nav>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</nav>The <nav> element can be used multiple times within a single layout.
Use the <main> elements to identify the main landmark, which is the primary content for the page.
<main>
</main>Each page must have only one <main> element.
The <aside> element represents a section of a page that could be considered separate from that content.
<aside>
</aside>The <aside> element should not be contained inside other landmark elements or roles.
Use the <section> element to identify a region landmark. It should only be used if the page region is sufficiently important that users may want to navigate to it.
<section>
</section>Each <section> element should be identified, typically by including a heading that is a direct child element.
<section>
<h3>Section heading</h3>
</section>Place the <header> element inside the <div> element.
<body>
<div class="container">
<header>
</header>
</div>
</body>
HTML defines six levels of headings.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
The <h1> element is the highest or most important level and the <h6> element is the least important.
<h1>Heading level 1</h1>
These different heading levels help to communicate the hierarchy of the content on the page.
For example, headings with an equal or higher rank indicate the start a new section.
<h2>Section 1</h2>
<h2>Section 1</h2>
Headings with a lower rank indicate the start of a new subsection that are part of the higher ranked section.
<h2>Section 1</h2>
<h3>Subsection 1.1</h3>
Skipping over heading levels can be confusing for users and should be avoided where possible.
For example, it is generally not considered a good practice to have an <h4> heading directly after an <h2> element.
<h2>Heading level 2</h2>
...
<h4>Heading level 4</h4>
...
However, it is acceptable to skip heading levels when closing a subsection.
For example, an <h2> element can begin a new section, directly after an <h4> which was the last subsection within the previous section.
<h2>Section 1</h2>
...
<h3>Subsection 1.1</h3>
...
<h4>Sub-subsection 1.1.1</h4>
...
<h2>Section 2</h2>
Use an <h1> element to display the name of the website.
<body>
<div class="container">
<header>
<h1>Bill's Hammers</h1>
</header>
</div>
</body>
The <nav> element is used to define a section of a page which provides navigation links.
Use the <nav> element to contain the site navigation.
<body>
<div class="container">
<header>
<h1>Bill's Hammers</h1>
</header>
<nav>
</nav>
</div>
</body>
The <ul> element is used to mark up an unordered list of items, typically rendered as a bulleted list.
<body>
<div class="container">
<header>
<h1>Bill's Hammers</h1>
</header>
<nav>
<ul>
</ul>
</nav>
</div>
</body>
The <li> element is used to mark up items in a list.
Inside unordered lists, list items are usually displayed using bullet points.
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
There are times when you want to link to a specific web page within your site or another site.
This is when file paths come into play.
File paths can be absolute, which means they point to a full web address or files/folders within this address.
In the following example, the link will point to a file called "help.html" within a domain.
<a href="http://site.com/help.html">Link</a>
File paths can be relative, which means they point to files or folders that are located relative to the current document.
In the following example, the link will point to a fille called "help.html" in one directory above the current directory.
<a href="../help.html">Link</a>
File paths can be relative to the root of the site. They begin with a "/" which indicate that the path starts at the site root.
In the following example, the link will point to a file called "help.html" in the root of the site.
<a href="/help.html">Link</a>
File paths can point to a specific place in a web document, rather than the whole document itself.
These types of links are called "fragment identifiers" as they identify and target fragments of a web document.
The target fragment needs to be identified with an ID value. This can be placed on any relevant element.
<div id="intro">
Some content
</div>
The link then needs to point to this ID value.
This can be achieved using the # symbol followed by the ID value.
<a href="#intro">Link to page fragment</a>
Each of these list items should be links to different pages.
The content inside each list item needs to be wrapped inside an <a> element.
<nav>
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
In order to convert these <a> elements into links, add an href attribute.
The href value in each case should point to a specific file name.
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
The <main> element represents the main content area of the body of a document or application.
This element helps Assistive Technologies identify and navigate through web content.
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
</main>
Add a level 2 heading inside the <main> element.
<main>
<h2>We sell hammers</h2>
</main>
Add a paragraph of text under the the heading:
<main>
<h2>We sell hammers</h2>
<p>We sell hammers in a variety of
shapes, sizes and weights including
the Claw Hammer, Ball Pein Hammer,
Club Hammer and Sledge Hammer.</p>
</main>
The <strong> element represents content that requires importance.
This this cases, it will be used to add importance to the a string of content:
...<strong>a variety of shapes,
sizes and weights</strong>...
The <em> element represents content that requires emphasis.
This this cases, it will be used to emphasise each of the hammer types:
...<em>Claw Hammer</em>, <em>Ball Pein
Hammer</em>, <em>Club Hammer</em> and
<em>Sledge Hammer</em>.
The <img> element is a void element - so it has no closing tag.
<img>
There are two important attributes that must be included with this element.
The first attribute is the src attribute - which tells the browser where to find the image.
<img src="exercise-106-01.jpg">
The file path rules apply for src attribute - just like for the href attribute.
The second attribute is the alt attribute - which provides a text alternative for devices that cannot load the image.
Add an image with an href value of "exercise-106-01.jpg" and an alt value of "Claw hammer".
<p>We sell hammers in...</p>
<img src="exercise-106-01.jpg"
alt="Claw hammer">
Add a level 2 heading after the <img> element.
<img src="exercise-106-01.jpg"
alt="Claw hammer">
<h2>Pricing table</h2>
The HTML <table> allows authors to arrange data into rows and columns of cells.
This is often referred to as “tabular data”.
If the information would make sense laid out in a spreadsheet, it is almost certainly tabular data.
The HTML <table> should not be used to help authors control the layout of web documents.
The <table> element represents the table itself. The element
requires a start and end tag.
<table></table>
The <caption> element provides a caption, or a short description for the table.
The <caption> element must be inserted immediately after the <table> start tag.
<table>
<caption></caption>
</table>
The <thead> element is used to group the header content inside a data table.
The <thead> element must be placed directly after the <table> start tag or after the <caption> element, if present.
The <thead> element must come before any <tbody>, <tfoot> or <tr> elements.
<table>
<caption></caption>
<thead></thead>
</table>
The <tbody> element is used to group the body content inside a data table.
The <tbody> element must have one or more <tr> elements inside.
The <tbody> element must be placed after any <caption>, <thead> or <tfoot> elements.
There can be more than one <tbody> element inside a single table.
<table>
<caption></caption>
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
</table>
The <tr> element represents a table row.
<table>
<tbody>
<tr></tr>
</tbody>
</table>
The <th> element represent a header cell - used to container header information that describes column and row information.
These header cells are also used by assistive devices to describe the contents of the table.
<table>
<thead>
<tr>
<th>
</th>
</tr>
</thead>
</table>
The <td> element represents a table cell - used to contain table data.
<table>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
Add a <table> element
<h2>Pricing table</h2>
<table>
</table>
Add a <thead> element inside the <table> element.
<h2>Pricing table</h2>
<table>
<thead>
</thead>
</table>
Add a <tbody> element after the <thead> element.
<h2>Pricing table</h2>
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
Add some <tr> element inside the <thead> and <tbody> elements.
<h2>Pricing table</h2>
<table>
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
Add two <th> element inside the row within the <thead> element.
<thead>
<tr>
<th>Type</th>
<th>Cost</th>
</tr>
</thead>
Add some <td> elements inside the rows within the <tbody> element.
<tr>
<td>Claw, wooden handle</td>
<td>$24.99</td>
</tr>
<tr>
<td>Claw, glass-fibre handle</td>
<td>$26.99</td>
</tr>
<tr>
<td>Claw, steel handle</td>
<td>$29.99</td>
</tr>
The <aside> element represents a section of content that is tangentially related to the main content.
<main>
...
</main>
<aside></aside>
Add an <h2> element inside the <main> element.
<aside>
<h2>Customer feedback</h2>
</aside>
Add a <blockquote> element after the <h2> element.
<aside>
<h2>Customer feedback</h2>
<blockquote></blockquote>
</aside>
A customer comment can then be added inside.
<aside>
<h2>Customer feedback</h2>
<blockquote>
"Bill's is the best place to
buy hammers ever!"
</blockquote>
</aside>
Add a <footer> element after the <aside> element.
<aside>
...
</aside>
<footer></footer>
Any footer information, such as copyright details, can be added inside.
<footer>
Copyright Bill's Hammers 2018
</footer>
The simple HTML document is now complete. Time to learn more about HTML!