HTML5 Training

Master the basics of HTML5

Create a free account

Track your progress, save your progress and get completion certificates. Join thousands of learners developing their skills with us!

Detailed progress tracking

Downloadable certificates

Badges and achievements

Create my free account I already have an account

Introduction to HTML5

HTML5 is the latest version of the HTML (HyperText Markup Language). It is the standard language for creating and structuring web page content.

🚀 Why learn HTML5?

✅ Essential for web development - It's the foundation of all websites
✅ Easy to learn - Simple and intuitive syntax
✅ Highly in demand - Skill sought after by employers
✅ Compatible - Works on all modern browsers
✅ Free - No paid software required

💻 HTML Editors

To write HTML code, you need a text editor. Here are the best editors to get started:

Recommended editors:

✅ Visual Studio Code - Free, powerful, many extensions
✅ Sublime Text - Fast and lightweight
✅ Atom - Open source and customizable
✅ Notepad++ - Simple and efficient (Windows)
✅ Brackets - Specialized for the web

Installing VS Code

1. Download VS Code from code.visualstudio.com

2. Install the "Live Server" extension to preview your pages

3. Create a file with the .html extension .html

4. Type ! then Tab to generate an HTML5 structure

💡 Tip: VS Code offers auto-completion, syntax highlighting, and integrated debugging. It's the most popular editor among web developers!

📚 Basic HTML

Understanding basic concepts is essential to master HTML5.

Minimum structure of an HTML page


                        <!DOCTYPE html>

                        <html lang="fr">

                        <head>

                            <meta charset="UTF-8">

                            <title>Ma Page</title>

                        </head>

                        <body>

                            <!-- Votre contenu ici -->

                        </body>

                        </html>

Basic tags

<!DOCTYPE html> - Declares the document type
<html> - Main container
<head> - Metadata (not visible)
<body> - Visible page content
<meta> - Page information
<title> - Title in the browser tab

📝 Your first HTML5 document

Here is the basic structure of an HTML5 document:

Example - HTML5 Structure


                        <!DOCTYPE html>

                        <html lang="fr">

                        <head>

                            <meta charset="UTF-8">

                            <meta name="viewport" content="width=device-width, initial-scale=1.0">

                            <title>Ma Première Page HTML5</title>

                        </head>

                        <body>

                            <h1>Bienvenue sur ma page !</h1>

                            <p>Ceci est mon premier paragraphe HTML5.</p>

                        </body>

                        </html>

💡 Explanation:

<!DOCTYPE html> - Declares that this is an HTML5 document
<html> - Root element of the page
<head> - Contains metadata (title, encoding, etc.)
<body> - Contains the visible content of the page

🧩 HTML Elements

An HTML element is defined by an opening tag, content, and a closing tag:


                    <nombalise>Le contenu va ici...</nombalise>

Common HTML elements:


                        <h1>Titre principal</h1>

                        <h2>Sous-titre</h2>

                        <p>Un paragraphe de texte.</p>

                        <a href="https://example.com">Un lien</a>

                        <img src="image.jpg" alt="Description">

                        <div>Un conteneur</div>

                        <span>Un élément en ligne</span>

⚙️ HTML Attributes

Attributes provide additional information about HTML elements. They are always specified in the opening tag.

Attribute examples


                        <a href="https://devformation.com" target="_blank" title="Visitez DevFormation">

                            Cliquez ici

                        </a>


                        <img src="logo.png" alt="Logo DevFormation" width="200" height="100">


                        <div id="header" class="container">Contenu</div>

Most used attributes:

href - Specifies the URL of a link
src - Specifies the source of an image
alt - Alternative text for images
id - Unique identifier of an element
class - CSS class to style the element
style - Inline CSS style
title - Additional information (tooltip)

📌 HTML Headings

HTML offers 6 heading levels, from <h1> to <h6>:


                        <h1>Titre de niveau 1 (le plus important)</h1>

                        <h2>Titre de niveau 2</h2>

                        <h3>Titre de niveau 3</h3>

                        <h4>Titre de niveau 4</h4>

                        <h5>Titre de niveau 5</h5>

                        <h6>Titre de niveau 6 (le moins important)</h6>

