Front-end programming

HTML

Hypertext Markup Language

HTML is a markup language that defines the structure of the content on a web page.

HTML consists of a series of elements, which you use to wrap different parts of the content to make it appear or act a certain way.

The importance of structure

Users tend to scan quickly to find relevant content, often just reading the headings. If they don't exist, they'll just give up.

An unstructured web page.

The importance of structure

Search engines indexing our web page consider the contents of headings as important keywords for influencing the page's search rankings.

The importance of structure

Visually impaired people often use programs called screen readers to check the contents of a page.

Among the various techniques used, these programs provide an outline of the document by reading out the headings, allowing their users to find the information they need quickly.

Anatomy of an html element

Opening tag - The name of the element wrapped in opening and closing angle brackets. It states where the element begins.
Closing tag - States where the element ends.
Content - The content of the element. In this case it would be just text.

Anatomy of an html element

Attributes - Contain extra information about the element. Here, id is the attribute name and myId is the attribute value.

Anatomy of an html Document

<html></html> — Wraps all the content on the entire page and is sometimes known as the root element.
<head></head> — Contains keywords and the page description that we want to appear in search results, CSS to style our content, character set declarations, and more.
<body></body> — Contains all the content that we want to show to web users when they visit our page.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>A pretty page</title>
    </head>
    <body>
    </body>
</html>

Live Coding

Let's create an HTML page!

Semantic html

A semantic element clearly describes its meaning to both the browser and the developer.

Non-semantic elements like <div> and <span> tell us nothing about their content. In contrast, semantic elements like <nav>, <footer>, and <article> clearly define their content.

Live Coding

Semantic elements

HMTL5 APIs

APIs are a major part of the HTML5 world and there are a number of them to explore, including:

Drag and Drop - An event-based drag-and-drop mechanism.
Web storage - Introduces two related mechanisms, similar to HTTP session cookies, for storing name-value pairs on the client side.
Geolocation - defines a high-level interface to location information associated only with the device hosting the implementation.

To take full advantage of most of these, we need interaction with JavaScript events.