HTML
(Unit 2)
Ogwal-Awio Kenneth
akogwal@[Link]
2025
Unit learning outcomes
• By the end of this unit, students should be able to:
Explain HTML as programming language
Describe the timeline of HTML
Explain the use of text editors
Explain the features of HTML tags
Explain the types of HTML tags
Explain the concept of nested elements
HTML Basics - Ogwal-Awio K, 2025 22
What is HTML?
• HTML is a computer programming language for creating Web pages.
In full, HTML stands for Hyper Text Markup Language
• HTML sourcecode is written using command elements called tags
HTML tags tell the browser how to display the content
They achieve this by labelling sections of content, such as
"heading", "paragraph", "table", and so on
• Invented at CERN (European Organization for Nuclear Research) in
Geneva by Tim Berners Lee in 1990 – 1991.
HTML Basics - Ogwal-Awio K, 2025 33
Prerequisites for HTML programming
• Two things are needed: a web browser and a text editor.
A web browser – an application software used to test whether the
web page is running as programmed.
o Examples include Google Chrome, Mozilla Firefox, Safari,
Microsoft Edge, etc.
A text editor – a software environment which allows a website developer
to type tags and content which form web pages.
oExamples include Notepad, TextEdit, Notepad++, Gedit, Brackets,
TextMate, Visual Studio Code, Sublime Text, [Link], etc.
Notepad comes preinstalled with Windows OS, and TextEdit with Mac OS.
HTML Basics to
Introduction - Ogwal-Awio K, 2025K.
CSS - Ogwal-Awio 4
12
Key features of HTML tags
• Each tag is surrounded by angle brackets
• Tags are composed of clear text
• Tags are case insensitive
• It ignores white space
• It is platform independent
• Each tag can be nested inside other tags
HTML Basics - Ogwal-Awio K, 2025 13
HTML Tags…
• An HTML doc./webpage begins with <HTML> and ends with </HTML>
The invisible components of the HTML document (to the user) is placed
between <HEAD> and </HEAD> tags.
The visible components is placed between <BODY> and </BODY>.
• HTML tags mostly come in pairs
The first tag is called the start tag, and the second tag called the end tag
The end tag is written like the start tag, but with a forward slash
inserted before the tag name.
The document type declaration (DTD), <!DOCTYPE html>, that is
placed before the opening HTML tag ensures web pages are parsed
the same way by differentHTML
web browsers.
Basics - Ogwal-Awio K, 2025 14
HTML Head vs Body Sections
• The HTML <HEAD> element is a container for HTML metadata – title,
link, styles, scripting, meta, etc.
HTML metadata is data about the HTML document.
oIn the context of websites, meta data refers to data that is primarily
used by search engines
HTML metadata is not displayed.
• The <BODY> element consist all the content that the user will view on
the web browser.
HTML Basics - Ogwal-Awio K, 2025 15
The <TITLE> Tag
• The <TITLE> tag is used to define the title of a website.
The title content text is displayed in the web browser’s title bar.
• The title of a web page also helps determine its ranking by certain
search engines
The title text for a webpage should be chosen carefully, contextually.
The title will also appear on Favorites lists, History lists, and Bookmark
lists to identify your page
HTML Basics - Ogwal-Awio K, 2025 8
Structure of a Web Page
• All Web pages share a common <HTML>
structure <HEAD>
<TITLE> Example </TITLE>
• All Web pages should contain a </HEAD>
pair of <HTML>, <HEAD>, <BODY>
<TITLE>, and <BODY> tags This is where you would include the text and
images on your Web page.
</BODY>
</HTML>
HTML Basics - Ogwal-Awio K, 2025 9
Types of tags
1. Closed ended tags – are tags that require closing tags.
Also called container tags
<name> stuff </name>
2. Open tags – are tags which do not require a closing tag.
<name>
3. Comments – are texts that describe the action to be taken by a tag
or snippet, and which not parsed by the computer.
< ! - - comment text -- >
HTML Basics - Ogwal-Awio K, 2025 18
Closed ended tags – HTML Paragraphs
• HTML paragraphs are defined with the <P>tag:
Example
<P>
This is a paragraph.
</P>
<P>This is another paragraph.</P>
Although the end ended tags are formally optional, many browsers will
mess up the formatting of the table if you omit the end tags.
HTML Basics - Ogwal-Awio K, 2025 20
Open tags – HTML Horizontal Rule <HR>
• The <BR> enforces display of subsequent text on a new line.
• The <HR> tag is an empty element that defines a thematic break in an
HTML page, and is displayed as a horizontal rule.
It is used to separate content in an HTML page.
HTML Basics - Ogwal-Awio K, 2025 21
HTML Headings
• HTML headings are defined with the <H1> to <H6> tags.
<H1> defines the most important heading.
<H6> defines the least important heading
Search engines use these headings to index the structure and content
of web pages.
• Examples:
<H1>Lira University</H1>
<H2>Faculty of Computing and Information Sciences</H2>
<H3>P.O Box 1035, Lira - Uganda</H3>
• Headings are automatically spaced from the body text.
HTML Basics - Ogwal-Awio K, 2025 30
HTML Headings…
• Headings render text as a heading, and size of that heading depends
on the level of heading selected.
<H1>Heading 1 level text</H1>
<H2>Heading 2 level text</H2>
<H3>Heading 3 level text</H3>
<H4>Heading 4 level text</H4>
<H5>Heading 5 level text</H5>
<H6>Heading 6 level text</H6>
HTML Basics - Ogwal-Awio K, 2025 31
Example:
Type the following source code into NotePad text editor:
HTML tags vs HTML elements
• An HTML tag is just opening or the closing command entity.
Tags are used to mark up the start and end of an HTML element
For example: <P> and </P> are each a tag
• An HTML element encompasses opening tag, closing tag, and content.
For example: <P>This is the content</P> – this complete thing is called an
HTML element
HTML Basics - Ogwal-Awio K, 2025 24
Empty HTML tags
• HTML elements with no content are called empty
elements.
Usually closed ended tags.
• Example:
<BR>
<HR>
• Empty elements can be “closed”, e.g. <BR />.
However, from HTML5 empty HTML elements may not be
closed.
HTML Basics - Ogwal-Awio K, 2025 25
Nested HTML Elements
• Nested HTML elements refer to HTML tags that contain other HTML
tags.
• Examples:
Inside the <HTML> tags are the <BODY> tags.
Inside the <BODY> tags there are other tags: <TABLE>, <H1>, <P>, etc.
Inside <P> tags is the <BR> tag
Etc.
HTML Basics - Ogwal-Awio K, 2025 23
HTML Special Characters
• The escape character entity is used so that special characters can
be displayed.
For example, to display < and >, the escape symbol(&) is
required so that the browser doesn't misinterpret the code.
• Displaying a special character includes an ampersand(&), the
entity name, and a semicolon(;).
HTML
HTMLAttributes
Basics - Ogwal-Awio
- Ogwal-Awio
K,Kenneth
2025 33
HTML Special Characters…
• Copyright (©) • Greater than (>)
o© o>
• Quotation • Less than (<)
mark (“) o<
o"
• Space
o
• Ampersand (&)
o&
HTML
HTMLAttributes
Basics - Ogwal-Awio
- Ogwal-Awio
K,Kenneth
2025 34
HTML Accent Marks
• Accent marks in HTML also use the escape symbol.
• Like the special characters accent marks start off with an ampersand
& and then is followed by a letter.
If the letter is uppercase then the symbol is going to be uppercase, and
If the symbol is lowercase then the symbol is going to be lowercase.
HTML
HTMLAttributes
Basics - Ogwal-Awio
- Ogwal-Awio
K,Kenneth
2025 35
HTML Accent Marks
mbol HTML Code Symbol HTML Code Symbol HTML Code Symbol HTML Code
à à á á â â ã ã
ä ä å å ç ç è è
é é ê ê ë ë ì ì
í í î î ï ï ñ ñ
ò ò ó ó ô ô õ õ
ö ö ø ø ù ù ú ú
û û ü ü
HTML
HTMLAttributes
Basics - Ogwal-Awio
- Ogwal-Awio
K,Kenneth
2025 36
HTML timeline
Version Year
HTML (i.e. Original HTML) 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
HTML Basics - Ogwal-Awio K, 2025 11
24
HTML timeline…
• HTML 1.0 – the original HTML version
Structuring elements – adding structure to the content on web pages. E.g
headings, lists, paragraphs, and images.
Simplicity – it didn’t have styling options or the ability to control how content
would display in a web browser. E.g. lacked support for tables.
Limited font support – minimal scope for changing the text style or size.
• HTML 2.0 – released in 1995
Standardization of HTML – establishment of common rules and regulations
for web browsers to follow.
Forms – allowing users to input data on web pages. Initially only text boxes
and buttons.
Tables – the <table> tag for creating tabular data on web pages, contributing
to better organization of data.
HTML Basics - Ogwal-Awio K, 2025 11
25
HTML timeline…
• HTML3.2 – developed in 1997.
Upgraded Form Elements – better ways to create interactive forms on
websites.
CSS Support – this helped developers improve the look of web pages by
styling and customizing HTML elements.
Enhanced Image Features – better control over image size, alignment, and
text descriptions.
Extended Character Set – expanded the available characters for web pages.
E.g. special symbols and international characters for a more diverse
presentation of the content.
HTML Basics - Ogwal-Awio K, 2025 11
26
HTML timeline…
• HTML 4.01 – released in 1999
CSS Linking – CSS files linked and included in each HTML page using the <link> tag.
More new tags – this enhanced the presentability of the content. E.g. “<fieldset>”,
“<header>”, “<footer>”, and “<legend>”.
Table Enhancement - made tables more powerful by making it easier to create
more complicated and interesting tables. Introduced attributes such as ‘colspan’
and ‘rowspan’ to make cells in a table span across multiple columns or rows.
• XHTML 1.0 - released in 2000
stands for Extensible HyperText Markup Language 1.0.
Strict Standards and Compatibility – a stricter version with more stringent rules
for elements, attributes, and syntax. A common standard was created for web
pages. This reduced the scope for incompatibility between browsers.
Compatibility with XML – offered compatibility with XML tools.
HTML Basics - Ogwal-Awio K, 2025 11
27
HTML timeline…
• HTML5 – initial public draft actually released in 2008 by WHATWG, but it
officially became a W3C recommendation on October 28, 2014.
Key new features and tags added include:
o New Form Elements, such as <input type=”email”> and <input
type=”password”>.
o Audio Tag, <audio> tag, which allows to embed audio content directly into
web pages.
o Semantic Tags – also known as structural tags, provide organization and
structure to HTML pages as well as enhance the accessibility and search
engine optimization of the webpage. Semantic tags introduced include
<figcaption>, <header>, <footer>, etc.
o Section Tag <section> defines a distinct section within an HTML page. This
helps in organizing and delineating content, thereby providing logical divisions
within the webpage.
HTML Basics - Ogwal-Awio K, 2025 11
28
HTML v5 new tags
• The <FOOTER> tag is one of the new tags in HTML v5
The tag defines the footer of a document or a section.
• Others include:
• AUDIO • EMAIL • SECTION
• VIDEO • FIGCAPTION • TIME
• ARTICLE • FIGURE • CANVAS
• ASIDE • KEYGEN • MAIN
• AUTOFOCUS • MARK • ARTICLE
• CANVAS • METER • ETC.
• DETAILS • NAV
• DATALIST • PROGRESS
HTML Basics - Ogwal-Awio K, 2025 29
Something to keep you busy
• Read about:
1. HTML validator
2. The <BLOCKQUOTE> tag – used to describe long
HTML Basics - Ogwal-Awio K, 2025 38
30
Individual Coursework 1
Write a webpage that displays your Curriculum Vitae.
Deadline:
Submit your work to akogwal@[Link] latest at 2359 hours on Sunday 2nd
March 2025.
HTML Basics - Ogwal-Awio K, 2025 31
Thank You
HTML Basics - Ogwal-Awio K, 2025 33