Les balises HTML simple

Le site Validator W3C permet de pouvoir valider le balisage de son site web :
https://validator.w3.org/
Voici le code html d’une page de base html valide w3c :

Structure d’une page web

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Ma première page web</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="ici la description qui apparaît sur les moteurs de recherche"/>
    </head>
    <body>
    </body>
</html>

liens et images

LIENS : textes sur lesquels on peut cliquer pour se rendre sur une autre page

…	Lien vers un autre site web
…	Lien vers une autre page du site (même dossier)
…	Lien vers une autre page du site (sous-dossier)
…	Lien vers une autre page du site (dossier parent)
…	Lien qui ouvre une nouvelle fenêtre
…	Lien pour envoyer un mail
…	Lien pour télécharger un fichier
…	Lien qui affiche une infobulle

IMAGES : intégrant l’attribut « src » qui permet d’indiquer où se trouve l’image que l’on veut insérerUtilisation de la balise ALT
La balise « ALT », en complément du nom de l’image, permet d’associer un mot clés ou une expression à une image. Le mot clé placé dans la balise ALT remplacera l’image si le navigateur a des difficultés à afficher l’image en question. Les mots contenus dans les balises « ALT » contribuent également à améliorer le référencement de votre site puisqu’elle permet d’employer des mots clés supplémentaires qui seront lus par les moteurs.
Source : https://www.yakaferci.com/analyse-image-page/

<img src= »image/wordpress.jpg »/>

Insertion d’une image

<a href= »image/wordpress.jpg »> <img src= »image/wordpress.jpg »/> … </a>

Création d’une miniature cliquable

Balises de structuration du texte

Balise	Description
`<abbr>`	Abréviation
`<blockquote>`	Citation (longue)
`<cite>`	Citation du titre d’une œuvre ou d’un évènement
`<q>`	Citation (courte)
`<sup>`	Exposant
`<sub>`	Indice
<i>	Portion de texte « décalée » du contenu principal par défaut en italique
<b>	Mise en valeur par défaut en gras
`<strong>`	Mise en valeur forte – renforcement – elle ne remplace pas <b>
`<em>`	Mise en valeur normale – portion de texte affectée par une emphase (italique) – elle ne remplace pas <i>
`<mark>`	Mise en valeur visuelle
`<h1>`	Titre de niveau 1
`<h2>`	Titre de niveau 2
`<h3>`	Titre de niveau 3
`<h4>`	Titre de niveau 4
`<h5>`	Titre de niveau 5
`<h6>`	Titre de niveau 6
`<figure>`	Figure (image, code, etc.)
`<figcaption>`	Description de la figure
`<audio>`	Son
`<video>`	Vidéo
`<source>`	Format source pour les balises`<audio>`et`<video>`
`<a>`	Lien hypertexte
`<br />`	Retour à la ligne
`<p>`	Paragraphe
`<hr />`	Ligne de séparation horizontale
`<address>`	Adresse de contact
`<del>`	Texte supprimé
`<ins>`	Texte inséré
`<dfn>`	Définition
`<kbd>`	Saisie clavier
`<pre>`	Affichage formaté (pour les codes sources)
`<progress>`	Barre de progression
`<time>`	Date ou heure

Balises de listes

Balise	Description
`<ul>`	Liste à puces, non numérotée
`<ol>`	Liste numérotée
`<li>`	Élément de la liste à puces
`<dl>`	Liste de définitions
`<dt>`	Terme à définir
`<dd>`	Définition du terme

Balises de tableau

Balise	Description
`<table>`	Tableau
`<caption>`	Titre du tableau
`<tr>`	Ligne de tableau
`<th>`	Cellule d’en-tête
`<td>`	Cellule
`<thead>`	Section de l’en-tête du tableau
`<tbody>`	Section du corps du tableau
`<tfoot>`	Section du pied du tableau

Expérimentation : Table

Balises de premier niveau

Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour réaliser le « code minimal » d’une page web.

Balise	Description
`<html>`	Balise principale
`<head>`	En-tête de la page
`<body>`	Corps de la page

Balises d’en-tête

Ces balises sont toutes situées dans l’en-tête de la page web, c’est-à-dire entre<head>et</head>:

Balise	Description
`<link />`	Liaison avec une feuille de style
`<meta />`	Métadonnées de la page web (charset, mots-clés, etc.)
`<script>`	Code JavaScript
`<style>`	Code CSS
`<title>`	Titre de la page

Balise générique

EXlise	Description
`<span>`	Contenu en ligne – sert à regrouper des éléments HTML pour leur affecter un style CSS commun.
<div>	Contenu en bloc