Oubliez les divs, la sémantique sauvera Internet

Il y a longtemps (il y a une quinzaine d'années), presque tout le monde créait des sites Web et ne se souciait pas de ce qu'il y avait sous le capot. Les tableaux de mise en page utilisaient tout ce qui était sous la main (et rencontraient principalement <div> et <span>) et ne se souciaient pas vraiment de l'accessibilité. Et puis HTML5 est arrivé et c'est parti.





 â€”  ,    ,      .    â€”   .     â€” .





: , . <div> — , . .





.   ,  â€” , . .  , ,  ,   .





«» ,   , ,   ,   .   . ,    .    ,    .





 . , ,   ,  , ,  ,        .





 â€” «»   Google.





tutu.ru <table>



<div>



      Google   .





 .   <div id="nav">



.   HTML , <div>



<span>



.   .





  , <nav></nav>



<div class="nav"></div>



. .   ,  .





<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title> </title>
  </head>
  <body>
    <header class="main-header">
      <!—   —>
    </header>
    <main>
      <!—    —>
    </main>
    <footer class="main-footer">
      <!—   —>
    </footer>
  </body>
</html>
      
      



HTML

«»   HTML  â€” , <p>



, . <i>



<b>



 ,   ,   .





   HTML Living Standard ,   . .





<article>

  • : , , , , ,     .





  • : .





  • :   <section>



    <div>



    .





<section>

  • : . ,    <article>.





  • : .





  • :   <article>



    <div>



    .





<aside>

  • : , .





  • : .  .





  • : <aside>



    « »   ,   .





<nav>

  • :     .





  • : ,    .  â€”   . ,     <nav>



    .   (,  ,  ) â€”   , <footer>



     .





  • : , <nav>



    ,     .





<header>

  • : ,  .   .





  • :  .





  • : .





<main>

  • : ,     , .





  • :  ,  .





  • :    ,   (,   ).





<footer>

  • : ,  , ,   .   .





  • :  . <footer>



        .





  • : .





 

    .





  1.   . : <header>, <main>, <footer>



    .





  2.  . : <nav>, <section>, <article>, <aside>



    .





  3.   . : <h1>-<h6>



    .





  4.   . , , -,  , , ,  .





  5. . , , , ,   .





,

.





  •  â€” .





  •  â€” <div>



    .





  • ( ) â€” <span>



    .





<article>, <section>



<div>



:





  1.     ? — <article>







  2. ,      ? — <section>







  3.   ? - «  Â» « »? — <div>







 

  . CSS.





, , , .  ,   -, ,  , .  .





:





  1. <blockquote>



      ,    . ,     ,    , .





  2. <ul>



    «» . , ,  -,   <ul>



    <li>



      .





  3. <p>



    , .   .





  ,   CSS.





 .






  «  Â»   HTML Academy. HTML CSS « ». SKUCHNO .





, .








All Articles