La Structure de la Page de HTML5
Information de version - Doctype
Une page HTML de base toujours commence par la déclaration du type du document ou doctype. C'est un façon d'informer les navigateurs sur le type du document. Le doctype est toujours le premier élément en haut de tous les fichiers HTML. Ensuite on a des séctions et sous-sections , chaque a son titre et sous-titre. Ces titres et éléments de séction aide le lecteur à percevoir la signification du contenu.
En ce qui concerne le passé, cette déclaration doctype à été très désagréable et difficile à retenir.
Comme une illustration, voyez HTML 4.01 Strict DTD declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML5 a fait plus! La meilleure solution pour le moment est cette courte déclaration:
<!Doctype html>Le doctype peut être écrit en majuscule, minuscule ou ces deux mixés. Comme vous l'avez noté, "5" est manqué de la déclaration. Cependant, ce marque Web est connu comme "HTML5".
L'élément <html>
L'élément <html> suivre l'information doctype , qui est utilisé pour informer le navigateur que c'est un document HTML. Vous pouvez voir l'attribut lang avec la valeur en pour spécifier que le document est en Anglais. Mais aujourd'hui, même l'attribut lang et inutile pour le document pour valider ou fonctionner correctement.
N'oubliez pas d'inclure le tag fermant </html> tag:
<!DOCTYPE HTML>
<html lang="en">
</html>La séction <head>
La partie suivante est la section d'en-tête. L'élément <head> contient métadonnées (titre du document, caractères, styles, liens, scripts), l'information spécifique sur la page Web qui n'est pas affiché à l'utilisateur.
L'élément <meta> est utilisé pour spécifier les métadonnées pour fournir l'information téchnique sur la page web pour les navigateurs et les moteurs de recherche.
Par exemple, si vous voulez spécifier l'auteur du document, vous pouvez utiliser l'élément <meta> comme cela:
<meta name="Author" content="W3docs">Pour définir l'encodage de caractères pour le document, vous devez définir l'attribut charset avec la valeur utf-8 dans presque tous les cas. UTF-8 est un caractère d'encodage par défaut pour HTML5.
Apprenez plus sur Code de caractères UTF-8 .
<meta charset="utf-8">Utilisez l'élément <title> pour définir le titre de votre document .
<title>W3Docs - Apprenez Langages de Programmation En ligne.</title>Après, on a l'élément <link> qui définie la relation entre le document actuel et la resource externe. En général, il est utilisé pour lier à stylesheet externe de CSS .
Les attributs requis pour l'élément <link> sont rel, href et type.
<link rel="stylesheet" type="text/css" href="style.css">L'élément <body>
L'élément <body> d'un document conteint le contenu du document. Le contenu peut être présenté par un agent d'utilisateur de plusieurs manières. Par exemple, le contenu peut être un texte, d, les images, des liens, des couleurs, des graphiques, etc.
<body>
...
</body>Entre les tags de body, il y a des différents éléments, auquels on peut donner le style en utilisant les propriétés CSS. Ajoutez le sélécteur id ou class à votre élément HTML et dans la séction <style> mentionner sur votre options préférés de styler. (color, size, font, etc.).
<style>
.header-style {
color: blue;
}
</style>
<body>
<header class="header-style"></header>
</body>Le <script>
En HTML5, le tag <script> est le meilleur moyen d'intégrer JavaScript. Par exemple, il est lié à la vitesse de chargement de la page.
<script src="js/scripts.js"></script>Titres ( Éléments h1-h6 )
Les éléments de titre <h1>-<h6> sont utilisés pour donner une brève description de la section à venir. <h1> est considéré comme le plus important, et <h6> comme le moins important.
<body>
<h1>Titre du premier niveau</h1>
<h2>Titre du deuxième niveau</h2>
</body>L'élément <header>
Utilisez l'élément <header> pour définir un titre ou une section pour le document. Il contein souvent un logo, barre de recherche, liens de navigation, etc.
<header>
</header>L'élément <nav>
L'élément <nav> défini un bloc des liens de navigation, soit dans le document actuel, soit aux autres documents. Notez, que ce ne sont pas tous les liens dans le document HTML qui peuvent être placés dans l'élément <nav> ; il ne peut inclure que des blocs majeures de navigation.
<header>
<nav>
<ul>
<li>Élément de menu</li>
<li>Élément de menu</li>
<li>Élément de menu</li>
</ul>
</nav>
</header>L'élément <article>
L'élément <article> est utilisé pour définir le contenu indépendant, autonome (articles, commentaires, etc.). Le contenu de l'élément a son propre sens et est diiférencié facilement de l'autre part du contenu.
<article>
<p>Texte de l'article</p>
</article>The <section> Element
L'élément <section> Il est utilisé pour regrouper des contenus liés logiquement et créer des sections de page (bloc d'informations, informations de contact, etc.).
<section>
<h1>Titre</h1>
<p>Parapgraphe</p>
</section>
<section>
<h1>Titre 2</h1>
<p>Autre paragraphe.</p>
</section>Maintenant voyons à quoi la page HTML5 va ressemble:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
html,
body {
height: 100%;
}
body {
display: flex;
flex-wrap: wrap;
margin: 0;
}
.header-menu,
footer {
display: flex;
align-items: center;
width: 100%;
}
.header-menu {
justify-content: flex-end;
height: 60px;
background: #1c87c9;
color: #fff;
}
h2 {
margin: 0 0 8px;
}
ul li {
display: inline-block;
padding: 0 10px;
list-style: none;
}
aside {
flex: 0.4;
height: 165px;
padding-left: 15px;
border-left: 1px solid #666;
}
section {
flex: 1;
padding-right: 15px;
}
footer {
padding: 0 10px;
background: #ccc;
}
</style>
</head>
<body>
<header class="header-menu">
<nav>
<ul>
<li>Élément de menu</li>
<li>Élément de menu</li>
<li>Élément de menu</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>Apprenez HTML</h2>
<small>Hyper Text Markup Language</small>
</header>
<p>Notre didacticiel HTML gratuit pour les débutants vous apprendra le langage HTML et vous expliquera comment créer votre site Web à partir de rien. HTML n'est pas difficile, alors espérons que vous apprécierez l'apprentissage.</p>
</article>
<article>
<header>
<h2>Commencez le questionnaire "HTML de base"</h2>
<small>Vous pouvez tester votre compétences HTML avec le questionnaire W3docs'.</small>
</header>
<p>Vous gagnez 5% pour chaque bonne réponse des questions avec un choix. Pour les questions qui ont quelques choix, le score est jusqu'à 5%. À la fin, Votre score total sera affiché. Le score maximum est 100%.</p>
</article>
</section>
<aside>
<h2>Nos livres</h2>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
<p>PHP</p>
</aside>
<footer>
<small>Company © W3docs. Tous droits réservés.</small>
</footer>
</body>
</html>