L'élément <nav> est une section de liens de navigation. On peut l'utiliser pour la navigation principale, mais également pour d'autres parties du document devant lister des liens de navigation interne.
L'élément HTML <nav> représente une section d'une page ayant des liens vers d'autres pages ou des fragments de cette page. Autrement dit, c'est une section destinée à la navigation dans un document (avec des menus, des tables des matières, des index, etc.).
Définition et utilisation Balise nav
L'élément <nav> est destiné seulement pour les grands blocs de liens de navigation. Navigateurs, tels que les lecteurs d'écran pour les utilisateurs handicapés, peuvent utiliser cet élément pour déterminer s'il faut omettre le rendu initial de ce contenu.
L'élément <article> représente une composition autonome dans un document, une page, une application ou un site, destinée à être distribuée ou réutilisée de manière indépendante (par exemple, dans le cadre d'une syndication).
Comme toujours notre tutoriel commence par créer du HTML. Créez un élément <div> avec un id de wrap. Créez une balise <ul> dans votre élément <div> avec une classe de "navbar". La balise <ul> est utilisée pour spécifier une liste non ordonnée, qui regroupe une collection des éléments qui n'ont pas d'ordre numérique.
Cette ligne doit être écrite juste au-dessus de la div « main_pages ». Dans notre CSS, il faut dans un premier temps masquer l'icône du menu au format ordinateur. Ensuite, on doit ajouter un media query qui, au format mobile, va afficher l'icône du menu (en le centrant) et masquer les pages principales.
Pour organiser vos pages, vous pouvez utiliser une arborescence en silo, c'est-à-dire affilier les pages, en fonction d'une unité sémantique, en les hiérarchisant selon le poids des mots-clés. Ainsi vous aurez un plan de site bien structuré, et optimisé pour votre visibilité pour le web.
<section> : l'élément de section générique
L'élément HTML <section> représente une section générique d'un document, par exemple un groupe de contenu thématique. Une section commence généralement avec un titre.
L'élément HTML <head> fournit des informations générales (métadonnées) sur le document, incluant son titre et des liens ou des définitions vers des scripts et feuilles de style. Note : L'élément <head> contient principalement des données destinées au traitement automatisé et pas nécessairement lisibles par des humains.
<ul> L'élément HTML <ul> représente une liste d'éléments sans ordre particulier. Il est souvent représenté par une liste à puces.
La première chose à faire est de construire le code HTML de notre menu. Pour cela, nous allons tout simplement créer une liste à puces avec un lien par ligne. Nous ajoutons ensuite une class="menu" qui va nous permettre de cibler le menu ainsi que les éléments qui le composent avec CSS.
Pour indiquer une couleur de fond, on utilise la propriété CSS background-color . Elle s'utilise de la même manière que la propriété color , c'est-à-dire que vous pouvez taper le nom d'une couleur, l'écrire en notation hexadécimale ou encore utiliser la méthode RGB.
Si nous souhaitons enlever les puces, nous pouvons passer le paramètre list-style-type à none.
Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms.
Pour insérer un commentaire HTML, il faut utiliser la balise < ! -- -- > et placer le texte entre les deux double-tirets. Exemples : < ! -- je commente ici pour rappel -- > ; < !
Faire afficher le header
Le simple fait d'écrire <header> </header> fera afficher le bandeau avec l'image. Qui signifie que, dans cette division (div) rattachée au header (id="header"), on utilise les propriétés définies dans la feuille de style de la balise "h1" pour le header.
On peut déclarer dans une page HTML quelle CSS utiliser pour réaliser la mise en forme en mobilisant l'élément <link rel="stylesheet" href="nom-du-fichier-css"> dans la partie head .
Le CSS est généralement utilisé pour séparer le contenu (HTML, XHTML, XML) de sa mise en forme. Cela permet une maintenance simplifiée selon qu'il faille en modifier son aspect ou son contenu.
Header vs Head
Les termes sont presque identiques, mais l'un décrit une section de la page que les gens voient et avec laquelle ils interagissent, tandis que l'autre décrit une zone du code HTML de la page qui indique aux services tiers de quoi traite la page.
Il est fortement conseillé de permettre à l'internaute d'accéder, via le footer, aux réseaux sociaux de l'entreprise. Pour cela, il faut ajouter les icônes des réseaux sociaux en question et y intégrer un lien vers les pages de l'entreprise ou bien intégrer un flux RSS accessible par un lien sur une image en HTML.
CSS (Cascading Style Sheets) permet de créer des pages web à l'apparence soignée.