Chapter 1: HTML5
UP Web
AU: 2022/2023
PLAN
How does it work?
HTML: Presentation and Versions
First Example
HTML Tags
Comments
HTML document
Main tags
2
Objectives
To know the most useful tags.
Structure HTML documents semantically.
3
How it works?
Client Server
The client requests a page from
the server
JavaScript code is executed
by the client browser to The server sends the obtained HTML
modify the HTML page page to the client
4
HTML: Presentation and Versions
• HTML stands for « HyperText Markup Language ».
• HTML is not a programming language.
• HTML is used to create and compose the content of a web page and its structure.
• HTML contains approximately 140 tags.
Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element 5
HTML: Presentation and Versions
HTML 1.0 HTML 3.2 HTML 5 HTML 5.3
1991 1997 2008 En cours
1995 2000 2017
HTML 2.0 HTML 4 HTML 5.2
6
First Example
File:
index.html
For testing, use an editor:
7
HTML Tags
• Anatomy of an HTML element
Element
Content
<p>Hello World!</p>
Opening Tag Closing Tag
8
HTML Tags
• Nesting elements
Example
<p>Hello <strong> World </strong>!</p>
Result
9
HTML Tags
• Empty elements
Example:
<img src="image.jpg" alt="logo">
<br>
<hr>
10
HTML Tags
• Attributes
<a href ="www.esprit.tn">Site Esprit</a>
Attribute Value
name
An attribute can be used to:
• Add additional information to the element.
• Define the element’s behavior and formatting.
NB: There are binary attributes that do not require a value
example: checked, selected…
11
HTML Tags
• Attributes
Example:
<a href="www.esprit.tn">Esprit</a>
<img src="assets/images/logo.jpg" alt="Esprit logo"
height="100" width="150">
Attribute Value
name
Result:
12
Comments
• Comments in HTML are delimited by <!-- and -->.
Example:
<!– This is a comment-->
13
HTML document
<!DOCTYPE html>
• necessary item to indicate the type of document to the browser.
• is not case sensitive.
14
HTML document
<html> … </html>
• is the root element of the document.
• its presence is mandatory.
• must contain the following child tags: <head> and <body>. 15
HTML document
<head> … </head>
• Acts as a container for any information needed for the page but is not part of
the displayed content: meta tags (keywords, description, author …), page title
and links to CSS and JS files.
16
HTML document
<title> … </title>
• defines the page title.
• This title will appear on the tab
when the page is loaded.
17
HTML document
<body> … </body>
• Contains the document body.
• The content will be seen by visitors
(text, image, sound…)
18
Tags: Title
• There are 6 title levels:
<h1> - <h6>
• By default the title tag adds an empty line.
• Generally, 3 to 4 levels are enough.
19
Tags: Paragraph
Tag <p>…</p>
• Is preceded and followed by a line break.
• Eliminates redundant spaces and line breaks.
20
Tags: List
• Ordered list <ol>…</ol>
• Unordered list <ul>…</ul>
• Description list <dl>…</dl>
• The elements of an (un)-ordered
list are tagged with<li>.
• The elements of a description list
is tagged with <dd>.
21
Tags: Image
• We use the tag: <img>
• Example:
<img src="assets/images/logo.jpg" alt="Esprit Logo"
height="100" width="150">
• src and alt attributes are mandatory.
– src: indicates the path of the image.
– alt: contains a text that describes the image.
• The formats supported by the browsers are jpeg, gif, png
and bmp.
Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element#image_and_multimedia 22
Tags: Link
• We use the tag: <a>
Example: <a href= "link target" > text </a>
• There are 4 different cases:
– A link to a website or a page of site.
• <a href= "https://www.google.com" > google </a>
– A link to a downloadable file.
• <a href= "link target" > download </a>
– A link to an email or phone address.
• <a href= "mailto:contact@exemple.com"> Contact us</a>
• <a href= "tel:+21698765432"> Contact us</a>
– A link to a target on the same page.
• <h1 id="anchor"> Contact </h1>
• <a href="#anchor"> Jump to Contact </a>
23
Tags: Formatting
• These tags can be contained in a paragraph.
• Do not cause line breaks.
– <b> … </b> Puts text in bold
– <i> … </i> Puts text in italics
– <u> … </u> Underlines the text
– <s> … </s> Adds a strikethrough text
– <small> … </small> Sets text to a smaller size
• More tags to discover <strong>, <mark>, <em>, <abbr>, <cite>, <q>, <code>
24
Tags: Structure
• Without a semantic meaning:
– <div> … </div>
– <span> … </span>
• With a semantic meaning:
– <header> … </header>
– <article> … </article>
– <nav> … </nav>
– <aside> … </aside>
– <footer> … </footer>
– <section> … </section>
25
Tags: Table
• We use the tag:
<table> … </table>
• The table is then constructed line by line:
<tr> … </tr>
• The row contains cells:
<td> … </td>
26
Tags: Table
• We can add a header:
<th> … </th>
27
Tags: Table
• We can use the border attribute
<table border = "1">
But in HTML5, its usage is obsolete.
28
Tags: Table
Advanced concepts
• Horizontal merge – Column merge
<td colspan = "2">
• Vertical merge – Line merge
<td rowspan = "2">
29
Tags: Table
Advanced concepts
• We use the tag
<caption> … </caption>
to add a title to the table.
It can be added after the opening
of the table tag or just before
closing it.
30
Tags: Form
• We use the tag
<form> … </form>
• To specify the form behavior, we add the following attributes:
– Action: where to send the data collected from the form.
– Method: The HTTP method used to send the data. It is either GET or
POST.
31
Tags: Form
The components of a form
• label: <label> Text to display</label>
• Field <input> creates an interactive control in a form.
• The input and behavior of the element depends on the value of the
type attribute.
32
Tags: Form
The components of a form
• The available field types for an input element:
– button
– checkbox
– color
– date
– datetime-local
– email
– file
– hidden
– image
33
Tags: Form
The components of a form
• Text Area: <textarea> </textarea>
34
Tags: Form
The components of a form
• Multiple choice list: <select> … </select>
35
Tags: Form
The components of a form
• Attributes:
– autocomplete
– autofocus
– checked, selected
– disabled, readonly
– max, min, step
– maxlength, minlength
36
Tags: Form
The components of a form
• Examples
– checked / selected
37
Tags: Form
The components of a form
• Examples
– checked / selected
38
Tags: Form
The components of a form
• Examples
– disabled / readonly
39
Tags: Form
The components of a form
• Examples
– Max / Min / Step
40
Tags: Form
The components of a form
• Examples
– Maxlength / Minlength
41
Tags: Form
The components of a form
• Examples
– placeholder
42
Tags: Form
The components of a form
• Examples
– pattern
43
General Remarks
• Many other tags already exist + new ones added in HTML 5.
• There are few rules to follow when placing the tags (i.e. no <li> on its own).
• There are some validators, you can use them. https://validator.w3.org/
• In general, spaces are ignored. They must be used to make the code of the
page readable.
• The default style is quite rudimentary. This style can be modified using CSS
properties.
44
Thank you for your attention
45
