Правильное использование семантических элементов HTML

Мне было интересно, какой «лучший» или наиболее распространенный способ использования семантических элементов в HTML. Я знаю, что они из себя представляют и что они делают, но должен ли я использовать их так:

<section>
      <div class = "info">
        ...

или вот так:

<section class = "info">
        ...

Неправильно ли использовать тот или иной ? Оба на самом деле "действительны"?

Другим примером может быть элемент заголовка:

<body>
    <header>
      <div class = "logo">
        ...

или я должен сразу начать с

<body>
    <header class = "logo">
        ...

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

Лично я использую «длинную» версию и начал задавать себе вопросы, когда начал смотреть чужие коды.

В любом случае допустимо, но если вы хотите иметь семантический HTML, старайтесь избегать использования <div> и <span>, поскольку они не имеют явного значения. Когда вам нужно использовать <div> или <span>, достаточно описательного класса. IMO меньше значит больше, меньше беспорядка делает ваш код более легким для чтения.

zer00ne 17.11.2022 19:41
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
1
62
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Оба в порядке. Речь идет о личных предпочтениях.

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

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

<section>
  <div class = "info">
    <h1>Information</h1>
  </div>
</section>

Оба действительны. При использовании семантического HTML тег должен дать вам некоторый контекст того, что происходит. Я предпочитаю структурировать свои страницы следующим образом:

<section class=blogPost>
<!-- section acts as a container for content -->
<h1>Introduction to HTML</h1>
<p> blah blah blah blah </p>
<!-- h1 and p are the actual content -->
</section>

Вы можете использовать классы для каждого тега в вашем файле HTML для повышения семантики с помощью микроформатов, хотя семантические теги обычно просто означают, что вы пытаетесь использовать определенные теги вместо неуказанных тегов, таких как div или span. Я бы сказал, что вы должны попытаться ограничить количество используемых тегов, если это возможно, потому что добавление тега div только для того, чтобы дать ему класс, в конечном итоге запутает вас еще больше, особенно если вы можете просто поместить свой контент в теги заголовка или раздела напрямую. .

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

<body>
<header class = "logo">

Чтобы прочитать второй код,

<section>
  <div class = "info">
    ...

вам нужно тщательно сканировать имена классов, выбирая их из шаблона. И как только вы углубитесь в разметку на несколько уровней, становится сложно отслеживать, какие закрывающие теги сочетаются с открывающими тегами <div...>.

Другие вопросы по теме