HTML

HTML (HyperText Markup Language) is a standard language used to structure web pages. It
creates the framework for content by using <tags> that tell web browsers how to display
text, images, links, videos and other elements

HTML was created in 1993 (known as HTML 1.0), by Tim Berners-Lee, and has since evolved
to what we know now as HTML5, which was established in 2014.

The first webpage that was created, was just plain text and a couple of hyperlinks that
allowed users to access various documents and resources on the internet and thereafter the
way we share and distribute information changed drastically.

There is a collaborative effort to maintaining HTML standards, by companies such as W3C

(World Wide Web Consortium) and WHATWG (Web Hypertext Application Technology
Working Group)

The reasons for their being efforts to maintain these standards are:
 Universal consistency: To ensure webpages work across various browsers and
devices, this prevents developers from needing to have separate versions of the
same script for each platform.
 Developer reliability: To set clear rules and expectations so that we as developers
know which tags, attributes and behaviours to trust
 Educational structure: Because this is a shared language, there needs to be an
agreed standard across regions

The future of HTML encompasses a variety of improvements and innovations, HTML needs
to advance with technology in order to continue to meet the standards and demands of
modern web development.

There are various approaches to this evolution, such as:

Mobile-first design: this is a web development strategy where you start designing for the
smallest screen size (typically smartphones) and then progressively enhancing the layout for
larger screens (like tablets and desktops).

Responsive web design: this is about making websites look and function optimally across all
devices, ensuring it adjusts itself automatically based on what devise the user is using at the
time.

Virtual Reality Integration: this is the process of blending immersive VR experiences into
existing systems, websites, applications, or environments.

The Internet of Things (IoT): this refers to the network (connection/integration) of physical
objects such as sensors, appliances, wearables and machines that can collect and exchange
data over the internet. When we talk about IoT integration with HTML, we’re describing
how web technologies (like HTML, JavaScript, and APIs) allow users to interact with IoT
devices through web interfaces

Key points:

 HTML is the backbone of almost every website

 Various tags, such as <h1> </h1>, <p> </p> and <img> define various things like
headings, paragraphs and images respectively.
 Some elements don’t contain content between them, and therefore don’t have
closing tags. These are called self-closing tags
 HTML is a markup language, but not a programming language… this means it is used
to structure and display content on web pages rather than perform any logical
operations or computations, like a traditional programming language can do
 HTML has different versions, and the latest version is HTML5
 HTML works with CSS (Cascading StyleSheets) and JavaScript, which add style
(colours, fonts, layouts) and interactivity (forms, animations, dynamic updates)

More on HTML5:

 This is the latest and most advanced version of HTML, it has introduced new features
and made web development more flexible for the developer

 HTML5 introduced new and more efficient elements such as <header>, <nav> and
<footer> to name a few. These all improve readability and help browsers understand
the page structure better than before

 HTML5 has multimedia support – before HMTL5, embedding videos and audio
required third-party plugins, but now it has built-in elements

 HTML5 has improved forms by adding new input types such as email, date, number,
and this form validates user input automatically

 HTML5 allows websites to access your location using a Geolocation API, this
improves location-based services

 It also incorporates better mobile and responsive design

Advantages of HTML5 over older versions of HTML:

 Faster and more efficient than previous versions

 Eliminates the need for third-party plugins, this makes websites more secure
 Improves SEO (Search Engine Optimisation) with semantic elements
 Supports offline apps (via caching)
Your typical HTML Development Environment will typically include the following
components:

1. Text editor (or Code editor): this is the file in which you write your HTML script.
There are various options, with the popular ones being VS Code, Sublime text and
Notepad++
2. Web browser: We use them to test and preview our web pages
3. File structure: this is organising your project files into appropriate folders

Character encoding is a system or method that is used to map/convert characters to

numeric codes that computers can understand, without this system your browser would
not be able to display certain special characters.

The reason character encoding is important is because when a browser loads your HTML
file, it needs to know which encoding system it should use to interpret the characters
correctly. And if the encoding is wrong or missing, you might see weird symbols on your
webpage instead of proper text.

So basically, character encoding serves as a translator, the system assigns numeric values to
each character (letters, symbols or emojis) so that computers can store and transmit them.

Computers don’t understand characters – they process binary (0 and 1). So character
encoding acts as a bridge between human-readable text and binary data… there isn’t just
binary though, there’s also Decimal and Hexadecimal systems.

The binary system – this is a base-2 numeral system that only uses two digits (0 and 1)

The decimal system – this is a base-10 numeral system that uses 10 digits, this is what we
use daily whenever we count (0 - 9)

The hexadecimal system – this is a base-16 numeral system that uses 16 symbols… 0 – 9
are represented as they are, and 10 – 15 are represented by A – F (0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
A, B, C, D, E, F)

The common character encodings standards are ASCII, ISO-8859-1, UTF-16 and UTF-8. UTF-8
is the modern standard and is what we will be using throughout this module

UTF-8 (Unicode Transformation Format - 8 bit) is a character encoding system that lets your
webpage display virtually any character from any language — letters, numbers, symbols,
emojis — correctly and consistently. It’s the most widely used character encoding system on
the web today because it supports virtually every Latin alphabet, script, special character,
symbol and emoji [the Latin alphabet is the most widely used writing system in the world
(nearly 70% of the world’s population rely on it for written communication) and this includes
languages such as English, Spanish, French, Portuguese, German etc]

