Week 2 Lecture

Topic 2
ECS417U - Fundamentals of Web Technology Hypertext Markup Language

School of Electronic Engineering and Computer Science
Agenda
• HTML syntax
• Structure of HTML
• Semantic structure elements
School of Electronic Engineering and Computer Science 2

Learning Objectives
On completion of this topic, you will be able to:
• Summarise a brief history of HTML
• Understand the syntax of HTML
• Describe the structure of HTML
• Understand the importance of semantic

structure elements

Interactive Lecture Session
• Bring your laptop
• Make sure it is charged
• Join the Teams group to post questions

• Microsoft Teams - 85cexv9
Visual Studio Code

Posting a Question
• In order to get your question answered Waleed Iqbal
during the session, you will need to post it on

MS Teams dedicated lecture channel (e.g.
Week 1 Lecture)

Lab Sessions
Attempt Exercises
Need Support?
Complete Lab Interaction Form
Demonstrator will call come and see you in the ITL

to provide support

Lab Sessions
Attempt Exercises
Complete Exercises
Submit Exercise URL via QMPlus
Complete Lab Interaction Form
Demonstrator will call you to assess your work

Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<p>
Hello World!
</p>
</body>
</html>

Hello World
https://codepen.io/usmannaeem/pen/MZEqBz

Basic Syntax: Elements and Attributes
HTML documents are composed of textual content and HTML elements.
• HTML element: can contain text, other elements, or be empty.

• It is identi ed in the HTML document by tags (e.g. < >).
• HTML attribute is a name=value pair that provides more information about the HTML
element.
• In XHTML, attribute values had to be enclosed in quotes; in HTML5, the quotes are
optional.
• Comment form: <!-- … —>
• Browsers ignore comments, unrecognisable tags, line breaks, multiple spaces, and tabs

fi
Elements and Attributes
Opening Tag Closing Tag
<a href="http://www.bbc.co.uk">BBC</a>
Element Name Attribute Content
Can be text or other HTML elements
Empty Element Example

Trailing Slash
<br/>
Element Name
What can you do with
Elements?
• Insert images using the <img> tag
• Create links with the <a> tag
• Create lists with the <ul>, <ol> and <li>

tags
• Create headings with <H1>, <H2>, …, <H6>
• And much more…
• Mozilla Developer Network is an excellent

reference for HTML elements.

Nesting HTML elements
• Often an HTML element will contain other HTML elements.
• In such a case, the container element is said to be a parent of the contained,

or child, element.
• Any elements contained within the child are said to be descendents of the
parent element; likewise, any given child element, may have a variety of
ancestors.

Hierarchy of Elements
Ancestor
<body>
Child Parent
<p>
<em>
HTML is <em>Fun!</em>
</p>
<h1>
<h1>This is a heading</h1>
Sibling
<div>
Descendants
<p>
This is <strong>
<strong>important</strong>
</p>
</div>
</body>
Hierarchy of Elements
Descendants
<body>
Children
<p> <h1> <div>

Siblings
<em> <p>
Ancestors
<strong>

Semantic Markup
• HTML should focus on the structure of the document.
• Information about how the content should look when it is displayed in the
browser is best left to CSS (Cascading Style Sheets).
• Therefore, HTML authors are encouraged to create semantic HTML documents.

• HTML document should not describe how to visually present content, but
only describe its content’s structural semantics or meaning.
• Structure is vital
• We will examine tags that describe the basic structural information
• e.g. Articles, headings, lists, paragraphs, links, navigation, footers

Semantic Markup - Advantages
• Eliminating presentation-oriented markup and writing semantic HTML markup

has a variety of important advantages:
• Maintainability - Semantic markup is easier to update and change than web

pages that contain a great deal of presentation markup.
• Faster
• Accessibility - Visiting a web page using voice reading software can be a

very frustrating experience if the site does not use semantic markup.
• Search engine optimisation

HTML Page Structure
1 <!DOCTYPE html>
2 <html>
3 <head>
<meta charset="utf-8"> 5
<title>Basic HTML Page Structure</title> 6
<link rel="stylesheet" href="main.css"> 7

