Introducing HTML

This is an introduction to the basics of HTML

Dr Graeme Stuart

A markup language for hypertext documents

Markup refers to literally making marks on a written manuscript to indicate how it should be treated when printed.

typesetting markup

Markup languages add information about the content.

Example HTML

Note that HTML does not include any information about how to format content. It simply indicates what kind of content the various parts of the document are.
An HTML document is composed of nested HTML elements containing text content. The tags imbue the content with meaning and default formatting in the browser.

1
2
3
4
5
6
<p>
    This content is <em>marked up</em> using <strong>HTML</strong>
    to indicate that the first line is a level 2 heading
    and the rest of the text should be combined into one paragraph. 
    Emphasis has been added to a few of the words.
</p>

This content is marked up using HTML to indicate that the first line is a level 2 heading and the rest of the text should be combined into one paragraph. Emphasis has been added to a few of the words.

Anatomy of an HTML element

HTML elements consist of content between matching pairs of tags.

The anatomy of an HTML element

The opening and closing tags are slightly different

Paragraphs

Paragraphs are essential for structuring text. By default they have a margin top and bottom. This separates them from each other and from other content.

1
2
3
4
5
6
7
8
9
<p>

    Lorem ipsum dolor sit amet.

    Ut, inventore voluptatibus? Molestiae, fugiat!

    Neque illum quas accusantium voluptates.

</p>

Lorem ipsum dolor sit amet. Ut, inventore voluptatibus? Molestiae, fugiat! Neque illum quas accusantium voluptates.

Notice how the text is merged and automatically laid out.

Headings

Headings come in six levels from <h1> to <h6>. Headings provide accessibility landmarks for assistive technologies.

1
2
3
4
5

<h1>Level 1</h1>
<h2>Level 2</h2>
<h3>Level 3</h3>
 

Level 1

Level 2

Level 3

Headings should provide a navigable document structure. For most circumstances, six levels is too much.

Lists

Lists are collections of list items (<li>) which contain the actual content. List items are wrapped in containers that come in two main forms.

Unordered lists (<ul>) generate bullet points and should be used when order doesn’t matter (e.g. ingredient list).

Ordered lists (<ol>) generate numbered lists and should only be used when order matters (e.g recipe steps).

1
2
3
4
5
<ul>
    <li>Unordered one</li>
    <li>Unordered two</li>
    <li>Unordered three</li>
</ul>

1
2
3
4
5
<ol>
    <li>Ordered one</li>
    <li>Ordered two</li>
    <li>Ordered three</li>
</ol>

Unordered one
Unordered two
Unordered three

Ordered one
Ordered two
Ordered three

Using lists provide screen reader users with a much nicer experience. Even if the numbers or bullets are removed with styling.

Elements can have attributes

Elements can have attributes to add information that should not be considered content. Attributes are key/value pairs separated by an equals symbol.

1
<p class="note">My cat is very grumpy.</p>

Attributes are placed inside the opening tag.Attribute values should be contained in “double quotes”. Pay attention to the details.

1
2
3
4
5
6
<p attribute="this-is-wrong"attribute2="this-is-wrong">
    Missing space between attributes
</p>
<p attribute1=value3>
    Missing quotes
</p>

Some common mistakes include missing the space between attributes and missing quotes around attribute values.

Anchors (hyperlinks)

Anchor elements require a hypertext reference (an href attribute) pointing to the link destination as a Uniform Resource Locator (URL). There are three main kinds of link.

linking to another element

1
2
3
<a href="#my-element">
    that element
</a>

linking to another document

1
2
3
<a href="another-page.html">
    that document
</a>

linking to another server

1
2
3
<a href="https://www.dmu.ac.uk">
    that website
</a>

Combinations are common.

1
2
3
<a href="https://www.example.com/some-document#section-1">
    an element in a document on another server
</a>

The content will become a clickable link. Clicking the link with induce the browser to issue an HTTP GET request and render the document provided by the server.

