Тег header: Правильное использование тега в HTML5

Leave a Comment / Разное / By /

Содержание

HTML тег

Тег <header> определяет верхний колонтитул, “шапку” страницы или раздела. В этой части обычно содержится логотип, навигационное меню, форма поиска по сайту и т.д.

Тег <header> новый элемент в HTML 5. В HTML документе допускается использование нескольких элементов <header>, которые могут располагаться в любой его части.

Запрещается вкладывать тег внутрь элементов <footer> и <address>, а также внутрь другого тега .

Синтаксис¶

Содержимое тега пишется между открывающим (<header>) и закрывающим (</header>) тегами.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      li {
        display: inline-block; 
        margin-right: 10px;
        color: #778899;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <ul>
                   <li>Главная</li>
                   <li>О нас</li>
               </ul>
          </nav>
          <h2>Добро пожаловать на наш сайт</h2>
          <hr>
      </header>
      <article>
         <header>
              <h3>Заголовок раздела</h3>
              <p>Абзац текста.</p>
         </header>
      </article>
   </body>
</html>
Попробуйте сами!

Результат¶

Атрибуты¶

Тег <header> поддерживает глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <header> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <header>:

Цвет текста внутри тега <header>:

Стили форматирования текста для тега <header>:

Другие свойства для тега <header>:

Поддержка браузера


Правильное использование тега в HTML5



Я читал, что тег — это заголовок раздела. Он может быть использован более 1 раза в документе.

Должен ли я использовать тег <header> в этом разделе:

<section>
<header>
</header>
</section>

или выше <section> , как:

<header>
</header>
<section>
</section>

Возможно ли иметь эту структуру для информации о заголовках и разделах:

<section>

    <header>
      <h2>My Results</h2>
    </header>

    <section>
        <section>
           <h3>Title</h3>
           <div></div>
        </section>
        <section>
           <h3>Title</h3>
           <div></div>
        </section>
       .
       .
       .
    </section>

</section>

считаете ли вы, что этот пример хорош для семантического использования заголовка и раздела тегов HTML5?

Или мне следует использовать вместо <section> тег <main> ?

html semantic-markup
Поделиться Источник Mutatos     17 апреля 2014 в 11:37

2 ответа

  • Правильное использование тегов article, aside и header

    У меня есть простой шаблон страницы, который имеет боковую панель слева и основную область содержимого справа. Правильно ли это использование тегов article, aside и header? Кроме того, предполагается ли, что вы прикрепляете классы/идентификаторы к элементам html5 (т. е. article class=example ) или…

  • Правильное использование HTML5 <header> и заголовка

    Я понимаю, что семантически приемлемо использовать несколько элементов header на странице. Согласно http://html5doctor.com/the-header-element/ , основное ограничение на его использование заключается в том, что он должен содержать элемент заголовка. Тогда кажется логичным, что каждый <header>…


1

Ваши два случая имеют разное значение:

Здесь section имеет header :

<section>
<header>
</header>
</section>

Здесь Родительский раздел (*) имеет header и дочерний section (который не имеет

header ):

<header>
</header>
<section>
</section>

(* может быть разделяющим элементом, например article / section / nav / aside , или секционирующий корень типа body /etc.)

Оба случая возможны, это зависит от смысла вашего контента.

См. мой ответ на соответствующий вопрос, который содержит пример документа с различными элементами header .

Поделиться unor     17 апреля 2014 в 14:03


0

Не используйте секцию в качестве обертки для укладки. правильный путь-это

<body>
    <header>        
            <h2>Header in h2</h2>
            <h3>Subheader in h3</h3>        
    </header>    
    <section>
        <article>
            <header>
                <h2>Article #1</h2>
            </header>
            <section>
                This is the first article.
            </section>
        </article>
        <article>
            <header>
                <h2>Article #2</h2>
            </header>
            <section>
                This is the second article.  
            </section>
        </article>
    </section>
    <aside>
        <section>
            <h2>Links</h2>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </section>        
    </aside>
    <footer>Footer</footer>
</body>

О разделе и заголовке нажмите здесь и для html5 возможных ошибок здесь

Ваш html должен быть

<body>
    <header>
        <h2>Search Form</h2>
    </header>
    <section>
       <h2>Search Result Title</h2>
       <ul>
           <li></li>
           <li></li>
       </ul>
       <ul>
        <li></li>
           <li></li>
      </ul>        
       <article>
         <ul>
           <li></li>
           <li></li>
         </ul>
       </article>
       <articlefar fa-copy"/> Поделиться




Animesh    

 17 апреля 2014 в 11:57
 













	 
Похожие вопросы:
 




	
	
	
HTML5-правильное использование тега  <article> 
		

		 Читая статью о теге <article> на HTML5, я действительно думаю, что моя самая большая путаница заключается в первом вопросе этого раздела: Использование <article> придает содержимому.
 
 
 ..
		

	
	
	
	
	
В HTML5 могут ли теги  <header>  и  <footer>  появляться вне тега  <body> ?
		

		 В настоящее время я использую вышеуказанные теги таким образом (классический порядок тегов): <html> <head>...</head> <body> <header>...</header>...
		

	
	
	
	
	
HTML5: как я могу стилизовать свою секцию  <header>,  <footer>  в центральное положение?
		

		 Я обнаружил, что в HTML5 нам нужно использовать тег <header> , <footer> вместо тега <div> , лучший подход? Однако я не могу найти никакого решения для стилизации в центральное...
		

	
	
	
	
	
Правильное использование тегов article, aside и header
		

		 У меня есть простой шаблон страницы, который имеет боковую панель слева и основную область содержимого справа. Правильно ли это использование тегов article, aside и header? Кроме того,...
		
  
Правильное использование HTML5  <header>  и заголовка
		

		 Я понимаю, что семантически приемлемо использовать несколько элементов header на странице. Согласно http://html5doctor.com/the-header-element/ , основное ограничение на его использование заключается...
		

	
	
	
	
	
Правильное использование HTML5 элементов и структуры
		

		 Мне нужно преобразовать PSD в HTML5/CSS. у меня возникли проблемы с поиском окончательного ответа на то, какие элементы использовать. Мой макет состоит из верхнего колонтитула, содержимого/боковой...
		

	
	
	
	
	
HTML5 & CSS: Форматирующие якоря, ширина  <header>
		

		 Я столкнулся со странной проблемой форматирования CSS, когда изменил блок <div id=header> на блок HTML5 <header> . В принципе, я хочу, чтобы ссылки внутри блока <header> были...
		

	
	
	
	
	
Содержание тега  <header> 
		
 

		 Мне интересно, каким должно быть содержание тега <header> на веб-страницах html5. Кто-то сказал мне, что содержание не включает в себя номера телефонов.. это правда? 
		

	
	
	
	
	
 <Header>  тег HTML5 внутри div
		

		 просто интересно, это плохая практика помещать тег <header> внутри тега div при проектировании сайта, который в основном использует элементы html5 , а doctype предназначен для html5? Спасибо!. ..
		

	
	
	
	
	
Каково использование тега  <header>  в HTML?
		

		 Это не совсем для меня ясно, что самое лучшее использование тега <header> является. У меня была эта небольшая дискуссия с кем-то на моей стажировке, и он сказал, что вы хотели бы использовать...
		

	
	
	




					 
 тег HTML5 внутри div
 
							
						








просто интересно, это плохая практика помещать тег  <header>  внутри тега div при проектировании сайта, который в основном использует элементы  
 html5 , а doctype предназначен для html5? Спасибо!





Кроме того, должен ли я поместить  Nav  снаружи заголовка или внутри, или это действительно имеет значение?

 


 




	
	html
	
	seo
	






 Поделиться


 Источник


crsMC    

 28 апреля 2014 в 18:10
 





3 ответа










  • 
			HTML5 & CSS: Форматирующие якоря, ширина  <header>
			
    
			 Я столкнулся со странной проблемой форматирования CSS, когда изменил блок <div id=header> на блок HTML5 <header> . В принципе, я хочу, чтобы ссылки внутри блока <header> были определенного цвета и не получали никакого украшения. Соответствующие коды HTML и CSS выглядят следующим...
			
    
		
    • 
		
	

	
		
		
  • 
			HTML5 тэг поведения В. поведения в тег div 
			
    
			 У меня есть два идентичных раздела кода, где есть три div, содержащихся внутри родительского тега. Один родительский тег - это тег HTML5, а другой-тег div с классом .footer. Я дал этим двум разделам идентичный код css, но получаю разные результаты. Я изменяю размер высоты первого содержащегося...
			
     
    
		
    • 
		
	

	

	

	

	

	
















2




Я не считаю, что это плохая практика. Тем не менее, все же убедитесь, что вы поместили его в общую область, где он должен быть.





Вот  ссылка , которая может помочь вам понять расположение вашего заголовка. 

 


 







 Поделиться




Josef E.    

 28 апреля 2014 в 18:15
 
















2




Нет, до тех пор, пока вы уважаете семантику контента и что ваш заголовок содержит информацию о заголовке. Вы можете обернуть его в div без каких-либо недостатков SEO.

 


 







 Поделиться




web-tiki    

 28 апреля 2014 в 18:15
 
















1




Нет, не строго, но есть некоторая контекстуальная семантика, которая подразумевается путем встраивания  header  под элементы, отличные от тела. В зависимости от того, как вы структурируете документ, вы можете столкнуться с неожиданным поведением. Смотреть ниже.





HTML5, насколько я могу судить,-это тип документа без DTD. Который не применяет строгих правил в отношении проверки структуры документа. Согласно документу W3C на  HTML5  г.:





 

  
... элемент заголовка представляет вводный контент для своего ближайшего предка, разделяющего контент или разделяющего корневой элемент. Заголовок обычно содержит группу вводных или навигационных пособий.   [1]

 






В принципе, это, по-видимому, указывает на то, что если элемент  header  находится непосредственно под  body  документа, он применяется к странице в целом, но если он содержится под другим элементом, который идентифицирует раздел, то  header  применяется более конкретно к ближайшему предку.





Однако имейте в виду, что a  <div>  не является секционирующим элементом, как указал  Томаш Зелинский . Сначала я так и думал. Если вы хотите, чтобы ваш заголовок применялся только к определенному разделу страницы, лучше всего использовать один из определенных элементов секционирования, чтобы охватить заголовок, как определено здесь:  http://www.w3.org/TR/html5/разделы.  html
 




E.g.





<div>
  <section>
    <header>...</header>
  </section>
</div>

  Поделиться  Sean Quinn     28 апреля 2014 в 18:19 
  •  Тег HTML5  <header>  не распознан в файле xhtml
     Я создаю веб-приложение JSF и в настоящее время формулирую файл template.xhtml . Внутри моего файла xhtml я создал верхний и Нижний колонтитулы, используя элементы div. Однако, читая о HTML5, я понимаю, что теперь вы можете использовать теги <header> и <footer> . При попытке...
  •  Правильное использование тега  <header>  в HTML5
     Я читал, что тег - это заголовок раздела. Он может быть использован более 1 раза в документе. Должен ли я использовать тег <header> в этом разделе: <section> <header> </header> </section> или выше <section> , как: <header> </header> <section>...
Похожие вопросы:
 
Может ли тег  <header>  содержаться внутри тега  <aside>  в HTML5?
 Мне интересно, будет ли эта конструкция семантически правильной в HTML5. <html> <head></head> <body> <aside> <header> <h2></h2> </header>...
 
Это нужно, чтобы обернуть оборудованием (тег ul) в тег div или книжка?
 Я видел, как некоторые люди оборачивают свою навигацию (тег <ul> ) внутри <div> , а у <div> просто есть свойства margin/padding CSS, примененные к нему. Мы можем просто стилизовать...
 
Какой тег html5 я должен использовать внутри тега figure
 Тег figure отображает вертикальную полосу 2d, отображающую определенные значения для продаж. тег figcaption отображает метку Sales. Какой тег html5 для дивов внутри рисунка я должен использовать?. ..
 
HTML5 & CSS: Форматирующие якоря, ширина  <header>
 Я столкнулся со странной проблемой форматирования CSS, когда изменил блок <div id=header> на блок HTML5 <header> . В принципе, я хочу, чтобы ссылки внутри блока <header> были...
 
HTML5 тэг поведения В. поведения в тег div
 У меня есть два идентичных раздела кода, где есть три div, содержащихся внутри родительского тега. Один родительский тег - это тег HTML5, а другой-тег div с классом .footer. Я дал этим двум разделам...
 
Тег HTML5  <header>  не распознан в файле xhtml
 Я создаю веб-приложение JSF и в настоящее время формулирую файл template.xhtml . Внутри моего файла xhtml я создал верхний и Нижний колонтитулы, используя элементы div. Однако, читая о HTML5, я...
 
Правильное использование тега  <header>  в HTML5
 Я читал, что тег - это заголовок раздела. Он может быть использован более 1 раза в документе. Должен ли я использовать тег <header> в этом разделе: <section> <header>...
 
Почему тег  <header>  наследуется иначе, чем div с идентификатором "header"?
 У меня есть страница HTML, где ссылки по умолчанию указаны синими для большей части тела. Я speficy это так (используя SASS): a:link { color: $link_new; // This is a blue colour } У меня есть...
 
Является ли тег HTML5  <header>  ненужным, если внутри него есть только один тег  <hx> ?
 Я искал и не нашел никаких полезных ответов, так что вот вам: Является ли тег HTML5 <header> ненужным, если внутри него есть только один тег <hx> ? Например, у меня есть следующее HTML5...
 
Является ли тег  <header>  чисто семантическим или я могу использовать его как тег  <div>  и стилизовать его?
 С тех пор как HTML5 ввел некоторые новые теги, такие как верхний, нижний колонтитулы, в сторону, nav и т. д. Я хотел знать, было ли хорошей практикой использовать эти теги так, как будто они были...
Разделы документа в HTML5
Структура документа В HTML5 состоит из разделов и подразделов. Разделы могут быть представлены в виде схем документа по аналогии с оглавлением. Каждый секционный элемент имеет свою собственную схему, поэтому каждый раздел можно начинать с заголовка <h2>.
Браузеры могут обрабатывать эту информацию для создания содержания (оглавления) документа, которое впоследствии будет использоваться ассистивными (вспомогательными) технологиями для облегчения навигации по статье или поисковыми системами для улучшения результатов поиска.
Схема состоит из списка одного или более вложенных разделов. Раздел (секция) представляет собой контейнер, который соответствует некоторым узлам в исходном дереве DOM. Раздел в данном случае не является элементом <section>, он просто подразумевает его концепцию. Каждый раздел может иметь один заголовок, связанный с ним, а также любое количество дополнительных вложенных разделов.
Также отдельно выделяют корневые секционные элементы. Они отличаются от секционных элементов, но могут также иметь схему.
Элементы, формирующие разделы HTML-документа
1. Элемент <body>
Категории контента: корневой секционный.
Контекст, в котором этот элемент может быть использован: как второй элемент в элементе <html>.
Пропуск тегов: начальный тег <body> может быть опущен, если элемент пуст, или если первое, что внутри элемента не является пробелом или комментарием, за исключением случаев, когда первое, что идет за тегом <body> являются элементы <meta>, <link>, <script> или <style>.
Закрывающий тег </body> может быть опущен, если перед ним нет комментария.
<!DOCTYPE html>
  <title>Тест</title>
   <h2>Тестовая страница</h2>
Элемент <body> представляет содержимое документа.
Для элемента доступны ‎глобальные атрибуты, а также атрибуты, приведенные в таблице ниже.
Элемент <body> предоставляет в качестве атрибутов ряд обработчиков событий объекта Window — onblur, onerror, onfocus, onload, onresize и onscroll.
Таблица 1. Атрибуты элемента <body>
АтрибутОписание, принимаемое значение
onafterprintСобытие, срабатывающее после отправки страницы на печать или после закрытия окна печати.
onbeforeprintСобытие, срабатывающее перед отправкой страницы на печать.
onbeforeunloadСобытие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу.
onhashchangeСобытие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2.
onlanguagechangeСобытие срабатывает при изменении предпочтительных языков.
onmessageСобытие происходит, когда сообщение получено через источник события.
onofflineСобытие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало.
ononlineСобытие вызывается браузером в том случае, когда соединение с интернет возобновилось.
onpagehideСобытие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т. д.
onpageshowСобытие происходит, когда пользователь переходит на веб-страницу, после события onload.
onpopstateСобытие срабатывает, когда пользователь просматривал историю сеанса.
onrejectionhandledСобытие возникает, когда Promises отклоняются.
onstorageСобытие срабатывает при изменении места хранения.
onunhandledrejectionСобытие используется для обработки необработанных событий отказа.
onunloadСобытие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера.
В этом примере на странице обновляется индикатор, показывающий, находится ли пользователь в сети:
<!DOCTYPE html>
<html>
  <head>
    <title>Онлайн или офлайн?</title>
    <script>
      function update(online) {
        document.getElementById('status').textContent =
        online ? 'Онлайн' : 'Офлайн';
      }
    </script>
  </head>
  <body ononline="update(true)"
    onoffline="update(false)"
    onload="update(navigator.onLine)">
    <p>Вы: <span>(Статус неизвестен)</span></p>
  </body>
</html>
2. Элемент <article>
Категории контента: потоковое содержимое, секционное содержимое, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Элемент <article> представляет собой законченное или автономное произведение в документе, странице, приложении или сайте. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>.
Общее правило заключается в том, что элемент <article> уместен только в том случае, если содержимое элемента будет явно указано в схеме документа. Каждая статья должна быть идентифицирована, обычно путем включения заголовка (элемент <h2-h6>) в качестве дочернего элемента элемента <article>.
<article>
    <header>
        <h3><a href="https://herbert.io">Короткая заметка о ношении шорт</a></h3>
        <p>Опубликовано в пятницу, 13 марта 2020 Патриком Люком.
            <a href="https://herbert.io/short-note/#comments">6 комментариев</a></p>
    </header>
    <p>Попутчик задал интересный вопрос: почему вы носите шорты, а не длинные брюки? Человек носил брюки-кюлоты как время, поэтому я считал вопрос двусмысленным по своей природе, но я попытался дать честный ответ, несмотря на сомнительную одежду спрашивающего.</p>
    <p>Короткий ответ: мне нравится носить шорты, длинный ответ ...</p>
    <p><a href="https://herbert.io/short-note/">Продолжить чтение: Короткая заметка о ношении шорт</a></p>
</article>
<section>               
      <article>
        <h3><a href="">Весна приходит (и уходит) в графстве Суссекс</a></h3>        
        <p>Вчера я присоединился к Brooklyn Bird Club для нашей ежегодной поездки в Западный Нью-Джерси, в частности, в Hyper Humus, относительно недавно обнаруженную «горячее место».</p>
      </article>

      <article>
        <h3><a href="">Как стать бердвотчером?</a></h3>        
          <p>Птицы — почти единственная связь современного городского человека с дикой природой.  Благодаря бердвотчингу вы, скорее всего, начнете больше путешествовать, причем по самым неожиданным местам. Если у вас есть дети, можно изучать птиц вместе — это идеальное семейное хобби. </p>
      </article>  
  
    <nav>
      <a href="">&laquo; Предыдущие записи</a>
    </nav>
  </section>
Для элемента доступны ‎глобальные атрибуты.
3. Элемент <section>
Категории контента: потоковое содержимое, секционное содержимое, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Элемент <section> представляет общий раздел документа или приложения, группируя тематическое содержимое. Каждый раздел должен быть идентифицирован, обычно путем включения заголовка (элемент <h2-h6>) в качестве дочернего элемента <section>.
Примерами разделов могут быть главы, различные страницы во вкладках или пронумерованные разделы. Домашняя страница веб-сайта может быть разбита на разделы для введения, новостей и контактной информации.
Авторам рекомендуется использовать элемент <article> вместо элемента <section>, когда контент завершен или самодостаточен.
Элемент <section> не является универсальным контейнерным элементом. Когда элемент нужен только для стилизации или для удобства написания сценариев, рекомендуется использовать вместо этого элемент <div>. Общее правило заключается в том, что элемент <section> уместен только в том случае, если содержимое элемента будет явно указано в схеме документа.
<article>
  <header>
    <h3>Яблоки</h3>
    <p>Вкусные, восхитительные фрукты!</p>
  </header>
  <p>Яблоко является плодом яблони. </p>
  <section aria-label="Красные яблоки">
    <h4>Ред Делишес</h4>
    <p>Эти ярко-красные яблоки чаще всего встречаются во многих супермаркетах.</p>
  </section>
  <section aria-label="Зеленые яблоки">
    <h4>Гренни Смит</h4>
    <p>Эти сочные зеленые яблоки станут отличной начинкой для яблочных пирогов.</p>
  </section>
</article>
Для элемента доступны ‎глобальные атрибуты.
<article> внутри <section>
Можно создавать родительские элементы <section> с вложенными элементами <article>, в которых есть один или несколько элементов <article>. Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента <section>
<section>
  <h2>Заметки о природе</h2>
    <article>
      <h3>...</h3>
      <p>...</p>
    </article>
    <article>
      <h3>...</h3>
      <p>...</p>
    </article>
</section>
<section>
  <h2>Исторические заметки</h2>
    <article>
      <h3>...</h3>
      <p>...</p>
    </article>
    <article>
      <h3>...</h3>
      <p>...</p>
    </article>
</section>
4. Элемент <nav>
Категории контента: потоковое содержимое, секционное содержимое, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Элемент <nav> представляет собой раздел страницы с навигационными ссылками, который ссылается на другие страницы или части внутри страницы, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>.
В случаях, когда содержимое элемента <nav> представляет список элементов, рекомендуется использовать разметку списка. Не заменяет теги <ul> или <оl>, он просто их обрамляет.
Не все группы ссылок на странице должны быть обернуты элементом <nav> — этот элемент предназначен главным образом для разделов, состоящих из основных навигационных блоков. В частности, нижние колонтитулы обычно имеют краткий список ссылок на различные страницы сайта, такие как условия обслуживания, домашняя страница и страница об авторских правах. Для таких случаев достаточно одного элемента <footer>.
<body>
  <h2>Вики-центр</h2>
  <nav>
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/events">Текущие события</a></li>
      ...
    </ul>
  </nav>
  <article>
    <header>
      <h3>Афиша мероприятий</h3>
    </header>
    <nav>
      <ul>
        <li><a href="#public">Лекции</a></li>
        <li><a href="#practice">Практические занятия</a></li>
        ...
      </ul>
    </nav>
    <div>
      <section>
        <h3>Лекции</h3>
        <p>...</p>
      </section>
      <section>
        <h3>Практические занятия</h3>
        <p>...</p>
      </section>
      . ..more...
    </div>
    <footer>
      <p><a href="?edit">Редактировать</a> | <a href="?delete">Удалить</a> | <a href="?rename">Переименовать</a></p>
    </footer>
  </article>
  <footer>
    <p><small>© 2020 Вики-центр</small></p>
  </footer>
</body>
В качестве элементов панели навигации можно использовать не только элементы списков:
<nav>
  <p><a href="">...</a></p>
  <p><a href="">...</a></p>
</nav>
Также можно добавлять заголовки внутрь элемента:
<nav>
  <h3>...</h3>
    <ul>
      <li><a>...</a></li>
      <li><a>...</a></li>
      <li><a>...</a></li>
    </ul>
</nav>
Для элемента доступны ‎глобальные атрибуты.
5. Элемент <aside>
Категории контента: потоковое содержимое, секционное содержимое, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Элемент <aside> представляет раздел страницы, который состоит из содержимого, косвенно связанного с родительским секционным элементом и который можно рассматривать отдельно от него. Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.
<aside>
  <h3>Швейцария</h3>
  <p>Швейцария, страна в центре географической Европы, не имеющая выхода к морю, не присоединилась к геополитическому Европейскому союзу, хотя она подписала ряд европейских договоров. </p>
</aside>
<body>
  <header>
    <h2>Мой замечательный блог</h2>
    <p>Мой слоган</p>
  </header>
  <aside>
    <nav>
      <h3>Мой блогролл</h3>
      <ul>
        <li><a href="https://blog.example.com/">Интересная ссылка</a>
      </ul>
    </nav>
    <nav>
      <h3>Архивы</h3>
      <ol reversed>
        <li><a href="/last-post">Моя последняя запись</a>
        <li><a href="/first-post">Моя первая запись</a>
      </ol>
    </nav>
  </aside>
  <aside>
    <h3>Мой Twitter</h3>
    <blockquote cite="https://twitter.example.net/t31351234">
      Я в отпуске, пишу для своего блога.
    </blockquote>
    <blockquote cite="https://twitter.example.net/t31219752">
      Я скоро пойду в отпуск.
    </blockquote>
  </aside>
  <article>
    <h3>Моя последняя запись</h3>
    <p>Это моя последняя запись.</p>
    <footer>
      <p><a href="/last-post" rel=bookmark>Ссылка</a>
    </footer>
  </article>
  <article>
     <h3>Моя первая запись</h3>
    <p>Это моя первая запись.</p>
    <aside>
        <h2>Публикация</h2>
        <p>Пока я думаю об этом, я хотел бы сказать кое-что о публикациях. Опубликовывать статьи - это весело!</p>
    </aside>
    <footer>
      <p><a href="/first-post" rel=bookmark>Ссылка</a>
    </footer>
  </article>
  <footer>
    <nav>
      <a href="/archives">Архивы</a> —      <a href="/about">Обо мне</a> —      <a href="/copyright">Copyright</a>
    </nav>
  </footer>
</body>
Для элемента доступны ‎глобальные атрибуты.
6. Элементы <h2>, <h3>, <h4>, <h5>, <h5> и <h6>
Категории контента: потоковое содержимое, секционное содержимое, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Элементы <h2-h6> представляют заголовки для своих разделов. Эти элементы имеют ранг, определяемый числом в их имени. Элемент <h2> имеет наивысший ранг, элемент <h6> имеет наименьший ранг, а два элемента с одинаковым именем имеют одинаковый ранг. Используйте ранг элементов заголовка, чтобы создать схему документа.
Элементы <h2 – h6> не должны использоваться для разметки подзаголовков, альтернативных заголовков и слоганов, если только они не предназначены для заголовка нового раздела или подраздела.
<body>
<h2>Заголовок верхнего уровня</h2>
 <section><h3>Заголовок второго уровня</h3>
  <section><h4>Заголовок третьего уровня</h4>
   <section><h5>Заголовок четвертого уровня</h5>
    <section><h5>Заголовок пятого уровня</h5>
     <section><h6>Заголовок шестого уровня</h6>
     </section>
    </section>
 </section>
</section>
</section>
</body>
Для элементов доступны ‎глобальные атрибуты.
Категории контента: потоковое содержимое, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны ‎глобальные атрибуты.
Элемент <header> представляет вводное содержимое для его ближайшего предка — элемента <main> или элемента из категории секционного содержимого или корневого секционного элемента. Элемент <header> обычно содержит группу вводных или навигационных элементов.
Если элемент <header> является ближайшим предком элемента <body> и не находится внутри <main>, он представляет вводное содержимое для страницы в целом.
Элемент <header> обычно содержит заголовок раздела (элемент <h2–h6>), но это не обязательно. Элемент <header> также можно использовать как элемент-обертку для оглавления раздела, формы поиска или любых уместных логотипов. В документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.
Элемент <header> не является секционным содержимым, он не вводит новый раздел.
<article>
  <header>
    <h2>Flexbox: Полное руководство</h2>
    <aside>
      <header>
        <h3>Автор: Wes McSilly</h3>
        <p><a href="./wes-mcsilly/">Связаться с ним!</a></p>
      </header>
      <p>Эксперт в Flexbox.</p>
    </aside>
  </header>
  <p><ins>Руководство о Flexbox должно было быть здесь, но оно оказалось, что Wes не был экспертом по Flexbox.</ins></p>
</article>
Элемент <header> может содержать только <header> или <footer>, если они сами находятся внутри <article>, <aside>, <nav> или <section>.
Категории контента: потоковое содержимое, видимое содержимое.
Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.
Пропуск тегов: ни один из тегов не может быть пропущен.
Для элемента доступны ‎глобальные атрибуты.
Элемент <footer> представляет нижний колонтитул для его ближайшего предка элемента <main>, или элемента из категории секционного содержимого или корневого секционного элемента.
Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.
...
  <footer>
    <nav>
      <section>
        <h3>Статьи</h3>
        <p><img src="images/somersaults.jpeg" alt=""> Посетить спортзал с нашим классом сальто! Наш учитель Джим проведет вас через шаги в этой статье из двух частей. <a href="articles/somersaults/1">Часть 1</a> · <a href="articles/somersaults/2">Часть 2</a></p>
        <p><img src="images/crisps.jpeg"> Чипсы закончились, теперь осталась только картошка. Что вы можете с этим сделать? <a href="articles/crisps/1">Читать далее...</a></p>
      </section>
      <ul>
        <li> <a href="/about">О нас...</a>
        <li> <a href="/feedback">Связаться с нами!</a>
        <li> <a href="/sitemap">Карта сайта</a>
      </ul>
    </nav>
    <p><small>© 2020 The Snacker — <a href="/tos">Условия обслуживания</a></small></p>
  </footer>
</body>
В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>. Также, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.
По материалам Sections
тег  и его применение
 тег <header> и его применение
 >
Назначение и применение тега <header>  Данный тег используется для обозначения шапки сайта, в нем обычно заключается  заголовок сайта, краткое описание. Также навигация по сайту и другие элементы, которые наиболее важны и используются на всех страницах. Это может быть например телефоны организации, адрес, слоган, главное изображение.

Тег <header> обязателен, кроме того что в коде он обозначает содержимое шапки сайта, на него так же обращают внимание поисковые роботы при индексации страницы. В некоторых случаях в этот тег заключают заголовок статьи если он состоит из множества дополнительных элементов, которые озаглавливают статью.

Примерное содержание тега <header>, которое содержится в теге <header> этого сайта на момент написания этого описания.
<header>
<hgroup>
<h2><a href="../index.php">Свой сайт это просто</a></h2>
<h3>

Блокнот+ локальный сервер+ FTP клиент+ домен+ хостинг= свой сайт<br>

пишим сайт в блокноте и не зависим от конструкторов и CMS
</h3>
</hgroup>
<nav>
<ul>
<li><a href="../delaem_sait">Делаем сайт</a></li>
<li><a href="../html_tegi">HTML теги</a></li>
<li><a href="../css_verstka">Верстка CSS</a></li>
<li><a href="../php_skripty">PHP скрипты</a></li>
</ul>
</nav>
</div>
</header>
Этот тег, его содержимое это лицо сайта, в стиле CSS для этого тега обычно указывается тематическое изображение или фон тела шапки сайта, указываются стили для заголовка, который заключается в теге <h2>, и стили подзаголовка краткого описания основной тематики сайта. Тег <hgroup> в данном случае используется для группировки двух заголовков, это не обязательно, просто в качестве примера.

Тег header — заголовок документа
header элемент представляет группу вводных или навигационных средств.
Note: header элемент предназначен обычно для включения названия раздела (h2 - h6 элемент или hgroup  элемент), но это не требуется. header  элемент также может быть использован для упаковки таблицы разделяемого содержания, формы поиска, или любых логотипов.
Вот некоторые примеры заголовков. Это первая для игры:
<header>
 <p>Welcome to...</p>
 <h2>Voidwars!</h2>
</header>
Следующий фрагмент показывает, как элемент может быть использован для разметки заголовка на спецификации:
<header>
 <hgroup>
  <h2>Scalable Vector Graphics (SVG) 1.2</h2>
  <h3>W3C Working Draft 27 October 2004</h3>
 </hgroup>
 <dl>
  <dt>This version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/">http://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd>
  <dt>Previous version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/">http://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd>
  <dt>Latest version of SVG 1.2:</dt>
  <dd><a href="http://www.w3.org/TR/SVG12/">http://www.w3.org/TR/SVG12/</a></dd>
  <dt>Latest SVG Recommendation:</dt>
  <dd><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></dd>
  <dt>Editor:</dt>
  <dd>Dean Jackson, W3C, <a href="mailto:[email protected]">[email protected]</a></dd>
  <dt>Authors:</dt>
  <dd>See <a href="#authors">Author List</a></dd>
 </dl>
 <p><a href="http://www.w3.org/Consortium/Legal/ipr-notic ...
</header>
Note: header элемент не вводит новый раздел.
В этом примере страница имеет заголовок страницы в виде h2 элемента и два подраздела  в виде h3 элементов. Содержание после header  элемента все еще является частью последнего пункта начатого в header элементе, потому что header  элемент не принимает участие в схеме алгоритма.
<body>
 <header>
  <h2>Little Green Guys With Guns</h2>
  <nav>
   <ul>
    <li><a href="/games">Games</a>
    <li><a href="/forum">Forum</a>
    <li><a href="/download">Download</a>
   </ul>
  </nav>
  <h3>Important News</h3> <!-- this starts a second subsection -->
  <!-- this is part of the subsection entitled "Important News" -->
  <p>To play today's games you will need to update your client.</p>
  <h3>Games</h3> <!-- this starts a third subsection -->
 </header>
 <p>You have three active games:</p>
 <!-- this is still part of the subsection entitled "Games" -->
 ...
30 необходимых практик для написания современного и эффективного HTML5 | by Stas Bagretsov
Перевод статьи 30 Best HTML5 Practices 2018
👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️
HTML5 уже существует много лет, стабилен и поддерживается практически всеми основными браузерами с 2014 года. Далее мы собираемся показать вам список лучших практик, связанных с непосредственно с его разметкой и использованием.
Этот список составлялся с расчётом на создание ясного, поддерживаемого и масштабируемого кода, который успешно использует элементы семантической разметки из HTML5 и который корректно отрендерится во всех поддерживаемых браузерах. Все SEO, CSS и обычные front-end практики JS выходят уже за пределы этой статьи.
01 — Указывайте doctype
Указание doctype должно идти первой строкой вашего HTML документа. Так рекомендуется, если вы используете HTML5 doctype:
<!DOCTYPE html>
Который на самом деле активирует стандартный режим во всех браузерах. Как альтернативу, вы можете использовать doctype, который отвечает за используемую HTML/XHTML версию.
02 — Закрывающие теги
Пустые элементы, то есть теги, которые не могут содержать какой-либо контент.
Самозакрывающиеся теги допустимы, но необязательны. Это такие элементы как: <br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>
У обычных элементов никогда не будет самозакрывающихся тегов.
03 — Опциональные теги
Некоторые теги опциональны в HTML5, так как уже предполагается наличие этих элементов. Для примера, если даже вы не поставите <html> тег в разметке, то всё равно подразумевается то, что ваша разметка вложена в <html>. Другие такие же опциональные теги это <head>, <body>. Также для некоторых элементов опциональны только закрывающиеся теги (смотрите ниже).
Обратите внимание
Опциональные закрывающиеся теги
HTML5 допускает опциональные закрывающие теги для некоторых элементов. Вам необязательно их использовать, в Google Style Guide по HTML вообще рекомендуют избегать все опциональные теги.
Однако, эта практика не сильно прижилась и вообще будучи вырванной из контекста она может ввести в заблуждение: W3C подробно рассказали при каких условиях теги становятся и прекращают быть опциональными.
04 — Атрибут lang
Одной из причин регулярного использования опциональных тегов, таких как <html>, являются атрибуты. Это считается лучшей практикой в плане интернационализации, как указывается в W3C, вам всегда надо указывать стандартный язык текста страницы в теге <html>.
05 — Принцип простоты
В целом, HTML 5 был разработан для обратной совместимости с более старыми версиями HTML и XHTML. По этой причине рекомендуется избегать использования XML или его атрибутов. Совершенно нет причин для его применения:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html>
Пока вам реально не надо будет написать XHTML документ, нет смысла в его применении и использовании. Также вам не нужны и xml атрибуты, как тут:
<p lang="en" xml:lang="en">...</p>
06 — Тег <base>
Это очень полезный тег, особенно для разработки на локальных серверах. Однако, при неправильном использовании он может выдать нечто странное. По-сути, если вы впишите тег <base href="http://www.example.com/" />, то каждая ссылка на странице будет формироваться относительно неё, если она не указана полностью. Это влечет за собой смену стандартного формирования и поведения некоторых ссылок. Для примера, внутренняя ссылка href="#internal" будет интерпретирована браузером как href="http://www.example.com/#internal"
Также, ссылка на внешнюю страницу сделанная таким способом: href="example.org”, будет интерпретирована браузером как href="http://www.example.com/example.org"
В общем, безопаснее использовать абсолютные пути для ваших ссылок.
07 — Тег <title>
Никогда его не пропускайте. Кроме очевидного факта того, что заголовок вашей страницы не отрендерится в браузере, это довольно сильно негативно повлияет на доступность.
08 — Указывайте кодировку
Не забудьте <meta charset='utf-8'> (ну или ту кодировку, которую вы используете в вашем документе) — так вы убедитесь в том, что ваша страница отображается корректно.
09 — Метатег description
Это не совсем является частью лучших практик HTML, но это стоит упомянуть. <meta name="description"> атрибут это то, что краулеры и поисковые системы подтягивают первым делом при индексации вашей страницы. Если вы указали description, то он появится как описание к вашему сайту.
В HTML5 есть несколько элементов, которые помогут вам грамотно расставить и организовать элементы на вашей странице.
Советую почитать на эту тему статью — Секреты использования семантической верстки в HTML5
10 — Элементы <header> и <footer>
На изображении выше простой шаблон, мы видим <header> сверху страницы и <footer> в самом низу. Это то, как выглядит типичная страница, которую вы привыкли видеть, с логотипом вверху страницы и подвалом с несколькими ссылками, а также копирайтами в самом низу. Пользователи WordPress возможно привыкли называть их “masthead” и “colophon”, соответственно.
Однако, HTML5 даёт семантическое значение элементам шапки и подвала. Тег <header> можно использовать в любой секции(<section>) или статье(<article>), для добавления заголовков, публикации даты или другого вводного контента статьи или секции. Также, футер может включать в себя информацию об авторе каждой статьи на странице, ссылки на связанный контент и т.п.
11 — Элемент <nav>
<nav> должен использоваться для навигации по всему сайту. Совершенно нет нужды в указании role, как тут:
<nav role="navigation"></nav>
Роль элемента уже подразумевается в самом теге:
<nav></nav>
12 — Элемент <main>
Этот элемент был включен в HTML5 и выше, для указания места где находится основной контент страницы, то есть контент, который напрямую относится к главной теме документа. В общем, больше не надо использовать <div>:
<div></div>
Если у нас уже есть куда более точный тег для указания основного контента страницы:
<main></main>
13 — <article>, <section> или <div>?
Мы используем <article> для указания отдельно взятого контента, которому не нужно указывать дополнительный контекст.
Тег <section> используется как для разделения страницы на разные тематические сферы, так и для выделения отдельной статьи. Можно сказать, что <section> это более обобщающий тег, нежели <article> — он определяет связанный контент, но необязательно прямо отдельный, как у выделяющего <article>.
И наконец, мы используем <div> как крайнее средство, в те моменты, когда уже совсем нет подходящих тегов для разметки.
14 — <section> это семантический тег, а не стилистический
Раскрывая тему того, о чем мы говорили в теме выше об элементе <section>, важно подчеркнуть то, что <section> это семантический тег. По сути, в нём должен быть тег заголовка и даже если он там не нужен, то его использование имело бы смысл.
Он не должен использоваться как тег, в который обертывают контент, как контейнер или любой другой исключительно стилистический блок.
Для примера, вот некорректное использование тега <section>:
<section>
<section>
<div>
</div>
</section>
</section>
Вот уже получше, но тут видно сильное злоупотребление тегом <div>:
<div>
<div>
<div>
</div>
</div>
</div>
И вот уже получше:
<body>
<div>
<main>
</main>
</div>
</body>
15 — Элемент <figure>
Этот элемент в основном используется с изображениями, однако у него есть куда более обширный спектр применения. Всё, что связано с темой документа, но оно по каким-то причинам должно быть расположено где-то непонятно где в документе, может быть обернуто в <figure>.
Представьте иллюстрации, таблицы или диаграммы в книге.
Отличительная черта <figure> в том, что он не влияет на структуру документа. Так что его можно использовать для группировки элементов по общим темам, таким как группа изображений с общим <figcaption> или даже частью кода.
16 — Группировка элементов с помощью <figure> по общему <figcaption>
Тег <figcaption> должен располагаться либо сразу после открытия тега <figure>, либо сразу после закрытия тега </figure>.
<figure>
<img src="img1.jpg" alt="First image">
<img src="img2.jpg" alt="Second image">
<img src="img3.jpg" alt="Third image">
<img src="img4.jpg" alt="Fourth image">
<figcaption>Four images related to a topic </figcaption>
</figure>
17 — Стилизующие теги устарели в HTML5 — используйте CSS
Не используйте <big>, <center>, <strike> — они просто устарели и даже не смейте использовать <blink>, хоть он сам по себе и не устаревший.
Не используйте <hgroup>, он уже давно вышел из употребления.
Не используйте <i> для курсива, <b> для жирного текста или <em> для подчеркивания: назначение для этих тегов было переосмыслено в HTML5.
И вообще, было бы оптимальным решением для каждого, избегать стилистических элементов в HTML разметке, для этого вообще-то есть CSS.
18 — <br> элемент не для разметки
Не используйте <br> для форматирования документа или для добавления пробелов между элементами. В письмах да, можно.
Суть тут в том, что если это может быть отформатировано с помощью margin или padding в CSS, то вам нет смысла использовать <br>. Однако, если вы хотите добавить перенос строки внутри одного и того же элемента, то <br> будет вполне подходящим решением:
<label>Please use the following text area:<br>
<textarea name="loremipsum"></textarea>
</label>
19 — Указание типа не очень важно для таблиц стилей и JavaScript файлов
В HTML5 нет нужды в указании типа для <style> и <script>. Все современные браузеры ожидают того, что в таблицы стилей будут в CSS, а скрипты в JavaScript. Вообще всё ещё много кто так делает, так как много популярных CMS добавляют эти атрибуты автоматически, но по сути нет причины этого делать вручную. В общем сделайте так:
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
А не вот так:
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/scripts.js"></script>
20 — Используйте атрибут alt для ваших изображений
Это вообще хорошая практика всегда использовать атрибут alt ваших изображений. Этот атрибут делает подпись для ваших изображений в тем моменты, когда их загрузка невозможна в браузере и в довольно значительной степени он используется скринридерами.
21 — Будьте аккуратны при использовании атрибута title
Атрибут title не замена атрибуту alt. alt используется вместо изображения, в то время, как title показывается вместе с изображением, обычно как всплывающая подсказка.
В спецификации HTML5.1 предостерегают от чрезмерного использования атрибута title, из-за недостаточной поддержки браузерами, такими как touch-only в телефонах и планшетах.
Вот подходящий пример использования атрибута title:
<input type="text" title="search">
<input type="submit" value="search">
Следующего использования нужно бы избегать:
<a href="text.txt" title="Relevant document">txt</a>
<img src="img.jpg" title="My photo" />
Вместо этого, попробуйте должным образом дать название ссылке и использовать атрибут alt для вашего изображения:
<a href="text.txt">Relevant document</a>
<img src="img.jpg" alt="My photo" />
Всё упомянутое в этой категории сугубо субъективно. Каждый front-end разработчик имеет свой подход и это хорошо, хорошо до тех пор пока подход последовательный и осмысленный. В основном, если ваш код ясный и читабельный для других разработчиков, то этого вполне достаточно.
Однако, мы включили несколько основных рекомендаций, которые судя по всему пользуются всеобщим признанием.
22 — Последовательность отступов
Код с полным отсутствием отступов или наличием непоследовательных отступов можно считать нечитабельным. На заметку — Google Style Guide для HTML рекомендует использование двух пробелов для отступов и не использовать табуляцию.
Если бы это был общепринятый формат, то каждый бы форматировал свой HTML код последовательно. Однако, каждый разработчик делает что-то по своему, так что по крайней мере мы должны попытаться что-то делать по общим стандартам: если вы решили использовать 4 пробела или два таба для отступа(пожалуйста, никогда не используйте два таба), сделайте это на каждой строчке вашего HTML кода, хотя бы для понимания другими.
23 — нижний регистр, Заглавный Регистр, ГорбатыйРегистр и КАПС
ГорбатыйРегистр используется в JavaScript и это визуально понятное форматирование в JS. По-этому, лучше всего не использовать его в отрезках кода, которые не в JS.
Заглавный Регистр — только для текста, строк, контента. Хоть это и не является технически неправильным — называть классы или ID заглавным регистром, это всё равно сильно влияет на читабельность.
КАПС — снова, технически всё верно, кроме того, что так принято описывать крик и вообще это визуально неприятно.
нижний регистр — наиболее используемый подход.
24 — Кавычки
Двойные или одинарные? На каждый вариант есть куча аргументов, однако это всё на ваше усмотрение. Делайте как хотите, главное, чтобы всё было последовательно и взаимосвязано.
Хотя одно замечание: HTML допускает одинарные кавычки и это очень удобно при генерации HTML из PHP. Однако, если HTML написан вручную, то это реально вопрос предпочтений. Главное, чтобы вы были последовательны(!)
25 — <pre> и <code>
Обычная практика — использовать элемент <code> с тегом <pre>. <code> сам по себе просто определяет компьютерный код и ничего не делает для сохранения его форматирования, в то время как <pre> (предварительно отформатированный текст), сохранит все переходы строк и отступы.
Помните одну вещь — элемент <pre> сохранит каждый переход на новую строку.
<pre><code>
.container {
margin: 0 auto;
}
</code></pre>
Так что этот код отформатируется с пустой строки. Используйте элементы <pre>, как тут:
<pre>&lt;nav&gt;
</pre>
26 — Мнемоники
Используйте мнемоники с <pre> при отображении HTML кода.
Вам нужно использовать &lt; и &gt; вместо < и >, и &quot; вместо “.
За пределами предварительно отформатированных текстовых блоков, UTF-8 кодировка допускает почти все символы (включая ©, ® и даже смайлики). Однако, обычным делом является избегать &, <, >, “ и ‘ даже за пределами предварительно отформатированных блоков.
27 — Тире или подчеркивание для класса и ID?
Никогда не используйте пробелы в именах классов или ID.
Больше ограничений нет, так что тире или нижнее подчеркивание — это уже на ваш выбор. Тут стоит подметить то, что это предпочтение может зависеть от выбранного редактора. В Notepad++ слово с тире воспринимается как одно слово. В Vim, тире разделяет слово, а нижнее подчеркивание нет. В общем, когда будете принимать решение о том, как именовать классы, ID и тп, учитывайте нюансы своего любимого текстового редактора.
28 — Комментарии
Комментарии могут напрямую влиять на читабельность кода, конечно же в позитивном ключе, когда они используются правильно. У меня есть привычка комментировать закрывающие теги (особенно закрывающий <div>), указывая класс открывающего тега — это значительно упрощает понимание того, какой блок закрылся среди сложенных тегов. Пример:
<div>
<div>
...
</div><!-- .nextclass" -->
</div><!-- .myclass -->
29 — Валидация
W3C валидатор устанавливает стандарты индустрии, так что это должно быть первым местом куда вы пойдете проверять валидность вашего кода.
W3C Validator
Вы также можете получить исходный код их Nu валидатора.
30 — Минифицирование и комбинирование CSS и JS файлов
У современного сайта обычно больше одного CSS файла. Главные стили, bootstrap или любые другие стили сеток, может быть ещё несколько стилей для плагинов, тем, ну и т.п. Каждый CSS файл делает отдельный HTTP запрос, тормозя загрузку вашего сайта.
Это рекомендуемая практика, в финальном продукте минифицировать и комбинировать все ваши CSS’ки для улучшения времени загрузки. Также вполне обычной является практика хранения неминифицированных файлов, к примеру в папке “css/src”, потому что редактирование и дебагинг минифицированных файлов — ну очень сложное занятие.
Таким же образом рекомендуется минифицировать и комбинировать ваши JavaScript файлы. Также рекомендуется выставлять их в конце документа, сразу над закрывающим тегом </body>, чтобы браузер начал загружать их после обработки всего документа.
Заключение
Я надеюсь на то что вам понравились наши советы по написанию HTML5 и лучшим практикам по front-end разработке.
Источники:
hail2u recommendations
w3.org
Dive into HTML5 from html5doctor
html5doctor
Google’s style guide
Various questions on Stack Overflow
 Что такое теги заголовка HTML? Как они работают для SEO? 
  1.  WooRank
  2.  Руководства по SEO
  3.  Заголовок HTML
 HTML-теги заголовков
 используются для различения заголовков (h2) и подзаголовков (h3-h6) страницы от остального содержимого.Эти теги также известны веб-мастерам как теги заголовков или просто теги заголовков.
 Самый важный тег заголовка - это тег h2, а наименее важный - тег h6. В кодировании HTML теги заголовков от h2 до h6 образуют иерархию сверху вниз. Это означает, что если вы пропустите любой из номеров тегов, структура заголовков будет нарушена, что не идеально для SEO на странице.
 Например, если ваш сайт представлен тегом h2, за которым следует тег h4, иерархия будет нарушена, что означает, что структура заголовков не так удобна для SEO.Однако это не относится к восходящей структуре, которая может без проблем перескакивать с h5 на h3.
 В идеале каждая страница должна иметь тег h2, но не более одного (если вы не используете HTML5 - подробнее об этом ниже).
 Мы действительно используем H-теги, чтобы лучше понять структуру текста на странице.
 Для SEO есть две основные цели тегов заголовков HTML:
  1.   Структурирование страницы для удобочитаемости 
  2.   Релевантность ключевым словам 
 1.Сделать страницу более читаемой 
 Добавление разделов и подразделов с соответствующими заголовками разделяет контент на читаемые блоки, которые намного проще использовать. И для людей, и для ботов.
 Взгляните на теги заголовков HTML вашей страницы как на способ создания схемы или наброска вашей статьи, используя основной текст для заполнения деталей и примеров.
 Фактически, вы можете посмотреть на заголовки HTML в этой статье в качестве примера. Вот заголовки этой статьи:
   
 Что такое теги заголовков? 
 
 
 Что такое теги заголовков HTML в SEO? 
 
 
 1.Сделайте страницу более читаемой 
 
 
 2. Сделайте страницу более релевантной 
 
 
 Как писать заголовки HTML для SEO 
 
 
 Чего нельзя делать с заголовками HTML 
 
  
 Это переводится непосредственно в традиционную схему этой статьи:
  •  Что такое теги заголовка?
    •  Что такое теги заголовка HTML в SEO?
      •  Сделать страницу более читаемой
      •  Сделать страницу более актуальной
    •  Как писать заголовки HTML для SEO
 Чего нельзя делать с заголовками HTML
 2.Сделать страницу более актуальной 
 Google считает текст, используемый в тегах заголовков HTML, более ценным или более приоритетным, чем остальной текст на странице. Поэтому слова, используемые в тегах заголовков, имеют больший вес, когда Google пытается выяснить, соответствует ли страница запросу пользователя. Фактически, тег h2 страницы - одно из самых важных мест для использования ключевого слова.
 Например, если ключевое слово, на которое вы хотите настроить таргетинг, - «на странице SEO», вы должны использовать его в своих тегах h2, а тематически связанные слова в своем плане:
  •  На странице SEO: полное руководство
    •  Что на странице SEO?
    •  Каковы факторы ранжирования на странице?
    •  Лучшие методы SEO на странице
      •  Роботы.txt
      •  XML-карта сайта
      •  Скорость
      •  Заголовки HTML
    •  Ключевые слова на странице
    •  Лучшие инструменты для SEO на странице
    •  Бонус: SEO вне страницы
 Используйте инструмент исследования ключевых слов, который включает ключевые слова LSI, чтобы помочь вам создать заголовки HTML на ваших страницах.
 Это не относится к набивке ключевых слов. Благодаря семантической сети и ключевым словам LSI лучше использовать родственные слова, которые усиливают релевантность, качество и глубину части контента запросу пользователя.
 То, как вы пишете заголовки и подзаголовки, зависит от того, о каком теге заголовка HTML вы говорите.
  •  Поместите теги h2 вверху страницы (конечно).
  •  Используйте слова, которые люди будут использовать при поиске вашего контента.
  •  Если вы настраиваете таргетинг на вопрос, поместите его в тег h2.
  •  Если вы пишете практическое руководство, помещайте каждый шаг в тег h3.
  •  Для статей, не связанных с практическими рекомендациями, используйте ключевые слова LSI и другие семантически связанные слова в тегах h3-h6.Это помогает повысить актуальность темы и устраняет двусмысленность.
 Эти третий и четвертый пункты очень важны, когда вы пытаетесь претендовать на один из рекомендуемых фрагментов кода Google для вашего сайта. Избранные фрагменты полагаются на способность Google определять, какая страница лучше всего отвечает на вопрос. Важной частью этого является структурирование вашего контента, чтобы сделать его более читабельным.
 Найдите возможности заявить права на избранные фрагменты для вашего сайта.
 Содержание вашего заголовка играет роль в сопоставлении вашего содержания с целью поисковика, помимо простого ранжирования ключевых слов.
 Так как поисковые системы хотят предоставлять страницы, отвечающие потребностям их пользователей, и поэтому они будут полагаться на теги заголовков HTML, чтобы определить, отвечает ли страница на вопрос пользователя.
 Используйте заголовки HTML, чтобы настроить таргетинг на эти типы запросов:
  •   «Что есть»:  Поскольку вы нацеливаетесь на вопрос, вы захотите использовать его в теге 
    . Чтобы помочь, держите ответ на вопрос рядом с тегом 
         . Google находит это легче.
  •   «Как сделать»:  При таргетинге на людей, пытающихся следовать указаниям, поместите каждый шаг процесса как отдельный заголовок HTML. Это может быть 
    , если инструкции являются частью гораздо более крупной статьи, или как теги 
         , если инструкции являются основным моментом содержимого.
  •   Коммерческое намерение:  Мы уже рассматривали страницы продуктов и категорий ранее. Вы также можете использовать теги 
      для таргетинга на поисковые запросы с коммерческими намерениями со специальными предложениями, такими как скидки или дополнения.Просто включите предложение в заголовок.
 В то время как страницы, использующие HTML4 или более ранние версии, должны придерживаться правила тега 1 
  для каждой страницы, те, кто использует HTML5, фактически могут использовать несколько тегов заголовков. Это работает, потому что HTML5 поддерживает тег 
 . Этот тег позволяет вам, по сути, разбить страницу на несколько «статей», каждая со своим собственным заголовком 
 .
 Так, например, статья на старой HTML-странице будет выглядеть так:
   
 Как делать SEO 
 
 
 Шаг 1. Техническое SEO 
 

 Подробное объяснение.

 
 Шаг 2. SEO на странице 
 

 Подробное объяснение шага 2. 

  
 Однако с HTML5 эта страница могла бы выглядеть так:
  
  
 Как делать SEO 
  

<статья>
 
 Шаг 1. Техническое SEO 
 

 Подробное объяснение. 



<статья>

 Шаг 2. SEO на странице 


 Подробное объяснение

Теперь заголовкам разделов можно придать их должное значение на странице, но в контексте всей статьи.

Однако обратите внимание, что это может быть немного сложно и сложно реализовать на странице. Поэтому, если вы не уверены в своих навыках кодирования или не уверены, использует ли ваша страница HTML5, придерживайтесь правила

один заголовок на страницу.

  • Не набивайте теги заголовков ключевыми словами.

  • Не используйте более одного тега h2 на странице. Обычно страницы имеют один заголовок h2, и включение двух может заставить поисковые системы подумать, что это попытка включить больше ключевых слов для SEO в несколько тегов h2.Лучше разделить контент на две отдельные темы на отдельных страницах с собственными тегами h2. Это имеет больше смысла как для читателей, так и для пауков поисковых систем, однако допускается использование нескольких тегов h2.

  • Не используйте теги заголовков в качестве скрытого текста. Любой скрытый текст может привести к штрафам для вашего сайта, особенно если скрытая часть является компонентом, влияющим на SEO.

  • Не повторяйте теги заголовков на разных страницах вашего сайта. Рекомендуется использовать уникальные теги заголовков по всему сайту.Избегайте использования идентичного содержания как для тега h2, так и для метатега заголовка вашей страницы.

  • Не используйте теги заголовков для стилизации текста, а используйте их для представления организованного и структурированного содержимого на страницах. Используйте таблицы стилей CSS для стилизации.

Что это такое и как их использовать

Когда я только начал вести блог, я понятия не имел, как структурировать свои сообщения для ранжирования в поисковых системах, и даже почему это было важно.

Я просто добавил жирным шрифтом слова и фразы, которые выглядели хорошо, и надеялся, что меня случайным образом выберут для страницы результатов поисковой системы (SERP).

Теперь я знаю, что есть наука, и то, что я добавлял в свои сообщения в блоге, чтобы они выглядели профессионально, называлось тегами заголовков - это важный инструмент для понимания и SEO.

Когда мы говорим о тегах заголовков, мы говорим о выделенных жирным шрифтом словах, которые разделяют разделы в сообщениях блога.

Чтобы проиллюстрировать, тег заголовка, упомянутый в этом сообщении, называется «Полное руководство по маркетингу продуктов в 2020 году». Это также называется h2.

Ниже приведены два других типа тегов заголовков (их шесть,), которые обозначены стрелками.

Как видите, каждый тег заголовка выглядит по-разному, и каждый тег заголовка используется для разных целей. Здесь давайте рассмотрим, что такое теги заголовков, почему они важны для SEO и как вы можете добавить свои собственные в HTML.

Что такое теги заголовка?

Теги заголовков используются для разделения заголовков и подзаголовков на веб-странице. Они располагаются в порядке важности, от h2 до H6, причем заголовком обычно является h2.Теги заголовков улучшают читаемость и SEO веб-страницы.

Вот краткое руководство по тегам заголовков и тому, для чего они используются:

  • h2 - Заголовок сообщения. Обычно они ориентированы на ключевые слова.
  • h3 - это подзаголовки, которые классифицируют основные идеи ваших абзацев и отдельных разделов. Это также должны быть ключевые слова.
  • h4 - подраздел, который дополнительно разъясняет суть подзаголовков.
  • h5 - обычно используются в списках форматирования или в маркированных списках.

Имейте в виду, что теги h2 всегда должны быть вверху страницы, потому что обычно они являются заголовком. Ваши заголовки должны соответствовать теме того, о чем вы пишете. При форматировании, разбивая разделы, руководствуйтесь здравым смыслом.

Теперь, когда вы знаете немного больше о том, что такое теги заголовков, давайте разберемся, как они используются для SEO.

Теги заголовков и SEO

Заголовочные теги и SEO имеют больше общего, чем может показаться на первый взгляд.Они не только используются для выделения важных фрагментов контента, но и обладают весомостью с точки зрения релевантности и удобочитаемости ключевых слов.

Google предпочитает заголовки. Когда он сканирует ваше сообщение, он помещает теги заголовка как высокоприоритетные. В конечном счете, теги заголовков - это то, что Google использует, чтобы сообщить веб-браузерам, что их поисковый запрос имеет отношение к вашему сообщению.

Вот почему при использовании тегов заголовков важно убедиться, что они правильно соответствуют цели ключевого слова. Если в теге h2 поста нет ключевого слова, он не будет хорошо ранжироваться в результатах поиска.

Для иллюстрации предположим, что ваше ключевое слово - «электронная коммерция». Вы хотите, чтобы это было отражено в вашем теге h2, поэтому заголовок вроде «Руководство по началу бизнеса в электронной коммерции» был бы идеальным. Это точно укажет Google, как отправлять веб-браузеры на ваш пост.

Поисковые системы также просматривают теги заголовков в вашем сообщении, так что хорошо, чтобы они также были ориентированы на ключевые слова. Например, вы можете создать несколько разделов h3, окружающих популярные ключевые слова с длинным хвостом, связанные с электронной коммерцией, такие как «пять шагов для создания бизнеса электронной коммерции» или «лучшие инструменты социальных сетей для электронной коммерции».

Вам также не нужно придумывать ключевые слова самостоятельно - на самом деле, вы можете провести несложное исследование ключевых слов, чтобы помочь вам, или изучить инструменты исследования ключевых слов, такие как SEMRush или Ahrefs.

Заголовки также облегчают чтение страниц. Разделение различных частей веб-страницы позволяет упорядочить и разбить информацию в понятной форме. Это помогает читателям, а также поисковым системам, которые тоже сканируют.

Если ваши разделы не имеют смысла, ваша страница может не ранжироваться.Подумайте о разделах в этом посте - как вы думаете, они были разбиты на части для чтения?

Как добавить теги заголовка в HTML

Добавить теги заголовков в HTML - это довольно простой процесс. Если вы хотите записать h2, вы должны ввести

и

, поместив текст h2 между этими двумя тегами. Это тот же метод для любого типа тега заголовка.

Например, если ваш h2 был « Руководство по запуску электронной коммерции, », он выглядел бы так:

Руководство по запуску электронной коммерции

Вы также можете использовать знаки препинания между двумя тегами.Например, у вас может быть:

Создайте учетную запись Instagram, чтобы продавать свои продукты электронной коммерции.

Это будет работать для HTML4 и старше. Если вы работаете с HTML5, вам, возможно, придется использовать немного другую строку, чтобы получить тот же результат. Изменение состоит в том, чтобы предупредить Google о том, что такое h2:

.

Руководство по запуску электронной коммерции

Помните, Google будет сканировать HTML тегов заголовков, чтобы сообщить веб-браузерам, о чем ваша страница, поэтому важно просмотреть их и увидеть, правильно ли отформатированы ваши заголовки в HTML.

Некоторые платформы для ведения блогов, такие как WordPress и HubSpot, имеют на панели инструментов параметр для создания тегов заголовков, поэтому каждый раз, когда вы хотите добавить один, вам не нужно копаться в исходном коде или HTML, чтобы сделать это.

В следующий раз, когда вы создадите сообщение для своего веб-сайта, посмотрите, влияет ли добавление правильных тегов заголовка на SEO и как ваши читатели воспринимают информацию.

Хороший тест, который мне нравится использовать, - это отправлять сообщения близкому члену семьи, который мало знает о ведении блога или маркетинге.Использование обратной связи со стороны и вопрос о том, могут ли они понять мой текст перед публикацией, помогает мне форматировать сообщения так, чтобы они были понятными.

Важнейшие вещи для тегов заголовков - это удобочитаемость и поисковая оптимизация, поэтому, пока ваши заголовки управляются ключевыми словами, они должны увидеть скачок в рейтинге страницы.

Тег HTML 5

Тег HTML

представляет группу вводных или навигационных средств.

Заголовки могут содержать заголовки, подзаголовки, информацию о версии, элементы управления и т. Д.

Согласно спецификации HTML5:

Элемент
обычно предназначен для содержания заголовка раздела (элемент

–
 или элемент
), но это не обязательно. Элемент
также можно использовать для обертывания оглавления раздела, формы поиска или любых соответствующих логотипов.

Тег

нельзя разместить внутри