Chapter 3 HTML (HyperText Markup Language)
Chapter 3: HTML (HyperText Markup Language)
1 What is HTML?
HTML is the standard markup language used to create web pages. It provides the structure of a
webpage by using tags and elements.
2 Tags and attributes
2.1 Tags
HTML pages are filled with so-called tags. They allow the computer to understand what it needs to
display, they are invisible on the screen.
2.2 Types of tags
Pair tags:
An opening tag and a closing tag. Closing tags are written with a slash (/). The text written between the
opening tag and the closing tag is the content of the tag
(eg: paragraph tag <p>...</p>)
Orphan tags:
These are tags that are most often used to insert an element in a specific place, rather than writing the
opening tag and the closing tag (<hr></hr>), we merge these two tags, to write only one tag: <hr/>, or
<img src='...'/> (where the slash is at the end of the tag).
2.3 Block and inline tags:
Most tags can be classified into one of two categories:
block:
A block tag on your web page automatically creates a line break before and after (e.g. paragraph tag
<p> ....</p>).
inline:
An inline tag must be inside a block tag. An inline tag does not create a line break (link tag
<a>…....</a>).
2.4 Attributes
These can be thought of as tag options. They complement the tags to provide additional information.
They are placed after the name of the opening tag and most often have a value.
Chapter 3 HTML (HyperText Markup Language)
3 Basic Structure of an HTML Document
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
</body>
</html>
3.1 <!DOCTYPE html>
Declares the document type and version of HTML (HTML5 in this case).
3.2 <html>
The root element of the HTML document. It has common attributes, the most useful of which are:
lang attribute: The value is a standardized language code (fr, en,...) that indicates the default
language used in the page. This value will be recognized by search engines to allow them to
index the pages of the site by sorting by language;
dir attribute: Indicates the reading direction of the text on the page. It can take the values "ltr"
for text that reads from left to right or "rtl" for text that reads from right to left.
Example:
<html lang="fr" dir="ltr">
<!--continuation of included elements -->
</html>
3.3 Comments
A comment is an HTML tag with a very special shape: <!-- This is a comment -->
3.4 <head>
Contains meta-information about the document that is useful for the proper display of the web page.
This information, known as metadata, is contained in 6 different elements, each of which has a well-
defined role. These are the elements <base/>, <link />,<meta />, <script>, <style> and <title>. No
content of these elements is visible in the page, only the content of the element <title> will be visible,
not in the page but in the title area of the browser.
Chapter 3 HTML (HyperText Markup Language)
3.4.1 The <base /> element
This is an empty element and therefore does not have a closing tag. The information it contains is
given in its unique href, attribute, the use of which is mandatory. The content of this attribute is a URL
that provides the base address of all files used in the page when their address is passed relatively.
Example: <base href="[Link] />
The browser will fetch an image whose URL is indicated on the server by /images/[Link] at
the address: [Link]
The <base /> element also has the common id attribute, which can only be used to modify the value of
the href attribute using a JavaScript script.
3.4.2 The <link /> element
This is an empty element whose information is contained in its attributes. It allows to link the current
HTML page to another external document needed by the page (especially CSS stylesheets or
JavaScript scripts). Binding to external files is determined by the attributes: rel, type, href, hreflang,
media, and sizes.
Most useful:
The “rel” attribute: Specifies the name of the relationship to be established with the external
file. It can take the following values:
Value Description
alternate Provides a link to an alternate version of the document (i.e. print page, translated or
mirror).
Example: <link rel="alternate" type="application/atom+xml" title="W3Schools
News" href="/blog/news/atom">
author Provides a link to the author of the document
dns- Specifies that the browser should preemptively perform DNS resolution for the target
prefetch resource's origin
help Provides a link to a help document. Example: <link rel="help" href="/help/">
Chapter 3 HTML (HyperText Markup Language)
icon Imports an icon to represent the document.
Example: <link rel="icon" href="[Link]" type="image/x-icon">
license Provides a link to copyright information for the document
next Provides a link to the next document in the series
prefetch Specifies that the browser should preemptively fetch and cache the target resource as
it is likely to be required for a follow-up navigation
preload Specifies that the browser agent must preemptively fetch and cache the target resource
for current navigation according to the destination given by the "as" attribute (and the
priority associated with that destination).
prerender Specifies that the browser should pre-render (load) the specified webpage in the
background. So, if the user navigates to this page, it speeds up the page load (because
the page is already loaded). Warning! This wastes the user's bandwidth! Only use
prerender if you are absolutely sure that the webpage is required at some point in the
user's session
prev Indicates that the document is a part of a series, and that the previous document in the
series is the referenced document
search Provides a link to a resource that can be used to search through the current document
and its related pages.
stylesheet Imports a style sheet
Chapter 3 HTML (HyperText Markup Language)
The “type” attribute: Specifies the type of content of the external file. For example, it can take
the following values:
Value Description
text/css For a stylesheet CSS
text/javascript for a JavaScript script
text/html ou text/xml For HTML
images/x-icon To create an icon
The href attribute: Contains the relative or absolute address of the associated external resource.
Example:
- Style sheet:
<link rel="stylesheet" type="text/css" href="[Link]"/>
- Style sheets, specifying the media concerned:
<link rel="stylesheet" type="text/css" href="[Link]" media="screen"/>
<link rel="stylesheet" type="text/css" href="[Link]" media="print"/>
- JavaScript script:
<link rel="script" type="text/javascript" href="[Link]"/>
- icon in the address bar:
<link rel="icon" type="images/x-icon" href="/[Link]"/>
3.4.3 The <meta /> element
This is an empty element for which the information is contained in its attributes. This information is
intended for the web server, browsers and search engines.
Chapter 3 HTML (HyperText Markup Language)
Each piece of information is identified by a name and a content. The name of the information is
defined in the name or http-equiv attributes, which have similar roles, and the associated value is
contained in the content attribute. Most of the values are keywords, the most common are:
name="author": denotes the name of the author of the page.
<meta name= "author" content="Toto Tweet" />
name="keywords": Used for indexing web pages by search engines and directories. The
associated value is the list of keywords that you will choose as the most representative of the
content of your site. Each word or phrase is separated by a comma.
<meta name="keywords" content="HTML5, CSS3, web design, site creation" />
name="description": Brief description of the information contained in the site.
<meta name="description" content="Site HTML 5 and CSS 3" />
http-equiv="refresh": The associated value is a number of N seconds, its use allows the
browser to reload the page every N seconds.
<meta http-equiv="refresh" content="10; [Link]
http-equiv="Content-type": The associated value allows you to define the type of the
document and the character set used in the page simultaneously.
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
3.4.4 The <script> element
Page with an external file containing JavaScript code can be linked to the element <script>, which is
empty. The associated attributes are:
type: Required indicates the type of language used and usually contains the value
text/javascript or application/javascript for JavaScript.
src: specifies the URL, in the case of an external file.
Example: <script type="text/javascript"
src="[Link]
JavaScript code can be embedded in an HTML page between the <script> and </script> tags. In
this case, only the type attribute is required.
Example: <script type="text/javascript">
function debut() {
alert('Hello HTML 5');
}
</script>
3.4.5 The <style> element
We have seen that they can be written in an external file linked to the page with the
element<link/>.
However, as with scripts, it is possible to place them directly in the HTML code as the content of
the <style> element.
Example: <style type="text/css" media="screen">
Body { background-color:yellow; color:blue; }
</style>
Chapter 3 HTML (HyperText Markup Language)
3.4.6 The <title> element
Text defined in the element <title> is the title that appears in the title bar at the top of the browser
window.
Example:
<title>HTML 5 and CSS 3 Course </title>
3.4.7 The encoding (charset)
It indicates how the file is saved. It determines how special characters will be displayed (accents,
Chinese and Japanese ideograms, Arabic characters, etc.).
There are several encoding techniques used depending on the language: ISO-8859-1, OEM 775,
Windows-1253...
The most widely used today is UTF-8. This encoding method makes it possible to display almost all
the symbols of all the languages on our planet without any problem!
It's not enough to say that your file is UTF-8. Your file must also be recorded in UTF-8. This is now
the default in most text editors.
Example:
<meta charset="utf-8" />
3.5 The <body> element
The <body> element is the container for all the elements of a web page.
4 Categories of elements
Each HTML element must follow a number of rules that define the type of content it can have. These
rules are grouped into content templates, which are common to several elements.
Each HTML element belongs to one or more content templates.
4.1 Metadata content
Items in this category change the look and feel of the rest of the document, link to other documents, or
contain information about the structure of the data itself. Items that fall into this category are:
<base>, <command>, <link>, <meta>, <noscript>, <script>, <style> and <title>.
Chapter 3 HTML (HyperText Markup Language)
4.2 Flow content
Items in the flow content category typically contain text or embedded content. These elements are:
<a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>, <bdo>, <blockquote>, <br>, <button>,
<canvas>, <cite>, <code>, <command>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>,
<fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>,
<i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <map>, <mark>, <math>, <menu>,
<meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <samp>,
<script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <textarea>,
<time>, <ul>, <var>, <video>, <wbr> and text.
4.3 Sectioning content
Items in this category are those that create a new section in the document outline that defines the scope
of <header> items, <footer> items and title content. The elements are: : <article>, <aside>, <nav>
and <section>.
4.4 Heading content
Title content defines the title of a section, whether it is explicitly marked by sectioning content or
implicitly defined by the title content itself.
The elements are: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> and <hgroup>.
4.5 Phrasing content
Phrased content defines the text and the markup it contains. Sequences of phrasing content constitute
paragraphs. The elements are:
<abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <datalist>, <dfn>,
<em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, math>, <meter>,
<noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>,
<strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and text.
4.6 Embedded content
Embedded content imports another resource or integrates content from a different markup language or
namespace into the document.
The elements are: <audio>, <canvas>, <embed>, <iframe>, <img>,<math>, <object>, <svg>,
<video>.
4.7 Interactive content
Interactive content is a group of elements that are specifically designed for user interaction. The
elements are:
<a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, et <textarea>.
Chapter 3 HTML (HyperText Markup Language)
5 Structure the content of a page
In HTML 4 and earlier, there are no specialized structuring tags. The content is structured with
<div>, <span> and other containers.
5.1 The <div> element
The element <div> does not have a well-defined semantic role, its common use is to organize the page
into several areas. Each element contained in an element <div> identified by its id attribute includes a
set of elements, to which particular styles can be applied globally. The element <div> admits all the
common attributes, including id, class, title, dir, and lang, which are the most commonly used.
5.2 The <span> element
The online equivalent of the element <div> can be achieved using the element <span>. It is the most
widely used element that creates semantic divisions.
Example:
<!DOCTYPE html>
<html>
<head> ……</head>
<body>
<div>
<hl>Chapter 1</hl>
<p>Le langage <span class="gras">HTML 5 </span> is complemented indispensably
by <span class="gras">CSS 3 </span> styles
</p>
</div>
<br>
<div>
<hl>Chapter 2</hl>
<p> We can also introduce <span class="gras">JavaScript</span> code within an
HTML document</p>
</div>
</body>
</html>
Chapter 3 HTML (HyperText Markup Language)
HTML 5 introduced a set of new elements, each with a specific semantic function. The main
purpose of this is to make it easier for search engines to index the content of the pages. These new
elements are: <header>, <footer>, <nav>, <aside>, <article> and <section>.
Example 1:
Example 2:
<header>
<h1>My Website</h1>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section>
<h2>About Me</h2>
<p>This is a section about me.</p>
</section>
<article>
<h2>My Blog Post</h2>
<p>This is an article about my blog post.</p>
</article>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
Chapter 3 HTML (HyperText Markup Language)
5.3 The <header> element
Contains an introduction for part of the page or the entire page.
5.4 The <footer> element
Contains information that sits at the bottom of a section or page.
5.5 The <nav> element
This container is intended to enclose a group of links.
5.6 The <aside> element
Represents content that is additional to the content itself and can define a sidebar.
5.7 The <article> element
Represents content that is ancillary to the content itself and can define a sidebar.
5.8 The <section> element
Defines a section of documents, dividing content into sections and subsections.
6 <iframe> element
The <iframe> HTML element represents a nested browsing context, embedding another HTML page
such as a Google Maps map or a page from another site into the current one.
In addition to the common attributes, it has the following special attributes:
• src: It contains the absolute or relative address of the external content.
• width: Defines the width of the window.
• height: Defines the height of the window.
• name: it contains the name of the window, a variable used in the code to act on it.
Example:
<iframe
id="inlineFrameExample"
title="Inline Frame Example"
width="300"
height="200"
src="[Link]
</iframe>
Chapter 3 HTML (HyperText Markup Language)
7 Headings, paragraphs, separators
7.1 Headings
Headings are used to define titles or subtitles. They range from <h1> (most important) to <h6> (least
important).
Example:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>
The <hgroup> element was introduced in HTML 5 to create groups of titles, it can only
contain the elements <hl> to <h6>.
Example:
<!-- Chapter 1 outline -->
<hgroup id="planl" style="display:none;" >
<h3>Section l</h3>
<h4>Paragraph 1</h4>
<h3>Section 2</h3>
<h4>Paragraph l</h4>
<h4>Paragraph 2</h4>
</hgroup>
7.2 Paragraphs
The <p> tag is used to define paragraphs of text.
Example:
<p>This is a paragraph. It can contain multiple sentences.</p>
<p>This is another paragraph.</p>
7.3 Separators
<br/> : Wrapping
<hr/>: Horizontal line
8 Other predefined text blocks
8.1 The <address> element
<address> Avenue de l'Indépendance, 35 000 Boumerdès – Algérie</address>
Chapter 3 HTML (HyperText Markup Language)
8.2 The <blockquote> element
Used to create a small division in the body of a page. Originally, it was intended to contain blocks of
quotations, such as a short poem or a note. Its content is highlighted by default by a display that is
indented from the left and right edges of the page
Example: <blockquote> To be, or not to be, that is the question </blockquote>
8.3 The <pre> element
Used to display the text it contains, preserving its presentation and the various spaces and indentations
that are found in the HTML code.
Example: <pre>Formatting (tabs) will be kept on the screen</pre>
8.4 <del> and <ins> elements
Generally associated with each other, they are intended to contain information that is currently deleted,
due to obsolescence for example, and the updated version of this information, respectively.
Example:
<blockquote>
There is <del>nothing</del> <del>no code</del> either good or bad,
but <ins>thinking</ins> <ins>running it</ins> makes it so.
</blockquote>
8.5 The <fieldset> element
Its usual role is also to be included in the element <form> to create groups of components of a form. If
it contains the element<legend>, the contents of the element are displayed in the border (see the form
section).
9 Text formatting
Inclusion of source code: <code>
We have seen the element <pre> to insert preformatted text into a block. The inline equivalent is the
element <code> that allows us to include the text of an instruction in a sentence and highlight it in
relation to the context, it is displayed by default in a fixed-spaced font of the listing type.
Example:
<p>To create an alert box in JavaScript, we write for example:
<code>alert('Hello').</code> In this case, the script execution stops. </p>
Bold text: <strong>...</strong>
Emphasis: <em>...</em>
Chapter 3 HTML (HyperText Markup Language)
Highlighting: <mark>...</mark>
As a subscript: <sub>...</sub>
As a superscript: <sup>...</sup>
Special characters: < : < > : > " : " & : & non-breaking space:
10 Lists
10.1 Ordered and Unordered Lists
Bullet Lists <ul>: for "Unordered List"
Numbered Lists <ol>: for "Ordered List"
Example:
<ul>
<li>1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ul>
10.2 The <menu> element
Its purpose is to serve as a container for menus, which may include, for example, a set of links for
navigation.
Example:
<menu>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]
<li><a href="[Link]
</menu>
10.3 Definition lists
A definition list allows you to create a list of terms, each followed by its definition.
Example:
<dl>
<dt>1st term</dt> Display result:
<dd>Definition of the 1st term</dd>
1st term
<dt>2nd term</dt> Definition of the 1st term
<dd>Definition of the 2nd term</dd> 2nd term
</dl> Definition of the 2nd term
Chapter 3 HTML (HyperText Markup Language)
10.4 Nested lists
The <li> element, the only content allowed within <ol> and <ul> elements, can itself contain a wide
variety of content, including other <ol> or <ul> elements.
Example:
<ol>
<li>Item 1
<ol>
<li>Item 1 A</li>
<li>Item 1 B</li>
</ol>
</li>
<li>Item 2
<ol>
<li>Item 2 A</li>
<li>Item 2 B</li>
</ol>
</li>
</ol>
11 Images & Multimedia
The three most commonly used image types are:
GIF: Graphics Interface Format, extension .gif. This format is limited to 256 colors and is
therefore not recommended for photographs. It is primarily used for icons, drawings, or
banners.
JPEG: Joint Photographic Experts Group, extensions .jpeg or .jpg. This format allows the
creation of 24-bit images (16 million colors) and is well-suited for realistic photographs. JPEG
images have a larger file size in KB, which can slow down their loading.
PNG: Portable Network Graphics, extension .png. This format, created by the W3C, allows the
creation of graphics and photographs. A GIF or PNG image will have a smaller file size
compared to a JPEG image.
11.1 The <img> element
Used to include images in a web page.
<img src="URI" alt="description" />
Example:
<img src="[Link]" alt="photo of nature" />
The different attributes used to manage images effectively are:
Chapter 3 HTML (HyperText Markup Language)
src: Specifies the address of the image file to be displayed.
alt: Contains a brief description of the image.
height & width: Define the height and width of the image, respectively.
ismap: Indicates that there is a grid creating clickable areas in the image. These areas serve as
hyperlinks from the image to external documents or parts of the page.
usemap: Specifies the identifier (the id attribute) of the <map> element that defines the
clickable areas of the image.
Example:
<img src="[Link]" alt="My photo" width="45" height="35" />
11.2 Image title: The <figure> and <figcaption> elements
The <figure> element is used to encapsulate an <img/> element for displaying the image and
a <figcaption> element to create a title.
Example:
<figure>
<img src="[Link]" alt="comment" />
<figcaption>Caption</figcaption>
</figure>
11.3 Link on an image:
Example:
<a href="[Link]
<img src="[Link]" alt="UMBB" />
</a>
11.4 Image & Button:
Example:
<button>
<img alt="Text" src="[Link]"/>
</button>
11.5 Responsive images (Image maps)
Used to create a map defining multiple areas within the same image, each of which can, for example,
trigger a different script or link to another document. Such a map contains the definition of all the
clickable areas of the image.
Chapter 3 HTML (HyperText Markup Language)
The definition of a map must have the following structure:
<img src="[Link]" width="370" height="160" alt="personal image" border="0"
usemap="#photo" />
<map id="photo">
<!-- Definition of the 1st area -->
<area shape="rect" coords="92,19,261,66" href="[Link]" alt="zone1" />
<!-- Definition of the 2nd area -->
<area shape="circle" coords="314,105,44" href="[Link]" alt="FAQ" />
</map>
For each <area> tag, the following attributes are specified:
shape: The shape of the clickable area, which can be:
o A circle (shape="circle"),
o A rectangle (shape="rect"),
o A polygon (shape="poly").
coords: A series of coordinates defining the chosen shape.
href: The link to the page to be displayed when the area is clicked.
alt: Alternative text describing the clickable area.
To calculate the coordinates of clickable areas, the use of a suitable tool such as GIMP is
recommended: GIMP Image Map Plugin.
11.6 Inserting a flash animation in HTML5
To embed a Flash animation, we have two methods: one using the <object> element and the other
using the <embed /> element.
Example 1:
<object type="video/mp4" data="/shared-assets/videos/flower.mp4"
width="250" height="200">
</object>
Example 2:
<embed src="URL of file" type="MIME" width="Xpx" height="Ypx" />
MIME : Multipurpose Internet Mail Extensions.
The <embed /> element, added in HTML5, can also contain images or videos and, depending on the
file type, can call a specialized plug-in.
Chapter 3 HTML (HyperText Markup Language)
11.7 The <audio> element
It allows playing audio files in a browser without a plug-in.
Example 1:
<audio src="URL of file" controls="controls" preload="none | metadata | auto"
loop="loop" autoplay="autoplay" muted="muted">
</audio>
Example 2 :
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
11.8 The <video> element
It allows displaying a video without using a plug-in like QuickTime or Real Player, regardless of the
browser.
Example 1:
<video src="URL of file">...</video>
Example 2:
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
Common Attributes:
src: URI of the content.
controls: Displays the media player controls.
autoplay: Starts playback as soon as possible.
loop: Plays in a loop.
muted: Plays without sound.
Chapter 3 HTML (HyperText Markup Language)
11.9 The <canvas> element
The HTML5 <canvas> element represents a bitmap drawing area within the page, controlled by
JavaScript, and capable of rendering shapes, diagrams, graphs, animations, or other visual applications.
A canvas requires two inseparable entities: the <canvas> element in the HTML document and
JavaScript code to draw within the area occupied by <canvas>.
Example:
<canvas id="drawing" width="500" height="200"></canvas>
12 Gauges and Progress Bars
Two new elements in HTML5 allow the display of gauges or progress bars with similar appearances.
The first type is more suited for static information, while the second is for variable information, such
as download progress.
12.1 The <meter> gauge
Intended for static information.
Example:
<meter min="0" max="100" low="10" high="90" optimum="50" value="75"> 75 % </meter>
12.2 The <progress> bar
Intended for variable information, such as indicating download progress.
Example:
<progress max="100" value="75"></progress>
13 Links
13.1 The <a> element
Links allow users to navigate to different pages. By default, they are displayed in blue and underlined.
A link is inserted using the <a> tag with the href attribute to specify the target page's address.
Example:
<a href="[Link] Other Site</a>
You can create a link to another page on your site by simply writing the file name:
<a href="[Link]">Go to Page 2</a>
Chapter 3 HTML (HyperText Markup Language)
13.2 Anchors
Anchors (internal links) allow linking to a specific location within a web page.
Example:
Definition in a page p1 (using the id attribute):
<h1 id="menu">MENU</h1>
Reference from the same page:
<a href="#menu">Go to Menu</a>
Reference from another page:
<a href="[Link]#menu">Return to Menu</a>
14 Table Structure
The essential element for creating tables is <table>: it is the container that holds all other table
elements. It does not provide any visual result on its own and gains importance only through its child
elements.
The structure is created row by row. Each row is declared by a <tr> element (for "table row").
The creation of each cell in a row is declared by a:
<td> element (for "table data") for standard table cells or
<th> (for "table header") for cells that serve as column or row headers.
These elements (<td> and <th>) are the only allowed children of the <tr> element. Priority is given to
rows over columns.
The table title is defined using <caption>. You can add a border to table cells using
the border attribute and merge borders using border-collapse.
A table can be divided into three sections:
<thead> (header),
<tbody> (body),
<tfoot> (footer).
The use of these tags is not mandatory.
You can merge cells horizontally using the colspan attribute or vertically using the rowspan attribute.
You must specify how many cells should be merged.
Chapter 3 HTML (HyperText Markup Language)
Example:
<table border="1">
<caption>A Basic Table</caption>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
<td>Row 1 Column 3</td>
</tr>
</table>
15 Forms
A form is an interactive area of a web page where visitors can input information.
15.1 The <form> element
A form is defined using the <form> tag, which has the following specific attributes:
method: The method for sending data (e.g., GET or POST).
action: The page to which the visitor will be redirected after submitting the form and which
will process the information.
id: Allows identifying the form to access its components via JavaScript.
name: The name of the form, with a role similar to the id attribute.
enctype: Determines the encoding type of the data transmitted to the server
(e.g., multipart/form-data for file uploads).
accept: Contains one or more MIME types (e.g., text/html or image/jpeg) that specify the types
of files accepted for upload.
accept-charset: Specifies one or more character sets allowed for input in the form fields.
autocomplete: Set to on to enable autocomplete (retrieving previously entered data from other
forms).
target: Indicates where the results of the form submission will be displayed (e.g., in a new tab
or the same window).
onsubmit: Allows handling the event that occurs when the user clicks the submit button. It can
be used to validate input data.
onreset: Allows handling the event that occurs when the user clears all inputs by clicking the
reset button.
Chapter 3 HTML (HyperText Markup Language)
15.2 The <input> element
Many form elements can be inserted using the <input /> tag. The value of its type attribute specifies
the type of field to be inserted:
<input type="button"> <input type="color">
<input type="text"> <input type="date">
<input type="password"> <input type="datetime-local">
<input type="email"> <input type="image">
<input type="url"> <input type="month">
<input type="tel"> <input type="number">
<input type="checkbox"> <input type="radio">
<input type="submit"> <input type="range">
<input type="reset"> <input type="search">
<input type="file"> <input type="time">
<input type="hidden"> <input type="week">
15.3 The <label> element
The <label> tag is used to write a label for a form field. It is associated with a form field using
the for attribute, which must match the id of the form field.
15.4 Additional attributes
required: Makes a field mandatory.
autofocus: Automatically selects the field when the page loads.
placeholder: Provides a hint or example text within the field.
15.5 The <fieldset> element
The <fieldset> element is often included in forms. It is used to group related form elements together,
creating a logical section within the form.
15.6 Submit and Reset buttons
The submit button, often labeled "Submit" or "OK," is essential because it is the only button that,
when clicked, can trigger the sending of data to the server or an email.
The most common way to create a submit button is by using the <input /> element.
A reset button is often paired with a submit button. It does not erase the content of all input fields but
instead resets the form to its initial state.
To retrieve what visitors have entered, HTML alone is not sufficient. A server-side language (e.g.,
PHP, ASP) is required.
Chapter 3 HTML (HyperText Markup Language)
15.7 Example of a form
<!DOCTYPE html>
<html>
<head>
<title>Basic Form</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<form method="post" action="[Link]">
<h1> Sample Form </h1>
<fieldset>
<legend> Form components </legend>
<!-- Form components -->
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
<fieldset>
<input type="submit" value="Submit" name="soumission" id="soumission"
tabindex="5" accesskey="E" title="Submit Button"/>
<input type="reset" value="Reset" name="efface"/>
</fieldset>
</fieldset>
</form>
</body>
</html>