Forget divs, semantics will save the internet

A long time ago (fifteen years ago), almost everyone made websites and did not worry about what was under the hood. Layout tables, used everything that came to hand (and came across mostly <div> and <span>) and didn't really bother about accessibility. And then HTML5 happened and away we go.





 —  ,    ,      .    —   .     — .





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