CTEC2712 Web application development

Reviewing HTML

HTML deals with the content of a web page.

Contents

  1. HTML documents
  2. Anatomy of an HTML element
  3. Elements can have attributes
  4. Void elements
  5. Semantic elements
  6. Accessibility
  7. Anchors (hyperlinks)
  8. Hypermedia controls
  9. Form data

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>

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.

1
2
3
4
5

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

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

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

2

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.

3

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

4

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.

5

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
10
11
12
13
14

<div role="banner">
    <h1>Accessibility</h1>
    <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>
<div role="main">
    Main content
</div>
<div role="contentinfo">
    Footer content
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<header>
    <h1>Accessibility</h1>
    <nav>
        <a href="#link-1">Link 1</a>
        <a href="#link-2">Link 2</a>
        <a href="#link-3">Link 3</a>
    </nav>
</header>
<main>
    Main content
</main>
<footer>
    Footer content
</footer>

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.

6

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.

7

Hypermedia controls

In a normal scenario, we load a page using a GET request, e.g. with a hyperlink.

1

<a href="#">link</a>

It is also possible to load a page by submitting a form. Forms issue GET requests by default, but can have their method attribute set to POST.

1
2
3

<form method="POST">
    <button>submit</button>
</form>

Anchors and forms are examples of hypermedia controls.

8

Form data

Submitting forms passes data to the server only for elements with a name attribute.

1
2
3
4
5
6

<form>
    <label for="nope">Not included</label>
    <input id="nope" value="data ignored">
    <label for="yep">Included!</label>
    <input id="yep" name="key" value="data submitted">
</form>

GET requests will include data as search parameters within the URL and are useful for adding detail to a request, e.g. filtering or sorting results.

POST requests include data in the request body and (when served over HTTPS) can be used for sensitive data.

The web application server needs to understand what is being requested by interpreting the URL the method and the data.

9

Reviewing HTML

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

Thanks for listening