Syntax is a set of rules, guidelines and convention that tells us how to write code correctly
in a programming language, just like grammar in English. If you don’t follow the correct
syntax (way of writing the code), the computer won’t understand your instructions and your
code will throw an error

The particular syntax we will be focusing on are Tags, Elements, Comments, Attributes and
Values

Basic HTML page structure and associated Tags/Elements:

<!DOCTYPE html>: This tag declares the document type as HMTL5.

 This is not an HTML tag but rather a declaration that tells the browser which version
of HTML to expect.
 It specifically signals that the document follows HTML5 standards.
 It is important because it ensures the browser renders the web pages in these
HTML5 standards

<html>: This is the root element of an HTML page, meaning all other elements exist within
it
 Without it, browsers would not know where the document starts or how to process
its content.
 Web browsers rely on the <html> tag to understand that they are dealing with an
HTML document and not just plain text.
 This element defines the structure of an HTML document.

<head>: This element contains the webpage’s metadata

 Metadata is information about the webpage that isn’t directly visible on the page
but helps the browsers and search engines understand how to process and display it
 Metadata provides descriptive information about a webpage, including how the
page should appear in search engines, how different devices should display it, what
styles, scrips and external resources it depends on.
 There are certain elements (metadata) that cannot go anywhere besides the <head>
because they affect how the page is interpreted before any visible content is
rendered

- <title>: This element defines the webpage’s title, which shows in the
browser’s tab and search engine results
- <meta>: These specify extra information
- <link>: This element connects external resources (used to import CSS
stylesheets, add icons etc)

 <head> is important because everything inside this element prepares the webpage
before anything is even displayed. The metadata ensures the page is properly
styled, search engine-friendly, optimized for different devices and is connected to
essential/relevant script and external resources
<body>: This element defines the main content area of an HTML document
 everything that’s visible to users in the browser window is defined within this
element
 It is located after the <head> section and contains all the elements that make up the
web page’s content: text, images, videos, links, tables, forms, and more
 It acts as the container for all visible elements on the page.

Tags are the markers that wrap around content to give it structure
 Tags are enclosed in angle brackets <>
 Most tags come in pairs: opening tags <> and closing tags </>

Self-closing tags are HTML elements that don’t require separate opening and closing tags
because they don’t necessarily contain any content between them. They are reserved and
used for elements that serve only one purpose e.g. inserting an image.

Semantic elements are tags that describe their meaning in a human-readable way (they say
exactly what they are) e.g. <header>, <section>, <footer>, <time> etc… using semantic
elements helps you with accessibility (anyone reading your script knows what to expect),
SEO (search engines understand your content better) and you have clean code that’s easy to
read and maintain.

We also have Non-Semantic/Generic tags such as <div>, <span> etc, which are also very
much still useful, the only difference is that they don’t explicitly describe what they do

Elements are the complete structure, which includes the opening tag, the content and the
closing tag

e.g. <h1> This is my Heading </h1>

<h1> : opening tag
</h1> : closing tag
This is my Heading : content

Altogether, these form the element

There are two main types of elements in HTML5: Block-level and Inline elements

Block-level elements are elements that take up the full width of their container and always
start on a new line.

Inline elements are elements that only take up the space their content needs to, they don’t
necessarily start on a new line and can contain other Inline elements

Comments are a way to add notes or insights about your code in the HTML document
without it being visible on the webpage (to the user) or affecting it in any way. You can also
use comments to temporarily disable code so you can work on it at a later stage
Attributes and values

Attributes are extra pieces of information added to HTML elements that help define or
modify their behaviour, you place them inside the opening tag, and they always come as a
name = “value” pair.

Global attributes can be used on any HTML element, they control behaviour and/or styling
that applies across various tags

e.g. id – gives an element a unique identifier, class – applies styles and grouping from a CSS
class, title - adds a tooltip that appears when you hover over an element

Element-specific attributes only apply to certain HTML elements because they define
behaviour unique to that tag

e.g. href – used with <a> and defines the link’s destination, [src, alt and width] are specific
to the <img> tag and define the source path, alternative text and dimensions of the image
respectively

The relationship between HTML, CSS and JavaScript

HTML – the structure

HTML is the skeleton of the webpage. It tells the browser what is on the page – like the title,
headings, paragraphs, images, links, tables and forms.. it’s the blueprint

CSS – the style

CSS makes it all look good. It controls the colours, spacing, fonts and layout. You use it to
make the design match the structure… it’s the styling team

JavaScript – the brain

JS makes the page interactive and “smart”. It reacts to user actions like clicks, form
submissions and scrolls… it handles logic and behaviour

The DOM

The Document Object Model (DOM) is a conceptual map the browser creates of your
webpage, turning the HTML Into a structure that JavaScript can interact with

It helps to visualise your HTML as a tree:

 The webpage itself is the root

 Each tag (<html>, <body>, <h1>, <p> etc) is a branch or leaf
The DOM represents that tree structure and it allows JavaScript to “climb it”, pick data and
change leaves (or grow new ones)

With JavaScript, the DOM is powerful because it gives you various functions such as:
 Changing content dynamically
 Responding to user actions (clicks, inputs, scrolls)
 Adding or removing HTML elements
 Animating parts of the page
 Validating forms