<script src="main.js"></script>
</head>
4 <body>
<h1>Main heading goes here</h1>
</body>
</html>
DOCTYPE
• Short for Document Type De nition
• Tells the browser (or any other client software

that is reading this HTML document) what
type of document it is about to process.
• No mention of the version. 1 <!DOCTYPE html>

fi
<html>
• The <html> element is sometimes called the 2 <html>
root element as it contains all the other HTML
elements in the document.
• The structure of an HTML document has

been compared with that of a sandwich.
</html>

Head and Body
<!DOCTYPE html>
<html>
{
<head> 3
Metadata: does <meta charset="utf-8">

<title>Basic HTML Page Structure</title> }
not appear in Shows up as the
the viewport of name of the tab
the browser <link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
{
Contents that is <body> 4
rendered in the
viewport of the <h1>Main heading goes here</h1>
browser </body>
</html>
Inside the Head?
<meta> element: This example declares that the character encoding for the
document is UTF-8.
<meta charset="utf-8"> 5
<link rel="stylesheet" href="main.css"> 6
<script src="main.js"></script> 7
Speci es an external CSS style sheet le that is used

with this document.
It also references an external Javascript le.

fi
fi
fi
Paragraphs <p>
• Paragraphs are the most basic unit of text in
an HTML document.
• Notice that the <p> tag is a container and

can contain HTML and other inline HTML
elements.
• inline HTML elements refers to HTML

elements that do not cause a paragraph
break but are part of the regular “ ow” of the
text.
https://codepen.io/usmannaeem/pen/zyEQpq

fl
Divisions <div>
• This <div> tag is also a container element
and is used to create a logical grouping of
content
• The <div> element has no intrinsic

presentation.
• It is frequently used in contemporary CSS-

based layouts to mark out sections.
<div> confusion?

Text Formatting
• There is a list of elements that specify text style.
https://codepen.io/usmannaeem/pen/ebGaxZ
Headings and Lines
• HTML provides six levels of heading
(<h1>, <h2>, <h3>, …), with the higher
heading number indicating a heading of
less importance.
• Headings are an essential way for

document authors use to show their
readers the structure of the document.
• Be semantically accurate!
• Do not choose a heading level
because of its default presentation
• <hr /> creates a horizontal line.
https://codepen.io/usmannaeem/pen/BvweEb

Images <img>
• The <img> tag is used to insert an image. It contains only attributes, and does not have a
closing tag.
• The image's URL (address) can be de ned using the src attribute.
• Default units for height and width are “picture elements” (pixels)
• Can specify percentage of client area of the browser using string such as “50%”
Text in title attribute will be

displayed in a popup tool tip when
Speci es the URL of image to display user moves mouse over image.
<img src=“images/usman.jpg" alt="Usman Naeem" title="Usman Naeem" width="50" height="50" />
Text in alt attribute provides a brief Speci es the width and height
description of image’s content for of image in pixels
users are unable to see it.
fi
fi
fi
Images <img>
https://codepen.io/usmannaeem/pen/QzOavM

Links <a>
• Links are created using the <a> element (the “a” stands for anchor).
• A link has two main parts: the destination and the label.
Label
<a href="http://www.drusmannaeem.com">Dr Usman Naeem</a>
Destination

Types of Links
External site
<a href="http://www.drusmannaeem.com">Dr Usman Naeem</a>
Resource on external site
<a href="http://www.drusmannaeem.com/logo.png">Dr Usman Naeem</a>
Another page on same site as this page
<a href="index.html">Home</a>
Another place on the same page
<a href="#top">Go to Top of Document</a>

Types of Links
Speci c place on another page
<a href="skills.html#programming">Programming Skills</a>
Email
<a href="mailto://u.naeem@qmul.ac.uk">Contact Usman</a>

JavaScript function
<a href="javascript://OpenPopup();">See this</a>

Telephone - automatically dials the number when
user clicks on it using a smartphone browser
<a href="tel:+442078826171">Call Now</a>

fi
Links Examples
https://codepen.io/usmannaeem/pen/BvwgPN

Lists <li>
• Unordered lists <ul> Collections of items in no particular order; these are by default rendered by the
browser as a bulleted list.
https://codepen.io/usmannaeem/pen/WLZqYG
Lists <li>
• Ordered lists <ol> Collections of items that have a set order; these are by default
rendered by the browser as a numbered list.
https://codepen.io/usmannaeem/pen/YdroJM
De nition Lists <dl>
• Terms being de ned are the content of the
<dt> tag
• The de nitions themselves are the content of

the <dd> tag
https://codepen.io/usmannaeem/pen/oJGrmm

fi
fi
fi
Inline Elements
• Inline elements do not disrupt the ow of text (i.e.,
cause a line break).
• Appears in the current line (except <br />)
• Small amount of content, no height or width
• HTML5 de nes over 30 of these elements.

• e.g. <a>, <br>, <em>, <strong>
• Take up only as much width as needed ( ows left

to right)
• Cannot have height and width
• Cannot have a block element child
• Cannot be positioned (e.g. CSS properties like
oat and position do not apply to inline elements)
• Must position its containing block element instead

fl
fi
fl
fl
Block Elements
• Large blocks of content, has height and
width
• Breaks the current line
• Can’t be the content of inline elements
• e.g. <p>, <form>, <h1>, <div>
• Take up the full width of the page ( ows top

to bottom)
• Have a height and width
• Can have block or inline elements as children

fl
Inline-Block Elements
• Examples: <img>, any element with display:
inline-block;
• Take up only as much width as needed

( ows left to right)
• Can have height and width
• Can have a block element as a child
• Can be positioned (i.e. CSS properties like

oat and position apply)

fl
fl
Character Entities
Symbol Description Entity Name Number Code
" quotation mark " "
' apostrophe ' '
& ampersand & &
< less-than < <
> greater-than > >

Special characters that can’t be typed as themselves

HTML5 Semantic Elements
• One substantial problem with modern, pre-HTML5

semantic markup:
• most complex web sites are absolutely packed solid with
<div> elements.
• Unfortunately, all these <div> elements can make the

resulting markup confusing and hard to modify.
• Developers typically try to bring some sense and order to

the <div> chaos by using id or class names that provide
some clue as to their meaning.

VS

1 1
2
<header> <hgroup> 2
3
<nav> 3
4 4
<article> 5 5
<section>
6
<figure> 6
7 <figcaption> 7
<aside> 8 8
9
<footer>
9
41
<header> <footer>
Header and Footer
Most web site pages have a recognisable header and footer section.
• Typically the header contains
• site logo
• title
• horizontal navigation links, and
• perhaps one or two horizontal banners.
The typical footer contains less important material, such as

• smaller text versions of the navigation,
• copyright notices,
• information about the site’s privacy policy, and
• perhaps twitter feeds or links to other social sites.

<nav>
Navigation
• The <nav> element represents a section of a

<header>
page that contains links to other pages or to <img src="logo.gif" alt="logo" />
other parts within the same page. <h1>Fundamentals of Web Technology</h1>
<nav role="navigation">
• Like the other new HTML5 semantic <ul>
<li><a href="index.html">Home</a></li>
elements, the browser does not apply any <li><a href="about.html">About Us</a></li>
special presentation to the <nav> element. </ul>
</nav>
• The <nav> element is intended to be used </header>
for major navigation blocks, presumably the
global and secondary navigation systems.

<section> <article>
Section and Articles
• The <article> element represents a section of content that forms an

independent part of a document or site; for example, a magazine or
newspaper article, or a blog entry.
• The <section> element represents a section of a document, typically with a

title or heading.

<section> <article>
• <section> or <div>?
• The WHATWG speci cation warns readers that the <section> element is not a
generic container element. HTML already has the <div> element for such uses.
• When an element is needed only for styling purposes or as a convenience for

scripting, it makes sense to use the <div> element instead.
• Another way to help you decide whether or not to use the <section> element is
to ask yourself if it is appropriate for the element's contents to be listed explicitly in
the document's outline.
• If so, then use a <section>; otherwise use a <div>.

fi
<figure> <figcaption>
Figure and Figure Captions
• The <figure> element can be used not just for images but for any type of essential content that
could be moved to a different location in the document.
• However:
• The <figure> element should not be used to wrap every image.
• For instance, it makes no sense to wrap the site logo or non-essential images such as banner
ads and graphical embellishments within <figure> elements.
• Instead, only use the <figure> element for circumstances where the image (or other content)
has a caption and where the gure is essential to the content but its position on the page is
relatively unimportant.

fi
<aside>
Aside
• The <aside> element is similar to the <figure> element in that it is used

for marking up content that is separate from the main content on the page.
• <aside> element “represents a section of a page that consists of content

that is tangentially related to the content around the aside element.”
• The <aside> element could thus be used for sidebars, pull quotes, groups of
advertising images, or any other grouping of non-essential elements.

Like a house?
• HTML - Frame of the house
• Floors, rooms == Header, body, footer
• CSS - Look of the house

• Bedroom { oor: carpet }
• JavaScript - Interaction
• onClick = “turnOffTelevsion()”
• PHP - Wiring and Pipes

• Deal with requests
• Server-side languages such as PHP return
data and/or new HTML, CSS, and
Javascript les to your browser.

fi
fl
Summary
On completion of this topic, you will be able to:
• Summarise a brief history of HTML
• Understand the syntax of HTML
• Describe the structure of HTML
• Understand the importance of semantic

structure elements

Directed Reading
• Connolly R and Hoar R, 'Fundamentals of Web Development', Global Edition,

Pearson, 2014, Chapter 2
Slide material adapted from:

Connolly R and Hoar R, 'Fundamentals of Web Development', Global Edition, © 2022. Electronically reproduced by permission of Pearson Education

Week 2 Lecture

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Week 2 Lecture

Uploaded by

Copyright:

Available Formats

Topic 2

ECS417U - Fundamentals of Web Technology Hypertext Markup Language

• Semantic structure elements

School of Electronic Engineering and Computer Science 2

• Summarise a brief history of HTML

• Understand the syntax of HTML

• Describe the structure of HTML

• Understand the importance of semantic

School of Electronic Engineering and Computer Science 3

• Join the Teams group to post questions

Visual Studio Code

during the session, you will need to post it on

School of Electronic Engineering and Computer Science 4

Complete Lab Interaction Form

Demonstrator will call come and see you in the ITL

School of Electronic Engineering and Computer Science 5

Submit Exercise URL via QMPlus

Complete Lab Interaction Form

Demonstrator will call you to assess your work

School of Electronic Engineering and Computer Science 6

School of Electronic Engineering and Computer Science 7

School of Electronic Engineering and Computer Science 8

HTML documents are composed of textual content and HTML elements.

• HTML element: can contain text, other elements, or be empty.

• Comment form: <!-- … —>

School of Electronic Engineering and Computer Science 9

Opening Tag Closing Tag

Empty Element Example

• Create links with the <a> tag

• Create lists with the <ul>, <ol> and <li>

• Create headings with <H1>, <H2>, …, <H6>

• And much more…

• Mozilla Developer Network is an excellent

School of Electronic Engineering and Computer Science 11

• Often an HTML element will contain other HTML elements.

• In such a case, the container element is said to be a parent of the contained,

School of Electronic Engineering and Computer Science 12

<p> <h1> <div>

School of Electronic Engineering and Computer Science 14

• Therefore, HTML authors are encouraged to create semantic HTML documents.

School of Electronic Engineering and Computer Science 15

• Eliminating presentation-oriented markup and writing semantic HTML markup

• Maintainability - Semantic markup is easier to update and change than web

• Accessibility - Visiting a web page using voice reading software can be a

• Search engine optimisation

<link rel="stylesheet" href="main.css"> 7

• Tells the browser (or any other client software

• No mention of the version. 1 <!DOCTYPE html>

School of Electronic Engineering and Computer Science 18

• The structure of an HTML document has

School of Electronic Engineering and Computer Science 19

Metadata: does <meta charset="utf-8">

<link rel="stylesheet" href="main.css"> 6

Speci es an external CSS style sheet le that is used

It also references an external Javascript le.

School of Electronic Engineering and Computer Science 21

• Notice that the <p> tag is a container and

• inline HTML elements refers to HTML

School of Electronic Engineering and Computer Science 22

• The <div> element has no intrinsic

• It is frequently used in contemporary CSS-

School of Electronic Engineering and Computer Science 23

" quotation mark " "

' apostrophe ' '

& ampersand & &

< less-than < <

> greater-than > >