HTML

Introduction

HTML (Hyper Text Markup Language) is the markup language used for the structure and content of a web page. HTML consists of elements which are defined using tags. An example of a basic HTML page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>"Welcome</title>
  </head>
  <body>
    <h1 id = "title" class = "green-text">Welcome to our website</h1>
    <p>This text is <strong>very</strong> important.
    <img src = "images/logo.png" alt = "Our logo"/>
  </body>
</html>

The first line is the doctype declaration. This tells the browser this is a HTML5 document.

The <html> tag surrounds the entire contents of the page.

The <head> section contains metadata about the web page such as the title, character set, author, keywords and links to other files.

The <body> contains all of the visible content on the page.

<h1> is the largest heading tag. There are 6 levels of heading, <h1> to <h6>. It has both an id and class. An id needs to be a unique identifier for this element but a class can be used for multiple elements.

Tags can be nested, like the <strong> tag inside the p. This will make only the word "very" bold.

<img> has just attributes and no content. The alt text is good for accessibility as it provides a description of an image for screen readers.

Relationships

h1 is the child of body and body is the parent of h1. h1, p and img are siblings because they all have the same parent. h1, p, strong and img are descendants of body. html is an ancestor of strong.

Lists

There are two types of list, ordered and unordered. An example of an ordered list:

<ol>
  <li>Grate 50g of cheese</li>
  <li>Add 2 eggs and combine</li>
  <li>Boil a large saucepan of water</li>
</ol>

<li> means list item. Use <ul> instead of <ol> for unordered lists.

Character entities

Character entities can be used for characters like > which would otherwise be mistaken for HTML or for symbols like . For example, > is &gt; and is &copy;.

Tables

Tables are defined using the <table> tag. An example table:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Nationality</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Maria</td>
      <td>44</td>
      <td>Belgian</td>
    </tr>
    <tr>
      <td>Barry</td>
      <td>63</td>
      <td>British</td>
    </tr>
  </tbody>
</table>

The table consists of a head (thead) and body (tbody). Each row is contained within a tr (table row) and each cell is either th (table header) or td (table data).

To make a table cell take up multiple rows/columns, use the rowspan and colspan attributes respectively.

Forms

HTML forms can be used to send data to the server.

<form action="/login" method="POST">
  <label for="usrnm">Username:</label>
  <input type="text" name="username" id="usrnm" required>
  <label for="pswd">Password:</label>
  <input type="password" name="password" id="pswd" required>
  <input type="submit" value="Log in">
</form>

Forms consist of an action, a method and fields. The action tells the browser where to send the form data and the method says how. The method is usually GET or POST. GET sends the data as URL parameters and POST sends the data in the request body. The contents of the form consists of label and input elements. Labels just describe what the input is asking for. The for attribute corresponds to the id attribute of the input. There are many different types of input, the most common being text, email, password and submit. The required attribute tells the browser to make sure that field is filled in before submitting the form.

Semantic HTML and accessibility

HTML is semantic if it gives meaning to it's contents. For example, using tags like <main>, <article>, <aside>, <header> and <footer> is much more descriptive than just using <div>. This improves SEO (search engine optimisation) and makes the site more accessible.

Tables should only be used for data, not layout as otherwise this can cause issues for screen readers. Using labels on forms and alt text for images helps to make sites more accessible.