⚠️ Important: Use <h1> for the main page title (only one per page). Search engines use headings to index content.

📄 Paragraphs

The <p> element defines a paragraph. Browsers automatically add space before and after each paragraph.


                        <p>Ceci est un paragraphe.</p>

                        <p>Ceci est un autre paragraphe.</p>

                        <p>Les paragraphes peuvent contenir <strong>du texte en gras</strong> et <em>en italique</em>.</p>

🎨 CSS Styles

You can add style to your HTML elements in three different ways:

1. Inline style (in the tag)


                        <p style="color: blue; font-size: 20px;">Texte bleu</p>

2. Internal style (in <head>)


                        <head>

                          <style>

                            p { color: red; }

                          </style>

                        </head>

3. External style (separate CSS file)


                        <head>

                          <link rel="stylesheet" href="styles.css">

                        </head>

💡 Best practice: Always use an external CSS file to facilitate maintenance and code reuse.

✨ Text Formatting

HTML offers several tags to format text:


                        <b>Texte en gras</b>

                        <strong>Texte important (gras)</strong>

                        <i>Texte en italique</i>

                        <em>Texte accentué (italique)</em>

                        <mark>Texte surligné</mark>

                        <small>Texte plus petit</small>

                        <del>Texte supprimé</del>

                        <ins>Texte inséré</ins>

                        <sub>Texte en indice</sub>

                        <sup>Texte en exposant</sup>

💬 Quotations and Citations

HTML offers several tags to display quotations and references.

Short quotation (<q>)


                        <p>Einstein a dit : <q>L'imagination est plus importante que le savoir</q></p>

Long quotation (<blockquote>)


                        <blockquote cite="https://source.com">

                          Ceci est une citation longue qui sera affichée avec une indentation.

                        </blockquote>

Other useful tags


                        <abbr title="HyperText Markup Language">HTML</abbr>

                        <cite>Le Petit Prince</cite>

                        <address>123 Rue Example, Dakar</address>

📝 HTML Comments

Comments allow you to add notes in your code that will not be displayed in the browser.


                        <!-- Ceci est un commentaire sur une ligne -->


                        <!--

                          Ceci est un commentaire

                          sur plusieurs lignes

                        -->


                        <p>Contenu visible</p>

                        <!-- <p>Contenu commenté (caché)</p> -->

💡 Usefulness of comments:

Explain complex code
Temporarily disable code
Mark important sections
Collaborate with other developers

🌈 HTML Colors

HTML supports several formats to define colors.

1. Color names


                        <p style="color: red;">Texte rouge</p>

                        <p style="color: blue;">Texte bleu</p>

2. Hexadecimal code


                        <p style="color: #FF0000;">Rouge</p>

                        <p style="color: #00FF00;">Vert</p>

                        <p style="color: #0000FF;">Bleu</p>

3. RGB and RGBA


                        <p style="color: rgb(255, 0, 0);">Rouge RGB</p>

                        <p style="color: rgba(0, 0, 255, 0.5);">Bleu transparent</p>

🔗 Hypertext Links

Links allow navigation between pages. Use the <a> tag with the href attribute:


                        <a href="https://devformation.com">Visitez DevFormation</a>

                        <a href="contact.html">Page de contact</a>

                        <a href="#section1">Aller à la section 1</a>

                        <a href="mailto:contact@devformation.com">Envoyez un email</a>

                        <a href="tel:+221783123657">Appelez-nous</a>

🖼️ HTML Images

The <img> element allows you to insert images into a web page. The src attribute specifies the image path and alt provides alternative text.


                        <img src="photo.jpg" alt="Description de l'image">

                        <img src="logo.png" alt="Logo" width="300" height="200">

📊 HTML Tables

HTML tables allow you to organize and display structured data in rows and columns. They are essential for presenting tabular information in a clear and organized manner.

Table structure

An HTML table consists of several elements:

