HTML
Outline
1. Overview
2. HTML Document Structure
3. Basic Tags
4. Form and Basic Inputs
5. Multimedia
6. Semantic HTML and SEO
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
2
1. Overview
3
1. Overview
•HTML = HyperText Markup Language: is the language for
specifying the static content of Web pages
•hypertext
• Web pages are more than just text
• Web pages can contain multimedia, provide links to
other documents
•markup
•HTML works by augmenting text with special symbols
(tags) to identify the document structure and content
type
• HTML is not a programming language
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
4
HTML vs Programming Languages
Programming Language
Criteria HTML
(e.g., Python, JavaScript, C++)
Type Markup language Programming language
Defines the structure and content Performs logic, calculations, and data
Purpose
of a web page processing
Supports variables, functions, loops,
Control flow No variables, loops, or conditions
conditionals
Executed by compilers or interpreters
Parsed and rendered by browsers
Execution to perform actions and manipulate
to display content
data
<h1>Hello</h1> → displays a if (x > 10) { alert("Big!"); } → runs
Example
heading conditional logic
Static by itself (only defines what Dynamic, can respond to user actions
Interactivity
is shown) and system events
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
5
HTML, CSS, JavaScript
• Roles
• Every webpage is built with
HTML.
• The first step for front-end
development
• Provices foundation for styling
(with CSS) and interactivity
(with JavaScript)
• Front-end
• HTML = Skeleton/Structure
• CSS = Skin/Design
• JavaScript = Brain/Interaction
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
6
HTML Document
• A text file with the extension .html or .htm
• Contains the markup code (tags) that defines the structure of a
web page
• Can be opened directly from the local machine or served
through a web server
• HTML documents are parsed and rendered by web browsers
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
7
HTML Versions
Version Year Key Features & Purpose
First public version
HTML 1.0 1993 Support: basic structure and hyperlinks. No support for
images, tables, or forms.
The first official standard by IETF
HTML 2.0 1995
Introduce: images, basic tables, and forms.
Standard by W3C
HTML 3.2 1997
Support: scripting (JavaScript), style (CSS)
Support principle of separating content from presentation.
HTML 4.01 1999
It encouraged the use of CSS for styling
Considered a "living standard" that is continuously updated.
HTML5 2014 Support semantic tags (<header>, <nav>), multimedia support
(<video>, <audio>), etc.
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
8
2. HTML Document Structure
9
HTML Document Structure
• <!DOCTYPE html> Declaration <!DOCTYPE html>
<html>
• Not an HTML tag
<head>
• An introduction to the browser <title>
about the document type My first HTML document
• <html>: root of document </title>
</head>
• head: contains setup information <body>
for the browser & the Web page <p>Hello world!</p>
• body: contains the actual content to </body>
</html>
be displayed in the Web page
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
10
<head> and <body> elements
<!DOCTYPE html>
<html>
<head>
<title>
My first HTML document
</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
11
HTML Document Structure
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
12
3. Basic Tags
13
Tags and Elements
•HTML specifies a set of tags that identify structure of the
document and the content type
• tags are enclosed in < >
• <img src="[Link]"> specifies an image
• most tags come in pairs, marking a beginning and ending
• <title> and </title> enclose the title of a page
•An HTML element is an object enclosed by a pair (in most
cases) of tags: <tagname>Content</tagname>
• <title>My Home Page</title> is a TITLE element
• <p>Part of this text is <b>bold</b></p> is a
PARAGRAPH element that contains a BOLD element
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
14
HTML Tags
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
15
Text Layout - Heading
•<h1>…</h1>: a large, bold heading
•<h2>…</h2>: a slightly smaller heading
•. . .
•<h6>…</h6>: a tiny heading
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
16
Text Layout - Paragraph
<!DOCTYPE html>
<html>
<body>
<p>
This paragraph
contains a lot of lines
but the browser
ignores it. Tag Description
</p>
<p> <p> Paragraph of text
This paragraph
contains a lot of spaces <hr> Horizontal rule to
in the source code, separate content
but the browser
ignores it. <br> Single line break
</p>
</body>
</html>
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
17
Text Layout - Paragraph, Div, Span
Tag Type Default Behavior Usage
<p> Block-level New line, margin Text paragraphs
<div> Block-level New line, full width Grouping sections, layout
<span> Inline Flows inside text Styling small text parts
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
18
The Basic Web page – A Worked Example
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
19
The Basic Web page – A Worked Example
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
20
Text Appearance
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and
<sup>superscript</sup></p>
<p><em>This text is italic
too</em></p>
</body>
</html>
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
21
Text Appearance
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
22
Lists
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> • There are 3 different types:
<h2>An Ordered HTML List</h2> • <ol>…</ol>: an ordered list
<ol>
<li>Coffee</li>
• <li> identifies each list item
<li>Tea</li> • <ul>…</ul> unordered list
<li>Milk</li>
</ol> • <li> identifies each list item
• <dl>…</dl> a definition list
</body>
</html> • <dt> identifies each term
• <dd> identifies its definition
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
23
Hyperlinks
<!DOCTYPE html>
<html>
<body>
<h2>Absolute URLs</h2>
<a href="[Link]
<br>
<a href="[Link]
<h2>Relative URLs</h2>
<a href="html_images.asp">HTML Images</a>
<br> • <a href="URL">…</a>
<a href="/css/[Link]">CSS Tutorial</a>
</body>
</html>
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
24
Images
<img src="URL (or filename)" height="n" width="n" alt="text">
<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<img src="[Link]" alt=”Text of Image"
width="500" height="600">
</body>
</html>
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
25
Tables
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>MSSV</th>
<th>Lớp</th>
</tr> <table>…</table>: a table element
<tr>
<td>20202020</td> <th>...</th>: a header cell
<td>KHMT 01</td>
</tr> <tr>…</tr>: a row in the table
<tr>
<td>20212021</td> <td>…</td>: a cell
<td>Việt Nhật 02</td>
</tr>
</table>
</body>
</html>
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
26
4. Form and Basic Inputs
27
Form
• What is a Form?
• An HTML form is used to collect user input
• Input data can be sent to a server for
processing
• Why are Forms Important?
• Provide user interaction
• E.g., login, search, registration
• Basic structure
<form action="/submit" method="POST">
<!-- form controls like input, select, textarea -->
</form>
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
28
Basic Inputs
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
29
Textarea and Select
<textarea> – Multi-line text box
• Used when the user needs to enter long text
• Unlike <input type="text">, it supports multiple lines.
• Attributes:
• rows → number of visible text lines.
• cols → width of the textarea in characters.
<select> – Dropdown list
• Used to present a list of options.
• Contains <option> elements inside.
• User selects one option by default; can allow multiple
with multiple attribute.
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
30
Textarea and Select
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
31
Checkbox and Radio Button
Checkbox (<input type="checkbox">)
• Allows multiple selections
• Each checkbox is independent
• <input type="checkbox" id="hobby1"> Sports
• <input type="checkbox" id="hobby2"> Music
Radio Button (<input type="radio">)
• Allows the user to select only one option from a group.
• To group them, use the same name attribute.
• <input type="radio" name="gender" value="male"> Male
• <input type="radio" name="gender" value="female">
Female
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
32
Checkbox and Radio Button
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
33
Button Element
Button element: supports three types
• type="submit" → submits the form (default)
• type="reset" → resets all form fields.
• type="button" → generic button (requires
JavaScript for action)
<input type="submit"> Element
Another way to create a submit button.
Only creates submit or reset buttons.
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
34
Form Attributes
1. action
• Specifies where the form data is sent after submission.
• Usually a URL of a server-side script
• <form action="/submit">
2. method
• Defines how the data is sent to the server.
• Common values:
• GET → Data appended to the URL (visible).
• POST → Data sent in request body (hidden).
• <form method="POST”>
3. name
• Gives the form an identifier.
• <form name="loginForm">
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
35
Form
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
36
Form Validation
Form Validation
• Provides basic validation without JavaScript.
• Increases data accuracy before sending to server.
• required: ensures the field must be filled before submitting
• <input type="text" name="username" required>
• pattern: defines a regular expression for input format.
• <input type="text" name="zipcode" pattern="[0-9]{5}">
• min/max: sets minimum and maximum values for numeric
and date inputs.
• <input type="number" name="age" min="18" max="99">
• <input type="date" name="dob" min="2000-01-01"
max="2025-12-31">
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
37
Form Validation
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
38
A Sample Form - Registration Form
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
39
5. Multimedia
40
Multimedia
•HTML supports embedding
multimedia content directly in web
pages.
•Two main categories
•Images (static visuals).
•Audio & Video (media playback).
• Built-in tags, e.g., <img>, <audio>,
<video>, <iframe>
• No need for third-party plugins
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
41
Multimedia
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
42
Example
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
43
6. Semantic HTML and SEO
44
Semantic HTML
• The use of HTML elaments to define both meaning and
apperance
• non-semantic tags: <div>, <span>, <b>, <i>, <u>
• semantic tags: <main>, <article>, <strong>, <em>, <ins>
• Roles
• Code readability and maintenance
• Search engine understands the web content better
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
45
HTML Document Semantic Struture
<!DOCTYPE html>
<html>
• header − header of a section.
<head> • footer − footer for a section
<meta charset="utf-8">
<title>…</title> • nav − navigation.
</head>
<body> • figure − embedded content, such as a
<header>...</header> graphic
<nav>...</nav>
<article> • section − a generic document or
<section>…</section> application section
</article>
<aside>...</aside> • article − an independent piece of content
<figure>...</figure>
<footer>...</footer>
of a document.
</body> • aside − a piece of content that is only
</html>
slightly related to the rest of the page.
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
46
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
47
main, article, section
Feature <main> <article> <section>
Defines the unique, Defines an independent Defines a grouping
Purpose
main content piece of content of content
One <main> element Multiple <article> Multiple <section>
Quantity
per page elements elements
A "Contact Us"
The entire body of a
Examples A post, a news article. section, a "Recent
blog's content.
Posts" section
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
48
Non-Semantic Tag Semantic Tag Meaning / Use Case
<header>, <nav>, <main>, <section>, Use appropriate semantic structural
<div>
<article>, <aside>, <footer> tags instead of generic <div>
<mark>, <time>, <abbr>, <cite>, Use inline semantic tags to add
<span>
<code> etc. meaning instead of plain <span>
Emphasizes importance (not just bold
<b> <strong>
styling)
Emphasizes with intonation or stress
<i> <em>
(not just italic style)
<u> <ins> Represents inserted/added content
<center> Layout should be controlled with CSS,
CSS → text-align: center;
(deprecated) not HTML tags
<div> for Groups media content with its caption
<figure> + <figcaption>
images/media in a meaningful way
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
49
Basic SEO
What is SEO?
• Search Engine Optimization improves visibility of websites in search engines.
• Good HTML structure helps search engines understand content.
Role of Semantic HTML in SEO
• Semantic elements (like <header>, <main>, <article>, <footer>) give context.
• Search engines better index and rank structured content.
• Improves accessibility and maintainability.
Example
• <title> → Page title, appears in search results.
• <meta description> → Short summary, influences click-through rate.
• <h1>…<h6> → Heading hierarchy, signals importance of topics.
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
50
Basic SEO - Key Points
• Title tag
• Appears in browser tab and search results.
• Should be unique, descriptive, around 50–60 characters.
• Meta description
• Short summary shown in search results.
• Aim for 140–160 characters, compelling and relevant.
• URLs: use human-readable slugs (avoid long query strings).
• [Link]/coffee-guide
• [Link]/page?id=1234
• Headings
• Use <h1>…<h6> to reflect content hierarchy.
• Include keywords naturally
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
51
Basic SEO - Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Best Coffee Shops in Hanoi | Local Guide</title>
<meta name="description" content="Discover the top coffee shops in
Hanoi with our curated local guide. Perfect spots for coffee lovers.">
</head>
<body>
<h1>Best Coffee Shops in Hanoi</h1>
<h2>1. Hidden Gem Café</h2>
<p>A quiet place with locally roasted beans...</p>
</body>
</html>
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
52
Basic SEO - Key Points
• Links: clear,
descriptive text
• Images: include
meaningful alt
• Lists: use <ul>/<ol>
for real lists; don’t
fake with <br>.
• Tables: add
<caption>, <thead>
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
53
SEO Checklist
• Use semantic structure: <header>, <nav>, <main>, <footer>.
• One clear <h1>; logical <h2>–<h6> structure.
• Unique, descriptive <title> per page.
• Helpful <meta name="description">.
• Descriptive anchors; avoid generic link text.
• Meaningful alt text; captions for data tables.
• Mobile-friendly layout; fast loading (images, CSS/JS).
• Structured data (JSON-LD) for rich results when relevant.
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
54
JSON-LD
• JSON-LD is a lightweight format for Linked Data based on
JSON.
• Purpose: Helps search engines and applications understand the
context and relationships of your content.
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
55
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
56
Google page history
1997 1998
1999
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
2000
57
Google page history
2001 2002
2003
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
2004
School of Information and Communication Technology
58
Google page history
2005
2006
2007 2025
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
59
Exercises
• Ex1. Create a simple HTML page including basic
tags
• Ex2. Create a sample registration form
• Ex3. Create a HTML page using semantic tags
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
60
Exercises
• Ex4. Create the Facebook’s registration page
• Ex5. Create the Google’s search page
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
61