• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 12/11/2018

Memento of HTML tags

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

This page provides a non-exhaustive list of existing HTML tags. It does, however, contain a large number of HTML tags. Although we've already seen some during the course, there are others that we haven't had the opportunity to examen yet. The tags we haven't looked at yet are in general not used very often. However, you may well find what you need in this new set of tags.

You can use this annex as a checklist when you develop your website.

Memento

First level tags

First level tags are the main tags used to structure an HTML page. They are essential to producing the "minimum code" for a web page.

Tag

Description

<html>

Main tag

<head>

Page header

<body>

Page body

Minimum code for an HTML page:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
</head>

<body>

</body>
</html>

Header tags

These tags are all located in the web page header, in other words between <head> and </head>:

Tag

Description

<link />

Link with a style sheet

<meta />

Web page metadata (charset, keywords, etc.).

<script>

JavaScript code

<style>

CSS code

<title>

Page title

Text structuring tags

Tag

Description

<abbr>

Abbreviation

<blockquote>

Quotation (long)

<cite>

Quote the title of a work or an event

<q>

Quotation (short)

<sup>

Exponent

<sub>

Index

<strong>

Strong highlighting

<em>

Normal highlighting

<mark>

Visual highlighting

<h1>

Level 1 title

<h2>

Level 2 title

<h3>

Level 3 title

<h4>

Level 4 title

<h5>

Level 5 title

<h6>

Level 6 title

<img />

Image

<figure>

Figure (image, code, etc.)

<figcaption>

Figure description

<audio>

Sound

<video>

Video

<source>

Source format for tags <audio> and <video>

<a>

Hypertext link

<br />

Line feed

<p>

Paragraph

<hr />

Horizontal separation line

<address>

Contact address

<del>

Deleted text

<ins>

Inserted text

<dfn>

Definition

<kbd>

Keyboard entry

<pre>

Formatted display (for source codes)

<progress>

Progress bar

<time>

Date or time

List tags

This section lists all the HTML tags used to create lists (bulleted lists, numbered lists, definition lists, etc.)

Tag

Description

<ul>

Unordered bullet lists

<ol>

Numbered List

<li>

Bulleted list item

<dl>

List of definitions

<dt>

Term to be defined

<dd>

Term definition

Table tags

Tag

Description

<table>

Table

<caption>

Table title

<tr>

Table row

<th>

Header cell

<td>

Cell

<thead>

Table header section

<tbody>

Table body section

<tfoot>

Table footer section

Form tags

Tag

Description

<form>

Form

<fieldset>

Field group

<legend>

Field group title

<label>

Field description

<input />

Form field (text, password, checkbox, button, etc.).

<textarea>

Multi-line entry field

<select>

Drop-down list

<option>

Drop-down list item

<optgroup>

Item group in a drop-down box

Section tags

These tags are used to build the outline of our website.

Tag

Description

<header>

Header

<nav>

Main browsing links

<footer>

Page footer

<section>

Page section

<article>

Article (independent content)

<aside>

Additional information

Generic tags

Generic tags are tags that have no semantic meaning.

Indeed, all other HTML tags have a meaning: <p> means "Paragraph", <h2> means "Subtitle", etc.
You sometimes need to use generic tags (also called general purpose tags) as none of the other tags are appropriate. You most often use generic tags to build your design.

There are two generic tags: inline and block.

Tag

Description

<span>

Inline generic tag

<div>

Block generic tag

These tags are only useful if you associate them with a class, id or style attribute:

  • class: specifies the name of the CSS class to be used.

  • id: gives the tag a name. This name must be unique throughout the page as it identifies the tag. You can use the ID for many things, for example to create a link to an anchor, for an ID type CSS style, for operations in JavaScript, etc.

  • style: this attribute allows you to directly specify the CSS code to be applied. You're not required to have a separate style sheet, you can include the CSS attributes directly. Note that it's preferable to use an external style sheet rather than this attribute as it makes your website easier to update later on.

These three attributes are not restricted to generic tags: you can use them with no problem in most other tags.

Exemple de certificat de réussite
Exemple de certificat de réussite