<table> - Main table container
<thead> - Table header (optional but recommended)
<tbody> - Table body containing data
<tfoot> - Table footer (optional)
<tr> - Table row
<th> - Header cell (Table Header)
<td> - Data cell (Table Data)

Complete table example


                        <table border="1">

                          <thead>

                            <tr>

                              <th>Nom</th>

                              <th>Âge</th>

                              <th>Ville</th>

                            </tr>

                          </thead>

                          <tbody>

                            <tr>

                              <td>Jean Dupont</td>

                              <td>25</td>

                              <td>Dakar</td>

                            </tr>

                            <tr>

                              <td>Marie Martin</td>

                              <td>30</td>

                              <td>Thiès</td>

                            </tr>

                          </tbody>

                        </table>

Important table attributes

Cell merging


                        <!-- Fusion horizontale (colspan) -->

                        <td colspan="2">Cette cellule occupe 2 colonnes</td>


                        <!-- Fusion verticale (rowspan) -->

                        <td rowspan="3">Cette cellule occupe 3 lignes</td>

💡 Best practices:

Always use <thead> and <tbody> for better structure
<th> tags make the table more accessible to screen readers
Add a caption attribute to describe the table
Use CSS for styling rather than obsolete HTML attributes

📝 HTML Lists

HTML offers three types of lists to organize and present information in a structured way. Each list type has its specific use.

1. Unordered list (<ul>)

Used for items with no particular order. By default, items are displayed with bullets.


                        <ul>

                          <li>HTML5</li>

                          <li>CSS3</li>

                          <li>JavaScript</li>

                        </ul>

Résultat : • HTML5 • CSS3 • JavaScript

2. Ordered list (<ol>)

Used for items that follow a specific order. Items are automatically numbered.


                        <ol>

                          <li>Ouvrir l'éditeur</li>

                          <li>Écrire le code HTML</li>

                          <li>Enregistrer le fichier</li>

                          <li>Ouvrir dans le navigateur</li>

                        </ol>

Résultat : 1. Ouvrir l'éditeur 2. Écrire le code HTML 3. Enregistrer...

Ordered list attributes


                        <!-- Type de numérotation -->

                        <ol type="A"> <!-- A, B, C... -->

                        <ol type="a"> <!-- a, b, c... -->

                        <ol type="I"> <!-- I, II, III... -->

                        <ol type="i"> <!-- i, ii, iii... -->


                        <!-- Commencer à un numéro spécifique -->

                        <ol start="5"> <!-- Commence à 5 -->

                          <li>Élément 5</li>

                          <li>Élément 6</li>

                        </ol>

3. Definition list (<dl>)

Used to display terms and their definitions, like a glossary.


                        <dl>

                          <dt>HTML</dt>

                          <dd>Langage de balisage pour créer des pages web</dd>


                          <dt>CSS</dt>

                          <dd>Langage de style pour la présentation des pages web</dd>

                        </dl>

Nested lists

You can create multi-level lists by nesting lists:


                        <ul>

                          <li>Technologies Front-end

                            <ul>

                              <li>HTML5</li>

                              <li>CSS3</li>

                              <li>JavaScript</li>

                            </ul>

                          </li>

                          <li>Technologies Back-end

                            <ul>

                              <li>PHP</li>

                              <li>Python</li>

                            </ul>

                          </li>

                        </ul>

💡 When to use each type:

<ul> - Shopping lists, product features, navigation menu
<ol> - Step-by-step instructions, rankings, recipes
<dl> - Glossaries, FAQ, metadata

📋 HTML Forms

HTML forms allow users to interact with your site by entering and submitting data. Essential for registrations, logins, searches, and comments.

Basic structure


                        <form action="/traitement.php" method="post">

                          <label for="nom">Nom:</label>

                          <input type="text" id="nom" name="nom" required>


                          <label for="email">Email:</label>

                          <input type="email" id="email" name="email">


                          <button type="submit">Envoyer</button>

                        </form>

Input field types

text - Simple text
email - Email address (automatic validation)
password - Password (hidden)
number - Numbers only
tel - Phone number
date - Date picker
checkbox - Checkboxes
radio - Radio buttons
file - File upload

