HTML Overview
Web application with HTML and CSS
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 1
Lesson Objectives
▪ HTML Overview
▪ HTML Element
▪ Block vs Inline
▪ Heading & Paragraph
▪ Structure & Semantic
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 2
Session 1
HTML OVERVIEW
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 3
1. What is HTML?
➢ HTML stands for Hyper Text Markup Language
▪ HTML describes the structure of a Web page
▪ HTML consists of a series of elements
▪ HTML elements tell the browser how to display the content
▪ HTML elements are represented by tags
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 4
1. What is HTML?
➢ Example of a basic HTML Document
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 5
2. Anatomy of HTML document
➢ Anatomy of HTML document
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 6
3. Head & metadata
➢ Head is a container for all the stuff you want to include on the HTML page
that isn't the content you are showing to your page's viewers
▪ Meta
▪ Link
▪ Title
▪ Style
▪ Script
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 7
3. Head & metadata
➢ Metadata is data about data. The meta tag (<meta>) is used in an HTML
document to provide high level metadata about the web page, such as:
▪ A page description and the keywords that describe the subject of the
page.
▪ Page authorship information.
▪ Instructions for specific browser actions.
▪ Details about the page title, description, and author to be used when the
page is posted on social media or shown in SERPs.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 8
Demo
CREATE HEAD & METADATA
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 9
4. Anatomy of HTML Element
➢ Anatomy of HTML Element
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 10
5. Element attribute
▪ Attributes are always specified in the start
tag
▪ Attributes usually come in name/value
pairs like: name="value"
❑ Id attribute: Specifies a unique id for an HTML element
❑ Class attribute: Define equal styles for elements with the same class name.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 11
6. Nesting elements
➢ Nesting elements
▪ HTML elements can be nested (elements can contain elements).
▪ All HTML documents consist of nested HTML elements
❖ Note: Make sure that your elements are properly nested
=> Correct
=> Incorrect
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 12
7. Block & Inline
Take a look
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 13
7. Block & Inline
➢ Block elements:
▪ Always starts on a new line and takes up the full width available
(stretches out to the left and right as far as it can).
▪ Block elements in HTML
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 14
7. Block & Inline
➢ Inline elements:
▪ Does not start on a new line and only takes up as much width as
necessary.
▪ Inline elements in HTML
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 15
Demo
CREATE HTML ELEMENTS
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 16
8. HMTL Comments
➢ HTML comments:
▪ Comment tags are used to insert comments in the HTML source code
▪ An HTML comment begins with <!– – and the comment closes with – –>
➢ You can add comments to your HTML source by using the following syntax:
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 17
HTML Entities
▪ Reserved characters in HTML must be replaced with
character entities.
▪ Some Useful HTML Character Entities
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 18
HTML Entities
Result Description Entity Name Entity Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
" double quotation mark " "
' single quotation mark ' '
(apostrophe)
© copyright © ©
® registered trademark ® ®
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 19
Section 2
HEADING AND PARAGRAPH
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 20
1. Heading
➢ Heading: There are six heading elements — <h1>, <h2>, <h3>, <h4>, <h5>,
and <h6>.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 21
1. Heading
➢ Heading: Each element represents a different level of content in the
document; <h1> represents the main heading, <h2> represents subheadings,
<h3> represents sub-subheadings, and so on.
➢ Purpose of Heading:
▪ Search engines use the headings to index the structure and content of
your web pages.
▪ Users often skim a page by its headings. It is important to use headings
to show the document structure.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 22
1. Heading
➢ Usage notes:
▪ Avoid using heading tags to resize text. Instead, use the CSS font-size
property.
▪ Avoid skipping heading levels: always start from <h1>, next use <h2> and
so on.
▪ You should only use one <h1> per page.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 23
2. Paragraph
➢ Paragraph: <p> element represents a paragraph. HTML paragraphs can be any
structural grouping of related content, such as images or form fields.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 24
Section 3
STRUCTURE AND SEMANTIC
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 25
3. Structure hierarchy
➢ Structure hierarchy:
▪ Should just use a single <h1> per page — this is the top level heading,
and all others sit below this in the hierarchy.
▪ Make sure you use the headings in the correct order in the hierarchy.
▪ Of the six heading levels available, you should aim to use no more than
three per page, unless you feel it is necessary.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 26
4.Why structure hierarchy is important?
➢ Why structure hierarchy is important?
▪ Users looking at a web page tend to scan quickly to find relevant content,
often just reading the headings to begin.
▪ Search engines indexing your page consider the contents of headings as
important keywords for influencing the page's search rankings.
▪ To style content with CSS, or make it do interesting things with Javascript,
you need to have elements wrapping the relevant content, so
CSS/JavaScript can effectively target it.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 27
5. Semantics
➢ Semantics: A semantic element clearly describes its meaning to both the
browser and the developer.
▪ Examples of non-semantic elements:
<div> and <span> - Tells nothing about its content.
▪ Examples of semantic elements:
<form>, <table>, and <article> - Clearly defines its content.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 28
5. Semantics
➢ Compare Semantics and Non-Semantics
VS
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 29
5. Semantics
➢ Compare Semantics and Non-Semantics
▪ The semantics is much easier to read.
▪ The semantics has greater accessibility: Well-support for Search Engine.
▪ The semantics lead to more consistent code.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 30
5. Semantics
➢ Some semantics elements in HTML5
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 31
Section 4
HTML 5 SEMANTIC TAGS
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 32
HTML5 Semantic
Element Description
<header>...</header> Indicates the header information on the webpage. Header content typically consists of a business
name or logo and is commonly positioned immediately after the opening <body> tag.
<nav>…</nav> Indicates the start and end of a navigation area within the webpage. The nav element contains
hyperlinks to other webpages within a website and is commonly positioned immediately after the
closing </header> tag.
<main>...</main> Indicates the start and end of the main content area of a webpage. Contains the primary content of
the webpage. Only one main element can appear on a page.
<footer>…</footer> Indicates the start and end of the footer area of a webpage. Contains the footer content of the
webpage.
<section>…</section> Indicates the start and end of a section area of a webpage. Contains a specific grouping of content
on the webpage.
<article>…</article> Indicates the start and end of an article area of a webpage. Contains content such as forum or blog
posts.
<aside>…</aside> Indicates the start and end of an aside area of a webpage. Contains information about nearby
content and is typically displayed as a sidebar.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 33
▪ Create HTML page with:
✓ header,
✓ nav,
✓ main,
✓ section,
✓ article,
✓ footer
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 34
Create HTML page
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 35
Lesson Summary
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 36
Thank you
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 37
