Все, что вам нужно, от тега раздела до тега заголовка
Одна вещь, которую разработчики, не знающие лучшего, часто игнорируют, - это семантика в HTML. Семантика - одна из важнейших функций HTML5, которой должен владеть любой веб-разработчик.
Самым популярным видео на моем канале YouTube является Когда использовать Section vs Article vs Div в Html?, И я понял, сколько разработчиков пытаются понять смысл этих тегов, когда они входят в индустрию веб-разработки. . Поэтому я решил изложить все это в одной статье простыми словами.
1. раздел
Тег section группирует контент части страницы (документа), которая имеет смысл вместе и почти всегда должна иметь заголовок (заголовок). Раздел похож на кусок пирога, если страница - это пирог. Все разделы и части страницы вместе помогают понять смысл страницы, содержание раздела имеет смысл вместе, а сам раздел помогает странице иметь смысл в целом.
Есть много других тегов, которые группируют часть страницы, например теги nav, article и aside. Тег section следует использовать, если нет другого, более конкретного семантического тега.
<section> <h2>Welcome to the Before Semicolon</h2> <p>Millions of people rely on this space to save and discover the best articles, stories and videos on the web.</p> <img src="path/to/some/hero/image" alt="img description"/> </section>
Раздел должен появиться в структуре документа и может использоваться для таких вещей, как результаты поиска, главный герой страницы, категории групповых сообщений и т. Д. Если вы используете тег section без заголовка, он не появится в структуре. К тому же титульный раздел хорош для SEO и доступности. Разделы без названия распространены в веб-приложениях, а не в веб-сайтах, и если вы хотите, чтобы раздел отображался в структуре документа и не был виден пользователю, вы можете сделать название скрыто.
<section class="secondary-menu">
<h2 class="hidden">Controls</h2>
<button class="reply">Reply</button>
<button class="reply-all">Reply to all</button>
<button class="fwd">Forward</button>
<button class="del">Delete</button>
</section>2. статья
Тег article следует всем правилам тега section. У него должно быть название, а содержание должно иметь смысл вместе. Его отличает то, что его содержимое должно быть автономным, независимым от остальной части страницы.
Прекрасным примером этого является объявление о вакансии. Если я напишу сообщение о вакансии и сделаю его доступным на веб-сайте LinkedIn, то же сообщение о вакансии может быть показано на любом другом веб-сайте поиска работы, и все остальное содержимое страницы не потребуется для понимания. Из-за этого свойства мы говорим, что статья о вакансии представляет собой отдельный контент.
<article class="forecast">
<h1>Weather forecast for Boston</h1>
<article class="day-forecast">
<h2>03 March 2018</h2>
<p>Rain.</p>
</article>
<article class="day-forecast">
<h2>04 March 2018</h2>
<p>Periods of rain.</p>
</article>
<article class="day-forecast">
<h2>05 March 2018</h2>
<p>Heavy rain.</p>
</article>
</article>
Вы можете вкладывать article теги, но внутренние статьи должны относиться к внешней статье. Хорошим примером этого является комментарий к сообщению в блоге. Вы можете использовать тег article, чтобы показать комментарии к сообщению в блоге и поместить их в тег article, содержащий содержимое сообщения в блоге.
<article class="blog-post"> <h2>Programming</h2> <p>What makes you a programmer is how you approach problems not the number of tools you use.</p> <section class="comments"> <h3>Comments</h3><article class="user-comment"> <h2><strong>Mark</strong></h2><p>Posted on <time datetime="2015-05-16 19:00">May 16</time> </p><p>Really great article</p> </article></section> </article>
3. главная
Тег main используется для включения или расширения основной темы страницы. Он должен приходить один раз на страницу, и если включено более одного, все, кроме одного, должны иметь атрибут hidden.
Тег main является строго информативным и не вносит вклад в контур документа. Он не должен содержать вещей, повторяющихся на других страницах. Его содержание должно быть уникальным и соответствовать тематике страницы.
<main>
<h1>Apples</h1>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<article>
<h2>Red Delicious</h2>
<p>These bright red apples are the most common found in many
supermarkets.</p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>Granny Smith</h2>
<p>These juicy, green apples make a great filling for
apple pies.</p>
<p>... </p>
<p>... </p>
</article>
</main>Браузеры часто ищут тег main, чтобы составить представление о читателе. Это означает, что вы можете поместить свой тег article или различные разделы страницы внутрь тега main в зависимости от того, чему посвящена эта страница. Эта деталь очень важна и показывает, что другие вещи, такие как нижний колонтитул страницы, навигация и логотип сайта, являются второстепенными и должны существовать за пределами тега main.
4. в сторону
Тег aside должен содержать содержимое, которое относится к содержимому тега main. Допустим, в содержании тега main есть статья о пункте назначения. Вы можете использовать тег aside, чтобы показать связанные факты о пункте назначения или транспортных расходах, которые пользователь может быстро перекусить.
<p>Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.</p>
<aside>
<p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>
<p>Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.</p>
Вы можете поместить тег aside в другие теги, такие как articles, sections и даже тег main. Единственное исключение - тег address. Это потому, что это дополнительный тег, который можно использовать как боковую панель или окно вызова.
5. заголовок
Тег header определяет вводное содержимое, и, как тег содержимого, не разделяющий его на разделы, он не отображается в структуре страницы. Это означает, что его можно использовать внутри статьи с заголовком статьи и датой публикации, внутри тела с боковым логотипом и навигацией, внутри тега aside с формой поиска, внутри тега nav или section с заголовком навигации и т. Д.
<article>
<header>
<h2>The Planet Earth</h2>
<p>Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by Jane Smith</p>
</header>
<p>We live on a planet that's blue and green, with so many things still unseen.</p>
</article>Это тег, который обрабатывает введение раздела, который его содержит. Из-за этого он может находиться внутри других элементов семантического разделения (кроме нижнего колонтитула). Он также не должен быть вложенным или существовать более одного раза внутри тега секционирования.
6. навигация
Тег nav - это специальный тег секционирования. Он должен содержать детали навигации для текущей или другой страницы. Его можно назвать и использовать для навигации по главной странице, оглавления, указателей, хлебных крошек и т. Д.
<nav class="main-nav">
<ul>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">contact</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
Если вам нужно дополнительное меню, вы должны использовать тег section. Ссылки внутри нижнего колонтитула не обязательно должны находиться внутри тега nav, если он не имеет четкой маркировки, чтобы выделить его. Хотя большинство людей используют его для размещения ссылок внутри неупорядоченного списка, вы также можете записать навигационную прозу, чтобы указать направление и более подробный контекст того, о чем эти ссылки.
<nav>
<h2>Navigation</h2>
<p>You are on my home page. You can check awesome articles i write in <a href="/blog">my
blog page</a>
...
</nav>7. нижний колонтитул
Тег footer часто используется в качестве нижнего колонтитула страницы, но на самом деле он может входить в любой тег потока содержимого, кроме тегов header и address. Он также не может быть вложенным, а это означает, что вы можете использовать его для основного содержимого, статей, разделов и других тегов разделения.
<article>
<h1>How to be a wizard</h1>
<ol>
<li>Grow a long, majestic beard.</li>
<li>Wear a tall, pointed hat.</li>
<li>Have I mentioned the beard?</li>
</ol>
<footer>
<p>© 2018 Gandalf</p>
</footer>
</article>
Содержимое нижнего колонтитула обычно представляет собой ссылки, информацию об авторе, сведения об авторских правах, примечания и т. Д. Для статьи вы можете использовать его для отображения сведений об авторе. Для страницы используйте его для защиты авторских прав и других ссылок, связанных со страницей. Что касается раздела, он может содержать ссылки, относящиеся к разделу, или мелкий шрифт в качестве дополнительной информации.
<footer>
<p>copyright Before Semicolon. All rights reseverd.</p>
</footer>Хотя тег footer часто используется как таковой, он не является тегом содержимого section. Это просто означает, что он не группирует контент, который связан друг с другом и не отображается в структуре страницы.
Примечание. Теги nav, aside, section, article, header и footer считаются элементами семантического разделения.
8. рисунок и figcaption
Теги figure и figcaption используются для контекстуализации контента, который может быть изображениями, иллюстрациями, фрагментами кода, диаграммами, цитатами, стихами и т. Д. Из-за его названия разработчики обычно связывают тег figure со способом добавления подписей к некоторым изображениям. , но его можно использовать и для большего.
<figure> <figcaption>How to find average value</figcaption> <pre>const average = (nList) => (nList.reduce((avg, n) => avg + n, 0)) / nList.length;</pre> </figure>
figcaption тег можно исключить, но это рекомендуется. У вас также может быть несколько тегов figcaption, но только первый будет использоваться в качестве заголовка для содержимого.
9. заголовок
heading теги состоят из h тегов, пронумерованных от 1 до 6, которые должны использоваться для определения уровня содержания раздела, которое может использоваться для создания оглавления пользовательскими агентами. Он должен описывать цель контента, как заголовок раздела.
Это тег доступности и SEO, который отображается в контуре страницы. Он не должен быть вложенным, но может использоваться во вложенном разделе для определения иерархии контента. Считается лучшей практикой иметь по одному h1 на странице, что очень выгодно для программ чтения с экрана и SEO, хотя некоторые поисковые системы стараются изо всех сил, чтобы это не повлияло на них.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>Есть много способов испортить использование этих тегов, и одна из немногих ошибок, которые делают разработчики, - это пропуск уровня (например, начиная с h2). Другая ошибка - использовать его из соображений размера текста вместо использования CSS font-size. Использование нескольких тегов h1 должно выполняться осторожно, и это подразумевает, что страница имеет несколько целей или описаний, что требует полного разделения страницы.
10. сильный и эм
Теги strong и em используются для придания тексту определенного уровня важности или релевантного значения.
Тег strong означает важный, срочный, серьезный, и он часто выделяется жирным шрифтом, что может запутать разработчиков, когда его использовать по сравнению с тегом b. Тег b не имеет семантического значения и должен использоваться, когда все, что вам нужно, - это выделить текст жирным шрифтом. Тег strong имеет значение и должен использоваться, чтобы показать пользователю, что этот фрагмент текста важен. В нем есть бонус - выделение текста жирным шрифтом.
<p>Before proceeding, <strong>make sure you put on your safety goggles</strong>.</p>Тег em аналогичен тегу strong и должен использоваться для выделения текста. Типичная фраза Я люблю программирование и Я люблю программирование выражает огромную разницу в акцентах. Делать акцент на том, что вы любите и как вы относитесь к чему-либо, - это две разные вещи. Браузер отображает содержимое тега em курсивом, что также может быть выполнено с помощью тега i, но тег i не имеет семантического значения. Это просто для укладки.
<p>
In HTML 5, what was previously called
<em>block-level</em> content is now called
<em>flow</em> content.
</p>Программы чтения с экрана и поисковые системы относятся к ним с особой осторожностью по сравнению с их аналогами по стилю. Существует огромная разница между полужирным шрифтом или курсивом и полужирным или курсивом, потому что оно передает больше смысла.
Заключение
Всегда хорошо использовать вещи так, как они предназначены для использования. Когда дело доходит до HTML, лучше всего следовать лучшим практикам и постоянно оставаться в курсе событий. Семантика - лучшая функция HTML5, с которой должен быть знаком любой веб-разработчик.
Канал YouTube: До точки с запятой
Веб-сайт: beforesemicolon.com