Other form elements


                        <!-- Zone de texte multiligne -->

                        <textarea name="message" rows="5"></textarea>


                        <!-- Liste déroulante -->

                        <select name="pays">

                          <option value="sn">Sénégal</option>

                          <option value="fr">France</option>

                        </select>

💡 Best practices:

Always associate a <label> with each field using the for attribute
Use placeholder for input examples
Add required for mandatory fields
Use the right input types for automatic validation

🎬 HTML5 Audio and Video

HTML5 allows easy integration of audio and video media without external plugins.

HTML5 Video


                        <video width="640" height="360" controls>

                          <source src="video.mp4" type="video/mp4">

                          Votre navigateur ne supporte pas la vidéo.

                        </video>

HTML5 Audio


                        <audio controls>

                          <source src="audio.mp3" type="audio/mpeg">

                        </audio>

🎨 HTML5 Canvas

The <canvas> element allows you to draw dynamic graphics with JavaScript.


                        <canvas id="monCanvas" width="400" height="200"></canvas>

                        <script>

                          const ctx = document.getElementById('monCanvas').getContext('2d');

                          ctx.fillStyle = '#04AA6D';

                          ctx.fillRect(20, 20, 150, 100);

                        </script>

🖌️ SVG

SVG allows you to create vector graphics that adapt to all sizes.


                        <svg width="200" height="200">

                          <circle cx="100" cy="100" r="80" fill="#04AA6D"/>

                        </svg>

⚡ HTML5 APIs

HTML5 introduces many JavaScript APIs to create powerful web applications.

Geolocation API


                        <script>

                          navigator.geolocation.getCurrentPosition(function(pos) {

                            console.log(pos.coords.latitude);

                          });

                        </script>

🏗️ Semantic HTML

HTML5 introduces semantic tags that give meaning to content.


                        <header>En-tête de la page</header>

                        <nav>Menu de navigation</nav>

                        <main>

                          <article>Contenu principal</article>

                          <aside>Contenu secondaire</aside>

                        </main>

                        <footer>Pied de page</footer>

🎓 Next Steps

Now that you know the basics, explore the other chapters in the left menu to deepen your HTML5 knowledge!

✅ What you learned:

The basic structure of an HTML5 document
HTML elements and tags
HTML attributes
Headings and paragraphs
Text formatting
Hypertext links
Images
Tables with cell merging
Lists (ordered, unordered, definition)
Forms and their elements
Semantic HTML
HTML5 Audio and Video
Canvas and SVG
HTML5 APIs

❮ Home Next: CSS3 ❯

HTML5 Training

Create a free account

Introduction to HTML5

🚀 Why learn HTML5?

💻 HTML Editors

Recommended editors:

Installing VS Code

📚 Basic HTML

Minimum structure of an HTML page

Basic tags

📝 Your first HTML5 document

Example - HTML5 Structure

🧩 HTML Elements

Common HTML elements:

⚙️ HTML Attributes

Attribute examples

Most used attributes:

📌 HTML Headings

📄 Paragraphs

🎨 CSS Styles

1. Inline style (in the tag)

2. Internal style (in <head>)

3. External style (separate CSS file)

✨ Text Formatting

💬 Quotations and Citations

Short quotation (<q>)

Long quotation (<blockquote>)

Other useful tags

📝 HTML Comments

🌈 HTML Colors

1. Color names

2. Hexadecimal code

3. RGB and RGBA

🔗 Hypertext Links

🖼️ HTML Images

📊 HTML Tables

Table structure

Complete table example

Important table attributes

Cell merging

📝 HTML Lists

1. Unordered list (<ul>)

2. Ordered list (<ol>)

Ordered list attributes

3. Definition list (<dl>)

Nested lists

📋 HTML Forms

Basic structure

Input field types

Other form elements

🎬 HTML5 Audio and Video

HTML5 Video

HTML5 Audio

🎨 HTML5 Canvas

🖌️ SVG

⚡ HTML5 APIs

Geolocation API

🏗️ Semantic HTML

🎓 Next Steps

✅ What you learned:

🍪 Nous utilisons des cookies