Web 2017-02-16 : Différence entre versions

De an
Aller à : navigation, rechercher
 
m (1 révision importée)
 
(Aucune différence)

Version actuelle en date du 6 mai 2019 à 20:57

Les balises obligatoires

<html>, <head>, <body>

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

Les balises "meta"

<link>
pour lier à une feuille de styles
<meta>
ajouter diverse metadonnées
<script>
pour lier à un script javascript
<head>
    <title>Mon titre</title>
    <meta charset="UTF-8" />
    <script src="mon_script.js"></script>
    <link rel="stylesheet" href="ma_feuille_de_style.css">
</head>

Les balises pour compartimenter une page

Pour en savoir plus: https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html

<div>
signifie 'diviser'. C'est la balise générique que l'on utilise pour ajouter de la structure lorsque qu'aucune autre balise n'est aappropriée.
<aside>
contenu périphérique, par exemple un encart dans un article
<nav>
contient la navigation principale
<section>
pour créer des sections sur un site
<article>
utilisé pour baliser un article complet (titre, intro, contenu, date de publication, etc.)
<header>
utilisé pour grouper les informations d'entête
<footer>
utilisé pour grouper les informations de pied de page (exemple: signature de l'auteur, etc.)
<body>
    <h1>Ma page</h1>

    <section class="last-articles">
        <article>...</article>
        <article>...</article>
        <article>...</article>
    </section>

    <section class="most-popular">
        <article>...</article>
        <article>...</article>
        <article>...</article>
    </section>
</body>

Les balises pour structurer des niveaux d'information

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
titre, sous-titre, etc.
<p>
paragraphe
<ol>
liste ordonnée (exemple: table des matières)
<ul>
liste non-ordonnée (exemple: liste d'ingrédients dans une recette)
<li>
élément de liste
<img>
balise image
<figure>
balises figure
<figcaption>
légende d'une figure

Les balises en ligne

<strong>
contenu important, souvent traduit graphiquement par du gras
<em>
emphase, souvent traduit graphiquement par de l'italique
<a>
lien
<span>
balise générique pour

Autre

<iframe>
inclure une page dans une autre