Maison >interface Web >tutoriel CSS >Modèle HTML5: un débarbotage HTML Startter de base pour tout projet
Créez votre propre modèle HTML5: un guide concis
Cet article vous guidera sur la façon de créer votre propre modèle HTML5. Nous allons étape par étape expliquant les éléments clés du modèle de base HTML, et enfin fournissant un modèle simple que vous pouvez utiliser et construire davantage.
Après avoir lu cet article, vous aurez votre propre modèle HTML5. Si vous souhaitez obtenir le code de modèle HTML maintenant, lisez cet article plus tard, voici notre dernier modèle HTML5.
Points clés
Éléments avec des attributs de langage, le codage des caractères via <meta charset="utf-8">
et les paramètres de la fenêtre pour une conception réactive.
contiennent généralement des métadonnées pour le référencement, des liens vers CSS Styleshets et des fichiers JavaScript en option.
peut améliorer les vitesses de chargement des pages car elle permet aux navigateurs de rendre des pages plus rapidement en retardant le script de chargement. Qu'est-ce qu'un modèle HTML?
Chaque site Web est différent, mais d'un site Web à un autre, beaucoup de choses sont fondamentalement les mêmes. Au lieu d'écrire le même code encore et encore, créez votre propre "modèle". Un modèle est un modèle que vous utilisez chaque fois que vous démarrez un projet, ce qui peut vous empêcher de recommencer à zéro.
Wikipedia décrit le modèle comme:
Les extraits de code apparaissent à plusieurs reprises à plusieurs endroits, avec peu de changement.
Lorsque vous apprenez HTML5 et ajoutez de nouvelles technologies à votre boîte à outils, vous voudrez peut-être créer un modèle HTML pour vous-même pour démarrer tous les futurs projets. Cela vaut vraiment la peine de faire, et il y a beaucoup de points de départ en ligne qui peuvent vous aider à créer vos propres modèles HTML5.
Un exemple très simple du modèle HTML5
Le modèle complet fourni à la fin de cet article contient beaucoup de contenu. Mais vous n'avez pas à le faire aussi fantaisie - surtout lorsque vous commencez à apprendre. Voici un modèle HTML5 "débutant" très simple, qui est probablement la seule chose dont vous avez besoin:
<code class="language-html"><!DOCTYPE html> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> <h1>Page Title</h1> </code>
Si vous collez le code ci-dessus dans un fichier .html, vous aurez une page Web! Ce modèle HTML5 de base contient certains des éléments répertoriés dans la section suivante, ainsi qu'un élément de titre simple qui sera affiché dans votre navigateur Web.
Examinons de plus près sa structure.
Structure du modèle HTML5
Les modèles HTML contiennent généralement les parties suivantes:
élément <title></title>
, description et auteur En plus des déclarations de type de documents et des éléments , la plupart des éléments énumérés ci-dessus sont situés dans la section
du modèle HTML.
HTML5 Type de document Instruction
Votre modèle HTML5 doit commencer par une déclaration de type de document ou doctype . Doctype n'est qu'une façon de dire au navigateur ou à tout autre analyseur quel type de document il regarde. Pour les fichiers HTML, cela signifie une version spécifique et un type de HTML. Doctype doit toujours être le premier élément en haut de n'importe quel fichier HTML. Il y a de nombreuses années, la déclaration de Doctype était une confusion laide et difficile à retenir, généralement désignée comme "XHTML strict" ou "transition HTML".
Avec l'avènement de HTML5, ces choses ennuyeuses inintelligibles ont disparu, et maintenant vous n'avez besoin que de ceci:
<code class="language-html"><!DOCTYPE html> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> <h1>Page Title</h1> </code>
Simple et clair. "5" a clairement disparu de la déclaration. Bien que la version actuelle de la balise Web s'appelle "HTML5", ce n'est vraiment qu'une évolution des normes HTML précédentes - les spécifications futures ne seront que le développement que nous avons aujourd'hui. Il n'y aura jamais "HTML6", donc la balise Web de l'état actuel est généralement simplement appelé "HTML".
Parce que le navigateur doit prendre en charge l'ancien contenu sur le Web, il ne s'appuie pas sur Doctype pour dire au navigateur quelles fonctionnalités doivent être prises en charge dans un document donné. En d'autres termes, juste Doctype ne rend pas votre page conforme aux fonctionnalités HTML modernes. En fait, quel que soit le doctype utilisé, le navigateur déterminera le support des fonctionnalités cas par cas. En fait, vous pouvez utiliser l'ancien doctype avec le nouvel élément HTML5 sur la page et la page rend la même manière que lors de l'utilisation du nouveau doctype.
élément
est l'élément de niveau supérieur dans un fichier HTML - ce qui signifie qu'il contient tout sauf Doctype dans le document. L'élément
est divisé en deux parties -
et
parties. Tous les autres contenus du fichier de page Web seront placés dans ou à l'intérieur de l'élément
. Le code suivant montre l'élément
, qui est situé après la déclaration Doctype et contient les éléments
et
:
<code class="language-html"><!DOCTYPE html></code>
Comment utiliser des balises dans HTML La section
contient des informations importantes sur le document, qui ne s'affiche pas à l'utilisateur final - tels que l'encodage de caractères et les liens vers les fichiers CSS, et éventuellement les fichiers JavaScript. Ces informations sont utilisées par des machines telles que les navigateurs, les moteurs de recherche et les lecteurs d'écran:
<code class="language-html"> </code>…
ci-dessus sont importantes, mais les utilisateurs finaux ne le voient pas - à l'exception du texte , il apparaîtra dans les balises de recherche et de navigateur en ligne.
Comment utiliser des balises dans HTML
La section contient tout affiché dans le navigateur - comme le texte, les images, etc. Si vous souhaitez montrer quelque chose à l'utilisateur final, assurez-vous de le placer entre les balises ON et OFF
…
:
<code class="language-html"><!DOCTYPE html> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> <h1>Page Title</h1> </code>
lang
Quels sont les attributs?
devrait idéalement contenir l'attribut
lang
, comme indiqué dans le code ci-dessus (). Son objectif principal est de dire aux technologies d'assistance telles que les lecteurs d'écran comment les prononcer lors de la lecture à haute voix. (Cette propriété n'est pas requise pour la validation des pages, mais la plupart des validateurs émettront des avertissements si vous ne l'incluez pas.)
La valeur de l'attribut lang
illustré ci-dessus est en
, qui spécifie que le document est écrit en anglais. Toutes les autres langues parlées ont des valeurs, telles que fr
en français, de
en allemand, hi
en hindi, etc. (Vous pouvez trouver une liste complète des codes linguistiques sur Wikipedia.)
HTML Document Character Encoding
La première ligne de la section html document est la ligne qui définit le codage des caractères du document. Les lettres et symboles que nous lisons sur les pages Web sont définis comme une série de nombres, et certains caractères (tels que des lettres) sont codés de plusieurs manières. Par conséquent, il est utile de dire à votre ordinateur quel codage de votre page Web doit se référer. Le codage des caractères indicateurs est une caractéristique facultative qui ne provoque aucun avertissement dans le validateur, mais pour la plupart des pages HTML, il est recommandé:
<code class="language-html"><!DOCTYPE html></code>
Remarque: Pour s'assurer que certains navigateurs plus anciens lisent correctement le codage des caractères, la déclaration de codage des caractères entière doit être incluse quelque part dans les 512 premiers caractères du document. Il devrait également apparaître avant tout élément basé sur le contenu (comme l'élément <title></title>
qui apparaît plus loin dans notre exemple).
L'exemple de codage des caractères ci-dessus utilise le jeu de caractères UTF-8. Dans presque tous les cas, utf-8
est la valeur que vous devez utiliser dans votre document. Ce codage couvre divers caractères non inclus dans d'autres encodages. Vous avez peut-être rencontré des caractères étranges sur le Web - par exemple - qui est évidemment un bug. Cela est généralement dû au fait que le navigateur ne trouve pas les caractères attendus du jeu de caractères spécifié dans le document.
UTF-8 couvre une variété de personnages, y compris de nombreux personnages dans diverses langues du monde, ainsi que de nombreux symboles utiles. Comme l'explique la World Wide Web Alliance:
Les codages basés sur Unicode (tels que UTF-8) peuvent prendre en charge plusieurs langues et peuvent être adaptés à toutes les pages et formulaires mixtes de langue. Son utilisation peut également éliminer la logique côté serveur, déterminant ainsi individuellement l'encodage de caractères pour chaque page de service ou pour chaque soumission de formulaire entrant. Cela réduit considérablement la complexité de la gestion des sites Web ou des applications multilingues.
L'explication complète du codage des personnages dépasse le cadre de cet article, mais si vous voulez creuser plus profondément, vous pouvez lire sur le codage des personnages dans la spécification HTML.
Que signifie X-UA-Compatible
?
Vous voyez parfois cette ligne dans de votre document HTML:
<code class="language-html"><!DOCTYPE html> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> <h1>Page Title</h1> </code>
Cette balise Meta permet aux auteurs Web de sélectionner la version d'Internet Explorer qui devrait rendre la page. Maintenant qu'Internet Explorer est en grande partie juste une mauvaise mémoire, vous pouvez supprimer cette ligne de votre code en toute sécurité. (Nous l'avons supprimé du modèle HTML5.) Si vous êtes sûr que votre page peut être visionnée dans une ancienne version de IE, cela pourrait valoir la peine de l'inclure. Vous pouvez en savoir plus sur cette balise Meta sur le site Web de Microsoft.
élément de la fenêtre
L'élément de fenêtre est une fonctionnalité que vous verrez dans presque tous les modèles HTML5. Il est très important pour la conception Web réactive et la conception mobile d'abord:
<code class="language-html"><!DOCTYPE html></code>
Cet élément <meta>
contient deux propriétés qui fonctionnent ensemble comme un jeu de nom / valeur. Dans ce cas, le nom est défini sur viewport
et la valeur est width=device-width, initial-scale=1
. C'est pour les appareils mobiles uniquement. Vous remarquerez qu'il y a deux parties de la valeur:
width=device-width
: La largeur des pixels de la fenêtre que vous souhaitez que le site Web présente. initial-scale
: Cela devrait être un nombre positif entre 0,0 et 10,0. La valeur de "1" indique un rapport 1: 1 entre la largeur du périphérique et la taille de la fenêtre. Vous pouvez en savoir plus sur ces propriétés de méta-élément sur MDN, mais maintenant il vous suffit de savoir que dans la plupart des cas, ce méta-élément et ses paramètres sont les meilleurs pour les sites Web réactifs d'abord mobiles.
<title></title>
, description et auteur
La partie suivante du modèle de base HTML contient les trois lignes suivantes:
<code class="language-html"> </code>
<title></title>
est ce qui s'affiche dans la barre de titre du navigateur (par exemple, lorsque vous survolez l'onglet du navigateur), qui est également affiché dans les résultats de recherche. Cet élément est le seul élément requis dans la section . La description et les métaelements de l'auteur sont facultatifs, mais ils fournissent des informations importantes pour les moteurs de recherche. Dans les résultats de la recherche, le titre et la description dans l'exemple de code ci-dessus seront affichés ci-dessous.
Vous pouvez placer n'importe quel nombre d'éléments d'élément valide dans .
ouvrir un élément graphique pour les cartes sociales
Comme mentionné ci-dessus, tous les éléments de méta sont facultatifs, mais beaucoup sont bons pour le référencement et le marketing des médias sociaux. La partie suivante du modèle HTML5 contient certaines de ces options de méta-élément:
<code class="language-html"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> </code>
Ces éléments <meta>
utilisent le protocole de graphe ouverte soi-disant, et il existe de nombreux autres éléments que vous pouvez utiliser. Ce sont les éléments que vous utilisez le plus fréquemment. Vous pouvez afficher une liste complète des Meta Options Open Graph disponibles sur le site Web Open Graph.
Les éléments inclus ici amélioreront l'apparence de la page Web lorsqu'ils sont liés aux publications sur les réseaux sociaux. Par exemple, les cinq éléments <meta>
inclus ici apparaîtront dans une carte sociale intégrée aux données suivantes:
Lorsque vous voyez des publications partagées sur les réseaux sociaux, vous verrez généralement ces bits de données sont automatiquement ajoutées aux publications sur les réseaux sociaux. Par exemple, si vous incluez un lien vers la page d'accueil de GitHub, ce qui suit sera affiché dans le tweet.
icônes de favicon et tactiles
La partie suivante du modèle HTML5 contient des éléments <link>
qui indiquent les ressources à contenir en tant que Favicon et Apple Touch Icônes:
<code class="language-html"><!DOCTYPE html> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> <h1>Page Title</h1> </code>
FAVICON apparaîtra dans l'onglet du navigateur lorsque quelqu'un vérifie votre site Web. favicon.ico
Les fichiers sont utilisés dans les navigateurs plus anciens et n'ont pas à être inclus dans le code. Tant que votre fichier favicon.ico
est inclus dans le répertoire racine du projet, le navigateur le trouvera automatiquement. favicon.svg
Les fichiers sont utilisés dans des navigateurs modernes qui prennent en charge les icônes SVG. Vous pouvez également utiliser des fichiers .png à la place.
Le dernier élément fait référence à l'icône utilisée sur les appareils Apple lors de l'ajout de la page à l'écran d'accueil de l'utilisateur.
Vous pouvez inclure des options supplémentaires ici, y compris des fichiers manifestes d'application Web qui font référence à d'autres icônes. Pour la discussion complète, nous vous recommandons de lire l'article d'Andrey Sitnik sur ce sujet. Mais ceux inclus ici sont suffisants pour les modèles débutants HTML simples.
Contient des feuilles de styles CSS et des fichiers JavaScript
Les deux dernières parties importantes du modèle de démarrage HTML sont des références à un ou plusieurs feuilles de style et éventuellement des fichiers JavaScript. Bien sûr, les deux sont facultatifs, bien que peu de sites n'aient pas au moins certains styles CSS.
Les feuilles de styles peuvent être incluses n'importe où dans le document, mais vous le verrez généralement dans la section :
<code class="language-html"><!DOCTYPE html></code>L'élément
<link>
pointe le navigateur Web à une feuille de style externe afin qu'elle puisse appliquer ces styles CSS à la page. L'élément <link>
nécessite que l'attribut rel
soit stylesheet
. Dans le passé, il y avait généralement aussi un attribut type
, mais il n'a jamais été vraiment nécessaire, donc si vous trouvez l'ancien code qui le contient sur le Web, supprimez-le.
Notez que nous avons ajouté la chaîne de requête ?v=1.0
à la fin du lien CSS. Ceci est complètement facultatif. Il s'agit d'une astuce pratique lorsque vous mettez à jour la feuille de style pour mettre à jour cette chaîne de requête (par exemple, mettez à jour vers 1.1 ou 2.0), car cela garantit que le navigateur jette toute ancienne copie en cache des fichiers CSS et chargera la nouvelle version.
Il convient de noter que vous n'avez pas à utiliser l'élément <link>
pour inclure CSS sur la page Web, comme vous pouvez plutôt mettre tous les styles à l'intérieur de la balise <style></style>
… de la page elle-même, située dans la section
. Ceci est très pratique lors de l'expérimentation de dispositions, mais il n'est généralement pas recommandé de le faire sur des sites actifs, car ces styles seront inaccessibles sur d'autres pages, ce qui entraîne un code inefficace et / ou en double.
Le code JavaScript passe généralement
⋮
<p>
</p>
<code class="language-html"><!DOCTYPE html> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> <h1>Page Title</h1> </code>Entrez le script dans la balise
:
Instructions sur les anciens navigateurs et les nouveaux éléments <article></article>
<aside></aside>
<recipe></recipe>
Lorsque HTML5 a été introduit, il contenait de nombreux nouveaux éléments tels que <ziggy></ziggy>
et . Vous pourriez penser que le soutien aux éléments non identifiés est un problème majeur pour les navigateurs plus âgés - mais ce n'est pas le cas! La plupart des navigateurs ne se soucient pas réellement des balises que vous utilisez. Si vous avez un document HTML qui contient un élément (ou même un élément ), et que votre CSS attache certains styles à cet élément, presque chaque navigateur le gérera comme cela est totalement normal, sans appliquer votre style de manière prétendue .
Bien sûr, ces hypothèses ne vérifient pas et il peut y avoir des problèmes d'accessibilité, mais il rendra correctement dans presque tous les navigateurs - l'exception est une version plus ancienne d'Internet Explorer (IE). Avant la version 9, IE a bloqué les éléments non reconnus des styles de réception. Le moteur de rendu traite ces éléments mystérieux comme des "éléments inconnus", vous ne pouvez donc pas changer leur apparence ou leur comportement. Cela comprend non seulement les éléments que nous avons imaginés, mais aussi tous les éléments qui n'étaient pas définis au moment du développement de ces versions de navigateur, y compris de nouveaux éléments HTML5.
Heureusement, les navigateurs plus anciens qui ne prennent pas en charge le nouveau style d'élément sont à peine présents de nos jours, vous pouvez donc utiliser en toute sécurité tout nouvel élément HTML dans presque tous les projets sans vous en soucier.
c'est-à-dire que si vous avez vraiment besoin de prendre en charge les anciens navigateurs, vous pouvez toujours utiliser le HTML5 Shiv fiable, un extrait JavaScript simple développé à l'origine par John Resig. Il a été inspiré par le travail de Sjoerd Visscher, qui a rendu de nouveaux éléments HTML5 styléables dans des versions plus anciennes de IE. En fait, ce n'est pas nécessaire aujourd'hui, cependant. Comme le montre Caniuse.com, les éléments HTML5 sont pris en charge dans tous les navigateurs utilisés.Template HTML5 complète
Il s'agit de notre modèle HTML5 final - un modèle simple que vous pouvez utiliser pour n'importe quel projet:
<code class="language-html"><!DOCTYPE html></code>
Vous pouvez mettre ce code de modèle HTML5 simple et facile à utiliser dans n'importe quel projet aujourd'hui! Sur cette base, vous pouvez ajouter ce que vous voulez entre les balises
et
Conclusion
Il existe de nombreux modèles et frameworks débutants HTML en ligne, avec des fichiers CSS et JavaScript prêts à l'emploi et de nombreux contenus pré-écrits que vous pouvez utiliser et modifier comme vous le souhaitez. Ce n'est pas notre objectif. Les modèles de base que nous fournissons ici contiennent tout ce dont vous pourriez avoir besoin lors de la conception d'une page Web afin que vous n'ayez pas à recommencer à zéro à chaque fois.
N'hésitez pas à copier les modèles de page HTML de base que nous montrons au début, ou les modèles complets que nous montrons ci-dessus et les utilisons dans votre projet. Au fil du temps, vous constaterez peut-être qu'il y a du contenu dont vous n'avez pas besoin souvent, et certaines des choses que nous n'avons pas mentionnées ici que vous utilisez fréquemment, afin que vous puissiez mettre à jour vos modèles en fonction de votre flux de travail.
Étapes suivantes
Un bon moyen de faire passer votre mise en page Web au niveau supérieur est d'utiliser de beaux principes de conception Web, quatrième édition. Ce livre vous apprendra les principes de conception et et pour vous montrer comment les implémenter sur le Web. Il a été complètement réécrit en septembre 2020 et contient une technologie de pointe que vous n'avez pas lu nulle part ailleurs.
Pour affiner vos connaissances CSS, nos cours de projet CSS modernes vous aideront à maîtriser les dernières versions avancées de CSS3.
En dehors de cela, vous pouvez faire passer le développement de votre site Web ou d'applications Web au niveau suivant avec une interface utilisateur interactive et programmatique et réactive. Par exemple, regardez les vastes ressources de SitePoint sur JavaScript et React. Et apprenez à démarrer un nouveau projet plus rapidement en utilisant notre guide sur les meilleurs outils et bibliothèques Web d'échafaudage. Ou, si vous souhaitez créer une expérience Web sans apprendre le codage, lisez notre guide de démarrage sur le mouvement sans code. Le dernier outil sans code est un changement de jeu. Pour la première fois, ils ont suffisamment de pouvoir pour fournir une alternative puissante au codage dans de nombreux cas.
Modèle HTML5 FAQ
Enfin, nous répondrons aux questions fréquemment posées sur le code du modèle HTML5.Que sont les modèles en HTML?
est un modèle un modèle?
et , et les fichiers CSS et JavaScript.
Lors de la conception d'une page Web, il n'y a rien de pire que d'avoir à écrire tout le code ennuyeux à partir de zéro à partir d'une page .html vierge. Nos modèles HTML5 vous fournissent tout le code de modèle HTML dont vous avez besoin pour commencer à fonctionner afin que vous puissiez commencer à travailler sur vos conceptions et contenus uniques immédiatement.
Il existe de nombreux exemples de modèles HTML5 sur Internet. Au fil du temps, vous pouvez créer vos propres modèles en fonction de la façon dont vous écrivez vous-même HTML. Notre exemple de modèle HTML5 fournit tous les éléments de base dont vous avez besoin sur la plupart des pages Web.
En tant que début très simple, vous pouvez simplement utiliser ceci:
<code class="language-html"><!DOCTYPE html> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 Boilerplate</title> <link rel="stylesheet" href="styles.css"> <h1>Page Title</h1> </code>
Les documents HTML commencent toujours par une déclaration de type de document: <!DOCTYPE html>
. Ensuite, il y a la balise , qui contient tous les autres contenus sur la page Web. Les deux éléments enfants de
sont les éléments
et
. Notre modèle HTML5 contient tout le code de démarrage de base requis pour n'importe quelle page Web.
Idéalement, oui. Les modèles HTML fournissent la quantité minimale de code pour les pages HTML afin d'effectuer toutes les actions utiles dans un navigateur Web. Vous pouvez utiliser le code de modèle HTML sur chaque page de votre site Web. En règle générale, les éléments communs du modèle seront injectés dans votre page à partir d'une seule source, comme un framework ou inclure un fichier, afin que vous puissiez mettre à jour les modèles pour toutes les pages à la fois. Notre modèle HTML5 fournit tout le code de modèle HTML dont vous avez besoin pour commencer.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!