Chapter 1
Introduction to HTML 5
Objectives:
At the end of this module, the students will be able to
understand:
What is Hypertext Markup Language?
The different HTML 5 structure, semantics and elements.
How to write the tags?
Correct and Incorrect Nesting of tags
Comments
How to save html file and file management?
What are the different text formatting in HTML?
How to Insert Special Characters?
University of Technology and Applied Sciences 2
What is HTML?
It is acronym stands for HyperText Markup Language.
a standardized system for tagging text files to achieve font,
colour, graphic, and hyperlink effects on World Wide Web pages.
HyperText is the method by which you move around on the web —
by clicking on special text called hyperlinks which bring you to the
next page.
Markup is what HTML tags do to the text inside them. They mark it
as a certain type of text. For example (italicised text)
HTML files saved with the .html or .htm extension (example:-
index.html)
University of Technology and Applied Sciences 3
File Management
Websites use several types of files, including HTML files, image
files, media such as audio and video files, and CSS files
Each site must follow a systematic method to organize its files
The main folder, also called the root folder, contains all files
and other folders for the website
University of Technology and Applied Sciences
4
File Management
University of Technology and Applied Sciences 5
HTML tags
HTML tags are keywords (tag names) surrounded
by angle brackets like <html> , each tags gives a specific
instructions.
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the opening tag, the second tag
is the closing tag
The closing tag is written like the opening tag, with
a forward slash before the tag name
<html>…………………</html>
Some tags have only opening tag.
<br/> and <hr/>
University of Technology and Applied Sciences 6
Examples:
<br/> <hr/>
<br><br/> <hr><hr/>
Do not have pair of tags
University of Technology and Applied Sciences 7
How to write the tags
The HTML5 standard does not require lowercase tags,
but W3C recommends lowercase in HTML
HTML5 does not require empty elements to be closed.
Example: <br>
Do Not Forget the End Tag
University of Technology and Applied Sciences 8
Basic Structure of an HTML5 Documents
University of Technology and Applied Sciences 9
The <!DOCTYPE> declare, very first thing in your HTML document,
before the <html> tag.
<!DOCTYPE>
The <!DOCTYPE> declaration is not an HTML tag;
it is an instruction to the web browser about what version of
HTML the page is written in.
The first tag in your HTML document, it tells your
<html>
browser that this is the start of an HTML document.
<head> The text between the <head>tag and the</head>tag is header
</head> information.
<body> The text between the<body>tags is the text that will be displayed in
</body> your browser.
</html> The last tag in your document, It tells your browser that
this is the end Of the HTML document.
University of Technology and Applied Sciences 10
Sample Document Structure
University of Technology and Applied Sciences 11
Using HTML5 Semantic Elements
University of Technology and Applied Sciences 12
Using HTML5 Semantic Elements
University of Technology and Applied Sciences 13
Understanding the Web Page Layout
Source: https://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a-page-with-html5.html
University of Technology and Applied Sciences 14
Correct and Incorrect nesting tags
Unrecognised tags are simply ignored by browser!!
Container tags must be nested!!
Correct Incorrect
<tag1> <tag1>
<tag2> <tag2>
</tag2> </tag1>
</tag1> </tag2>
University of Technology and Applied Sciences 15
Head Meta
Title Line break
Header Progress
Main Meter
Nav Address
HTML Tags/ Section
HTML5 Summary
Details
Elements Aside
Mark
Footer
Heading
Paragraph
University of Technology and Applied Sciences 16
The Head Element
The HTML <head> element has nothing to do with HTML headings.
The <head> element can include a title for the document, scripts, styles, meta
information (metadata) and more
HTML metadata is data about the HTML document.
Metadata is not displayed.
The <head> element is placed between the <html> tag and the <body> tag.
The following elements can go inside the <head> element are:
<title> (this element is required in an HTML document)
<style>
<link>
<meta>
<script>
University of Technology and Applied Sciences 17
Example:
University of Technology and Applied Sciences 18
The <title> tag
A title tag is an HTML element that specifies the title of a
web page.
The title tag of a web page is meant to be an accurate and
concise description of a page's content.
Example:
University of Technology and Applied Sciences 19
Output:
University of Technology and Applied Sciences 20
The <meta> tag
The <meta> tag provides metadata about the HTML document.
Used to specify page description, keywords, author of the document, last modified and
other metadata.
<meta> tags always goes inside the <head> element.
Note: The metadata will not be displayed on the page.
Examples:
University of Technology and Applied Sciences 21
The <body> tag
The <body> tag defines the document's body.
The <body> element contains all the contents of an HTML document, such as
text, hyperlinks, images, tables, lists, etc.
The HTML <body> tag defines the main content of the HTML document or the
section of the HTML document that will be directly visible on your web page.
This tag is also commonly referred to as the <body> element.
Syntax: Example:
University of Technology and Applied Sciences 22
Header
The <header> element represents a container for
introductory content or a set of navigational links.
A <header> element typically contains:
one or more heading elements (<h1> - <h6>)
logo or icon
authorship information
Youcan have several <header> elements in one
document.
Note: A <header> tag cannot be placed within
a <footer>, <address> or another <header>
element.
University of Technology and Applied Sciences 23
Headings tags
Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading.
<h6> defines the smallest heading.
<h1>This is a heading</h1>
This is a Heading
<h2>This is a heading</h2>
This is a heading
<h3>This is a heading</h3>
This is a heading
<h4>This is a heading</h4>
This is a heading
<h5>This is a heading</h5> This is a heading
<h6>This is a heading</h6> This is a heading
University of Technology and Applied Sciences 24
Paragraph
The HTML <p> element defines a paragraph.
Browsers automatically add some space (margin) before and after
each <p> element. The margins can be modified with CSS (with the
margin properties).
University of Technology and Applied Sciences 25
How to write a comment?
You can add comments to your HTML source by using the following syntax:
Note: A comment will be ignored by the browser.
Example:
Output without comments:
Output with comments:
University of Technology and Applied Sciences 26
How to add line breaks?
The <br> tag inserts a single line break.
Use the <br> tag to enter line breaks, not to separate paragraphs.
Example:
Output:
University of Technology and Applied Sciences 27
How to add Non-breaking Space?
A non-breaking space ( ) is a space that will not break into a new line.
Two words separated by a non-breaking space will stick together (not break
into a new line).
Example:
Output:
University of Technology and Applied Sciences 28
The <nav>tag
The <nav> tag defines a set of navigation links.
Example:
Output:
University of Technology and Applied Sciences 29
The <main> tag
The <main> tag specifies the main content of a document.
Note: There must not be more than one <main> element in a document.
The <main> element must NOT be a descendant of an <article>,
<aside>, <footer>, <header>, or <nav> element.
Example:
University of Technology and Applied Sciences 30
Section Tag
The <section> tag defines sections in a document, such as chapters,
headers, footers, or any other sections of the document.
Example:
Output:
University of Technology and Applied Sciences 31
Aside
The <aside> tag defines some content aside from the content it is placed in.
The aside content should be related to the surrounding content.
Note: The sample output presented below is with Cascading Style
Example:
Output:
University of Technology and Applied Sciences 32
Mark
The <mark> tag defines marked text.
Use the <mark> tag if you want to highlight parts of your text.
Example:
Output:
University of Technology and Applied Sciences 33
Summary
The <summary> tag defines a visible heading for the <details>
element. The heading can be clicked to view/hide the details.
Example:
Code
Output
University of Technology and Applied Sciences 34
Details
The <details> tag specifies additional details that the
user can view or hide on demand.
The <details> tag can be used to create an interactive
widget that the user can open and close. Any sort of
content can be put inside the <details> tag.
The content of a <details> element should not be
visible unless the open attribute is set.
The details element represents a disclosure widget
from which the user can obtain additional information
or controls.
University of Technology and Applied Sciences 35
Progress
The <progress> tag is new in HTML5. The <progress> tag represents
the progress of a task.
Example: Output:
University of Technology and Applied Sciences 36
Meter Tag
The<meter> tag defines a scalar measurement within
a known range, or a fractional value. This is also
known as a gauge.
University of Technology and Applied Sciences 37
Example 1
Example 2
University of Technology and Applied Sciences 38
Footer
The <footer> tag defines a footer for a document or
section.
A <footer> element should contain information about its
containing element.
A <footer> element typically contains:
authorship information
copyright information
contact information
sitemap
back to top links
related documents
You can have several <footer> elements in one document.
University of Technology and Applied Sciences 39
Footer
Sample:
University of Technology and Applied Sciences 40
Address
The <address> tag defines the contact information for the
author/owner of a document or an article.
Ifthe <address> element is inside the <body> element, it represents
contact information for the document.
Ifthe <address> element is inside an <article> element, it represents
contact information for that article.
The text in the <address> element usually renders in italic. Most
browsers will add a line break before and after the address element.
University of Technology and Applied Sciences 41
HTML Text Formatting
Tags Description
<b> ... </b> Defines bold text
<i> ... </i> Defines italic text
<sub> ... </sub> Defines subscripted text
<sup> ... </sup> Defines super scripted text
<small>…</small> Defines smaller text
<strong> </strong> It defines important text (bold)
<del> </del> Defines strikethrough text (delete)
<ins> </ins> For inserting text
<em> </em> Defines emphasized text (italicizes)
<q>….</q> Defines a short quotation.
<blockquote>…</blockquote> tag specifies a section that is quoted from
another source usually indented.
University of Technology and Applied Sciences 42
Quotation VS Block quote
EXAMPLE: EXAMPLE:
OUTPUT: OUTPUT:
University of Technology and Applied Sciences 43
Use Special Character (Escape Sequence)
Character Numbered Entity Named Entity
© ©
® ®
$ $
€ €
☎ ☎
Starting with An ampersand (&)
Ending with Semicolon (;)
University of Technology and Applied Sciences 44
The End
University of Technology and Applied Sciences 45
References:
https://www.w3schools.com/
https://www.tutorialrepublic.com/html-tutorial/
https://www.tutorialspoint.com/html5/
University of Technology and Applied Sciences 46
