Lupakan div, semantik akan menghemat internet

Dahulu kala (sekitar lima belas tahun yang lalu), hampir semua orang membuat situs web dan tidak khawatir tentang apa yang ada di balik terpal. Tabel tata letak, menggunakan semua yang ada (dan sebagian besar ditemukan <div> dan <span>) dan tidak terlalu peduli tentang aksesibilitas. Dan kemudian HTML5 terjadi dan kita pergi.





 —  ,    ,      .    —   .     — .





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