Structure HTML Materialize:structure HTML
1. Disposition de la page
Exemple de contenu
La page de démonstration ci-dessus peut être découpée en entités logiques.
Découpage HTML en entités logiques
Le tableau ci-dessous reprend la définition des différentes entités avec leur correspondance dans le code HTML.
Entité |
Description |
Lignes HTML |
1 |
Barre de navigation Contient le titre à gauche et les icônes d’action à droite. |
28 à 40 |
2 |
Titre |
30 |
3 |
Actions Icônes permettant d’initier une action. |
31 à 38 |
4 |
Contenu Bloc contenant le contenu de la page. |
42 à 59 |
5 |
Bloc Bloc de type ICON. |
45 à 51 |
6 |
Bloc Bloc de type BIG_TEXT avec un footer. |
45 à 57 |
La page est découpée en sections correspondant au code HTML ci-dessous :
01: <!DOCTYPE html>
02: <html>
03: <head>
04: <!--Import Google Icon Font-->
05: <link
06: href="https://fonts.googleapis.com/icon?family=Material+Icons"
07: rel="stylesheet">
08: <!--Import materialize.css-->
09: <link type="text/css" rel="stylesheet"
10: href="css/materialize.min.css"
11: media="screen,projection"/>
12: <meta charset="UTF-8">
13: <!--Let browser know website is optimized for mobile-->...