Vergessen Sie Divs, Semantik wird das Internet retten

Vor langer Zeit (vor ungefähr fünfzehn Jahren) machten fast alle Websites und machten sich keine Sorgen darüber, was sich unter der Haube befand. Layout-Tabellen verwendeten alles, was zur Hand war (und meistens auf <div> und <span> stieß) und kümmerten sich nicht wirklich um die Barrierefreiheit. Und dann passierte HTML5 und los geht's.





 —  ,    ,      .    —   .     — .





: , . <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