Topic X – Topic Title Module Title
Front End Web Development
Topic 2:
Introduction to HTML5
© NCC Education Limited
Introduction to HTML 5 Topic 2 - 2.2
Scope and Coverage
This topic will cover:
• HTML
• Role of HTML
• HTML Document Structure
• Text-level Elements
• HTML Lists
• HTML Forms
• HTML Best Practices
Introduction to HTML 5 Topic 2 - 2.3
Learning Outcomes
By the end of this topic students will be able to:
• Describe the use of HTML for website development
• Understand the basics of HTML5
• Explain the HTML structure
• Demonstrate understanding of HTML basics
V0.0 Visuals Handout – Page 1
Topic X – Topic Title Module Title
Introduction to HTML 5 Topic 2 - 2.4
Unit Roadmap
Week Topic Week Topic
Overview of Web
1 Application Architecture 7 JavaScript - II
2 Introduction to HTML5 8 jQuery
Responsive CSS Framework:
3 Introduction to CSS 9
Bootstrap -I
HTML and CSS Responsive CSS Framework:
4 10
Bootstrap -II
CSS Flexbox and Grid Code Review, Testing and
5 11
Layout Collaboration
6 JavaScript - I 12 Unit Summary
Introduction to HTML 5 Topic 2 - 2.5
HTML
Introduction to HTML 5 Topic 2 - 2.6
HTML
• HTML stands for HyperText Markup Language.
• It is the standard markup language used for creating and structuring web pages
and web applications.
• HTML uses various elements and tags to define the content and layout of a
webpage.
What is hypertext?
What is markup language?
V0.0 Visuals Handout – Page 2
Topic X – Topic Title Module Title
Introduction to HTML 5 Topic 2 - 2.7
HTML Code Example
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is the first paragraph of my webpage.</p>
<img src="[Link]" alt="Example Image">
<a href="[Link] Example Website</a>
</body>
</html>
Introduction to HTML 5 Topic 2 - 2.8
Roles of HTML (1)
• Foundation of Web Development:
• building block of web development
• structure and content for web pages
• Universal Language:
• supported by all web browsers and cross-platform compatibility
• Accessibility:
• improved user experience
• accessible to people with disabilities
• Structure:
• basic structure of a webpage
• defines headings, paragraphs, lists, and other content blocks
Introduction to HTML 5 Topic 2 - 2.9
Roles of HTML (2)
• Text Formatting:
• control the appearance of text, such as font styles, colors, and sizes
• Hyperlinks:
• create hyperlinks to navigate between pages and resources on the web
• Images and Media:
• allows embedding of images, videos, and audio on web pages
• Forms:
• elements to enable user interaction, such as receiving user input and data
• Semantic Markup:
• semantic elements that add meaning to the content, aiding search engines and
accessibility
V0.0 Visuals Handout – Page 3
Topic X – Topic Title Module Title
Introduction to HTML 5 Topic 2 - 2.10
HTML Document Structure
<!DOCTYPE html>
• HTML follow a specific structure.
<html>
• Structure defines how the content of a <head>
webpage is organised and displayed. <title>My First Web Page</title>
• Necessary to create well-formed and </head>
valid web pages. <body>
• Basic structure of an HTML document <h1>Welcome to My Website</h1>
consists of several elements, each <p>This is the first paragraph of my
serving a specific purpose. webpage.</p>
<img src="[Link]" alt="Example Image">
<a href="[Link]
Example Website</a>
</body>
</html>
Introduction to HTML 5 Topic 2 - 2.11
HTML Document Structure
Document Type Declaration <!DOCTYPE html>
(<!DOCTYPE html>) <html>
<head>
• The document type declaration
<title>My First Web Page</title>
(DTD) specifies the version of
</head>
HTML to the browser.
<body>
• For HTML5 - <!DOCTYPE html> <h1>Welcome to My Website</h1>
indicates that the document is <p>This is the first paragraph of my webpage.</p>
written in HTML5. <img src="[Link]" alt="Example Image">
<a href="[Link] Example
Website</a>
</body>
</html>
Introduction to HTML 5 Topic 2 - 2.12
HTML Document Structure
<!DOCTYPE html>
<html> Element:
<html>
• The <html> element is the root
<head>
element in HTML.
<title>My First Web Page</title>
• It encapsulates all other elements </head>
of the webpage. <body>
• Every HTML document starts and <h1>Welcome to My Website</h1>
ends with this element. <p>This is the first paragraph of my webpage.</p>
<img src="[Link]" alt="Example Image">
<a href="[Link] Example
Website</a>
</body>
</html>
V0.0 Visuals Handout – Page 4
Topic X – Topic Title Module Title
Introduction to HTML 5 Topic 2 - 2.13
HTML Document Structure
<head> Element: <!DOCTYPE html>
• Contains meta-information about the webpage. <html>
• Produces no visible content, provides <head>
important details to browsers and search <title>My First Web Page</title>
engines. </head>
• Common elements found inside the <head> <body>
element include:
<h1>Welcome to My Website</h1>
• <title>: Sets the title of the webpage, which
appears in the browser's title bar or tab. <p>This is the first paragraph of my
webpage.</p>
• <meta>: Defines meta-information, such as
character encoding and viewport settings. <img src="[Link]" alt="Example Image">
• <link>: Imports external resources like <a href="[Link]
stylesheets and favicons. Example Website</a>
• <script>: Includes JavaScript files or code. </body>
</html>
Introduction to HTML 5 Topic 2 - 2.14
HTML Document Structure
<body> Element: <!DOCTYPE html>
<html>
• Consists the visible content of
<head>
the webpage that is to be
<title>My First Web Page</title>
displayed on the webpage on
</head>
browser.
<body>
• Content such as text, images, <h1>Welcome to My Website</h1>
multimedia, and interactive <p>This is the first paragraph of my webpage.</p>
elements are declared within <img src="[Link]" alt="Example Image">
the <body> element. <a href="[Link] Example
• All the content that users see on Website</a>
the webpage should be placed </body>
inside this element. </html>
Introduction to HTML 5 Topic 2 - 2.15
HTML Document Structure
Structural Element:
• Defines the layout and organisation of the content within the <body> element.
• Examples:
• <header>: Represents the introductory content at the top of a webpage, often
containing logos and navigation menus.
• <nav>: Represents a section containing navigation links.
• <main>: Encloses the main content of the webpage.
• <article>: Defines a self-contained piece of content, like a blog post or article.
• <section>: Represents a thematic grouping of content within an article or webpage.
• <aside>: Represents content that is tangentially related to the main content, such as
sidebars or widgets.
• <footer>: Contains footer information, typically found at the bottom of the webpage.
V0.0 Visuals Handout – Page 5
Topic X – Topic Title Module Title
Introduction to HTML 5 Topic 2 - 2.16
HTML TEXT LEVEL
ELEMENTS
Introduction to HTML 5 Topic 2 - 2.17
Text-level Elements
• Text-level elements in HTML are used to structure and format the
text content within a web page.
• Allows application of specific meanings and styles to different
parts of the text.
• Effective use of these elements:
• Improves the accessibility of webpage
• Helps with search engine optimization (SEO)
• Provides a more meaningful user experience
• Commonly used text-level elements are described in following
slides.
Introduction to HTML 5 Topic 2 - 2.18
Text-level Elements
<h1> to <h6> (Headings):
• These elements represent hierarchical headings, ranging from the most important
<h1> to the least important <h6>.
• Headings define the sections and sub-sections of a webpage.
• Allows content organisation and improves readability.
V0.0 Visuals Handout – Page 6
Topic X – Topic Title Module Title
Introduction to HTML 5 Topic 2 - 2.19
Text-level Elements: h1 – h6 example
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
<h4>This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>
</body>
</html>
Introduction to HTML 5 Topic 2 - 2.20
Text-level Elements
<p> (Paragraphs): <!DOCTYPE html>
• The <p> element defines a paragraph. <html>
<head>
• It allows grouping together blocks of
<title>My First Web Page</title>
text.
</head>
• Browsers add space before and after <body>
paragraphs to visually separate them. <p>This is a paragraph. It contains multiple
sentences and forms a coherent block of
text.</p>
<p> This is second paragraph.</p>
</body>
</html>
Introduction to HTML 5 Topic 2 - 2.21
Text-level Elements
<a> (Links):
• The <a> element creates hyperlinks.
• Allows users to navigate to other web pages or resources.
• The href attribute specifies the destination URL of the link.
<body>
<p>Check out my <a href="[Link] for more
information.</p>
</body>
V0.0 Visuals Handout – Page 7
Topic X – Topic Title Module Title
Introduction to HTML 5 Topic 2 - 2.22
Text-level Elements
<strong> and <em> (Emphasis):
• <strong> represents strong emphasis, often displayed as bold text by browsers.
• <em> represents emphasised text, typically displayed in italics by browsers.
• These elements add semantic meaning to the text, helping search engines and
assistive technologies.
<body>
<p><strong>Important:</strong> Please read the instructions
carefully.</p>
<p>This quote is <em>very</em> inspiring.</p>
</body>
Introduction to HTML 5 Topic 2 - 2.23
Text-level Elements
<span> (Inline Container):
• The <span> element is an inline container.
• Allows to apply styles or add semantics to a specific section of text.
• Unlike block-level elements, <span> does not add line breaks before and after
its content.
<body>
<p>My bag is <span style="color:red">red</span> colour.</p>
</body>
Introduction to HTML 5 Topic 2 - 2.24
Text-level Elements
<abbr> (Abbreviation):
• The <abbr> element represents an abbreviation or acronym.
• Provides an additional information through a title attribute.
<body>
<p><abbr title="World Health Organization">WHO</abbr> provides health-related
information.</p>
</body>
V0.0 Visuals Handout – Page 8
Topic X – Topic Title Module Title
Introduction to HTML 5 Topic 2 - 2.25
Text-level Elements
<sub> and <sup> (Subscript and Superscript):
• <sub> is used for subscript text.
• Example: chemical formulas or mathematical expressions.
• <sup> is used for superscript text.
• Example: footnotes or exponentiation.
<body>
<p>H<sub>2</sub>O is the chemical formula for water.</p>
<p>2<sup>3</sup> = 8</p>
</body>
Introduction to HTML 5 Topic 2 - 2.26
Text-level Elements
<hr> (Horizontal Rule):
• The <hr> element inserts a horizontal line to separate content visually.
• It gives spacing between blocks.
• It is a self-closing element and does not have a closing tag.
<body>
<p>This paragraph is separated by a horizontal
rule.</p>
<hr>
<p>Continuing with the next paragraph.</p>
</body>
Introduction to HTML 5 Topic 2 - 2.27
Text-level Elements
<blockquote> (Block Quote):
• The <blockquote> element represents a block of quoted content from another
source.
• Browsers typically indent and style blockquotes to distinguish them from regular
text.
<body>
<blockquote>
<p>"Be yourself; everyone else is already taken." - Oscar
Wilde</p>
</blockquote>
</body>
V0.0 Visuals Handout – Page 9
Topic X – Topic Title Module Title
Introduction to HTML 5 Topic 2 - 2.28
Text-level Elements
<figure> and <figcaption> (Figure with Caption):
• The <figure> element:
• Represents content referenced from main content, such as images or videos.
• The <figcaption> element:
• Adds a caption or description to the content inside <figure>.
<body>
<figure>
<img src="[Link]" alt="A beautiful landscape">
<figcaption>A breathtaking landscape.</figcaption>
</figure>
</body>
Introduction to HTML 5 Topic 2 - 2.29
HTML LISTS
Introduction to HTML 5 Topic 2 - 2.30
HTML Lists
Two types of lists:
• Unordered lists (bulleted lists)
– Created using the <ul> (unordered list) tag.
• Ordered lists (numbered lists)
– Created using the <ol> (ordered list) tag
• List items are represented by the <li> (list item) tag.
V0.0 Visuals Handout – Page 10
Topic X – Topic Title Module Title
Introduction to HTML 5 Topic 2 - 2.31
HTML Lists
Unordered List (<ul>):
<body>
• A list of items without any specific order
<ul>
or sequence.
<li>Item 1</li>
• Typically displayed as bullet points by <li>Item 2</li>
default. <li>Item 3</li>
• <ul> tag to create an unordered list </ul>
• Individual list items inside the <li> </body>
tags.
Introduction to HTML 5 Topic 2 - 2.32
HTML Lists
Ordered List (<ol>):
<body>
• Conversely, a list of items with a <ol>
specific order or sequence <li>Item 1</li>
• Typically displayed as bullet points by <li>Item 2</li>
default. <li>Item 3</li>
• <ol> tag to create an ordered list </ol>
• Individual list items inside the <li> </body>
tags.
Introduction to HTML 5 Topic 2 - 2.33
HTML Lists
Nested Lists: <body>
• Lists can be nested inside <ul>
each other to create <li>Item 1</li>
hierarchical structures. <li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</body>
V0.0 Visuals Handout – Page 11
Topic X – Topic Title Module Title
Introduction to HTML 5 Topic 2 - 2.34
HTML FORMS
Introduction to HTML 5 Topic 2 - 2.35
HTML Forms
Think for a website where you • Approach for users to submit data
use form before and discuss to a web server for processing.
the various types of form from
different websites. • Essential for various interactive
elements:
• Contact forms
• Login pages
• Search bars
Introduction to HTML 5 Topic 2 - 2.36
HTML Forms
• The <form> element is used to create an HTML form.
• Form elements:
• Input fields
• Buttons
• Checkboxes
• Radio buttons
• The action attribute specifies the URL where the form data will be
sent upon submission.
• The method attribute defines the HTTP method used for the form
submission (e.g., "GET" or "POST").
V0.0 Visuals Handout – Page 12
Topic X – Topic Title Module Title
Introduction to HTML 5 Topic 2 - 2.37
HTML Forms
<input>:
• The <input> element represents various form controls like text input, radio
buttons, checkboxes, buttons, etc.
• The type attribute defines the type of input control to be displayed.
• The name attribute is used to identify the input field when the form is submitted.
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>
Introduction to HTML 5 Topic 2 - 2.38
HTML Forms
<textarea>:
• The <textarea> element creates a multi-line text input area for longer
text entries.
• The name attribute is used to identify the textarea when the form is
submitted.
<form action="/submit" method="post">
<label for="message">Message:</label>
<textarea id="message" name="message"
rows="4" cols="50"></textarea>
<input type="submit" value="Submit">
</form>
Introduction to HTML 5 Topic 2 - 2.39
HTML Forms
<select> and <option>:
• The <select> element creates a dropdown list, and <option> elements define the
individual options in the list.
• The name attribute is used to identify the select field when the form is submitted.
<form action="/submit" method="post">
<label for="country">Country:</label>
<select id="country" name="country">
<option value="USA">United States</option>
<option value="UK">United Kingdom</option>
<option value="Canada">Canada</option>
</select>
<input type="submit" value="Submit">
</form>
V0.0 Visuals Handout – Page 13
Topic X – Topic Title Module Title
Introduction to HTML 5 Topic 2 - 2.40
HTML Forms
<button>:
• The <button> element represents a clickable button within the form.
• It can be used for various purposes, such as submitting the form, triggering
JavaScript functions, etc.
<form action="/submit" method="post">
<button
type="submit">Submit</button>
</form>
Introduction to HTML 5 Topic 2 - 2.41
HTML Forms
<fieldset> and <legend>: <form action="/submit" method="post">
• The <fieldset> element groups <fieldset>
related form elements together and <legend>Contact Information</legend>
creates a visual boundary around <label for="name">Name:</label>
them. <input type="text" id="name" name="name">
<label for="email">Email:</label>
• The <legend> element provides a
<input type="email" id="email" name="email">
caption or label for the fieldset.
</fieldset>
<input type="submit" value="Submit">
</form>
Introduction to HTML 5 Topic 2 - 2.42
HTML Forms
<input type="radio"> and <input <form action="/submit" method="post">
type="checkbox">: <label for="male">Male</label>
• The <input type="radio"> element <input type="radio" id="male" name="gender"
represents a radio button, allowing users value="male">
to select one option from a group of
<label for="female">Female</label>
options.
<input type="radio" id="female" name="gender"
• The <input type="checkbox"> element
value="female">
represents a checkbox, allowing users to
select one or more options from a group <br>
of options. <label for="subscribe">Subscribe to Newsletter</label>
<input type="checkbox" id="subscribe"
name="newsletter" value="subscribe">
<input type="submit" value="Submit">
</form>
V0.0 Visuals Handout – Page 14
Topic X – Topic Title Module Title
Introduction to HTML 5 Topic 2 - 2.43
HTML Best Practices
• Use Semantic HTML:
• Semantic elements (e.g., <header>, <nav>, <main>, <article>, <section>,
<footer>).
• Provides meaning to the structure of your web page. This improves
accessibility and helps search engines understand the content.
• Close Tags Properly:
• Always close HTML tags.
• Some elements are self-closing (e.g., <br> and <img>)
• Some require closing tags (e.g., <p></p>).
• Use Meaningful Text in Links and Buttons:
• Provide descriptive link text and button labels that are meaningful.
Introduction to HTML 5 Topic 2 - 2.44
HTML Best Practices
• Lowercase Element Names and Attributes:
• Use lowercase for HTML element names and attribute names.
• Ensures consistency and better compatibility with XHTML and XML.
• Accessibility:
• Accessible to people with disabilities.
• Use appropriate headings, labels for form elements, descriptive link text.
• Valid and Well-Formatted HTML:
• Ensure your HTML code is valid.
• Adhering to the HTML standard.
• Use proper indentation and formatting to enhance readability for both humans
and machines.
Introduction to HTML 5 Topic 2 - 2.45
HTML Best Practices
• Test Cross-Browser Compatibility:
• Test web pages on different browsers (Chrome, Firefox, Safari, Edge, etc.).
• Ensure they display and function correctly across platforms.
• Avoid Deprecated Elements:
• Avoid using deprecated HTML elements and attributes.
• Check the current HTML specifications to ensure usage of the latest and
recommended elements.
• Mobile Responsiveness:
• Design your web pages to be mobile-responsive
• Adjust layout and content to different screen sizes and devices
V0.0 Visuals Handout – Page 15
Topic X – Topic Title Module Title
Introduction to HTML 5 Topic 2 - 2.46
Quiz - 1
1. What is the correct order of elements in a basic HTML document structure?
A) <body>, <head>, <html>
B) <head>, <html>, <body>
C) <html>, <head>, <body>
D) <html>, <body>, <head>
2. Which HTML element is used to define the metadata of the document, such as its title and character set?
A) <body>
B) <header>
C) <meta>
D) <head>
3. What is the purpose of the <!DOCTYPE html> declaration?
A) It links the HTML document to a CSS file.
B) It declares the document type and version of HTML.
C) It includes JavaScript code in the HTML document.
D) It adds a title to the HTML document.
Introduction to HTML 5 Topic 2 - 2.47
Quiz - 2
1. Which element is used to define emphasized text in HTML?
A) <strong>
B) <em>
C) <mark>
D) <i>
2. What is the purpose of the <br> element in HTML?
A) To create a new paragraph
B) To insert a horizontal line
C) To add a line break within a text
D) To emphasize text
3. Which HTML element is used to define a part of text in an alternate voice or mood?
A) <blockquote>
B) <cite>
C) <q>
D) <s>
Introduction to HTML 5 Topic 2 - 2.48
Quiz - 3
1. What is the purpose of the <form> element in HTML?
A) To create a searchable database
B) To display user inputs
C) To collect user inputs
D) To format document sections
2. Which attribute specifies the method the form data should be sent to the server?
A) method
B) action
C) type
D) enctype
3. What type of form input is used to submit the form to the server?
A) <input type="text">
B) <input type="submit">
C) <input type="button">
D) <input type="checkbox">
V0.0 Visuals Handout – Page 16
Topic X – Topic Title Module Title
Introduction to HTML 5 Topic 2 - 2.49
References
Introduction to HTML:
Mozilla Developer Network (MDN). (n.d.). Introduction to HTML. Available at:
[Link]
HTML Document Structure:
Mozilla Developer Network (MDN). (n.d.). Getting started with HTML. Available at:
[Link]
HTML Text Level Elements:
Mozilla Developer Network (MDN). (n.d.). HTML basics. Available at: [Link]
US/docs/Learn/HTML/Introduction_to_HTML/HTML_basics
Topic 2 – Introduction to HTML5
Any Questions?
V0.0 Visuals Handout – Page 17