Void elements

Void elements such as <br>, <img> and <input> are not allowed to contain content. These elements do not require closing tags.

1
2
3
4
5
6
7
<br> <!-- line breaks are very simple -->

<!-- images require 'src' and 'alt' attributes -->
<img src="path/to/image" alt="alternative text">

<!-- inputs have many optional attributes to control their operation -->
<input type="text" value="default">

The <input> element has a value attribute rather than content.

1
2
3
4
<head>
    <link rel="stylesheet" href="path/to/styles.css">
    <meta charset="utf-8">
</head>

The <link> and <meta> elements are also void

Images

The void <img> element includes a src attribute specifying the path to the source image file.

1
2
3
<img alt="a red html5 shield" src="images/html.svg">
<img alt="a blue css3 shield" src="images/css.svg">
<img alt="a yellow javascript shield" src="images/missing.svg">

a red html5 shield a blue css3 shield a yellow javascript shield

Images must include an alt (alternative text) attribute to show if the image cannot be loaded/presented. The alt attribute content will be announced by assistive technologies.

Semantic elements

Semantic elements add meaning to your document structure and provide accessibility advantages. Choosing semantic elements in preference to meaningless elements such as <div> and <span> adds meaning.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!-- bad -->

<div id="myheader"></div>
<div id="navigation"></div>
<div id="main-content">
    <div class="section">
        <div class="article">
            <h2>This is some content</h2>
        </div>
    </div>
    <div class="special-section"></div>
</div>
<div id="the-footer"></div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!-- good -->

<header></header>
<nav></nav>
<main>
    <section>
        <article>
            <h2>This is some content</h2>
        </article>
    </section>
    <section class="special"></section>
</main>
<footer></footer>

Semantic documents can be understood more fully by the browser and by other software because the various elements have been given meaning.

Accessibility

Accessible Rich Internet Applications (ARIA) present information to assistive technologies to improve accessibility. Adding a role will convert your element into an ARIA landmark.

1
2
3
4
5
6
7
8
9
<div role="banner">
    <h1>Accessibility</h1>
</div>
<div role="navigation">
    <a href="#link-1">Link 1</a>
    <a href="#link-2">Link 2</a>
    <a href="#link-3">Link 3</a>
</div>
<div role="main"></div>

1
2
3
4
5
6
7
8
9
<header>
    <h1>Accessibility</h1>
</header>
<nav>
    <a href="#link-1">Link 1</a>
    <a href="#link-2">Link 2</a>
    <a href="#link-3">Link 3</a>
</nav>
<main></main>

Adding this extra information can be a pain. Luckily, we don’t need to. We can simply choose appropriate elements to create meaningful, accessible structure in our documents.
Most of the newer, semantic elements include these roles implicitly. This makes your HTML simpler and more accessible. See the Chrome A11y podcast for more on accessibility.

HTML documents

ALL HTML5 documents consist of a <!DOCTYPE html> and an <html> element only. There should be nothing else in the file!

1
2
<!DOCTYPE html>
<html></html>

1
2
3
4
5
<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

The <html> element should contains only a <head> element and a <body> element. Nothing else is allowed as a direct child of the <html> element.

Within the <head> element there should be a <title> element and <meta> element defining the character set. You can also add other information about the document, including linked files and scripts. All the visible content of the page should be inside the <body> element.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>My amazing webpage</title>
    </head>

    <body>
    <!-- your document content goes here -->
    </body>
</html>

HTML validation

Validate your HTML!

Validation errors

online HTML validator

Summary

HTML documents have a <!doctype html> and an <html> element
The <head> element contains information about the document
The <body> element contains visible content
Structure is important, use <header>, <main>, <footer> etc.
Use semantic elements wherever possible
Pay attention to nesting and indentation
You don’t need to learn all the HTML elements
Validate your code regularly.

Now take this into the lab.

Introducing HTML

If you have any questions, now is a good time to ask.

Thanks for listening
Dr Graeme Stuart