Мне было интересно, какой «лучший» или наиболее распространенный способ использования семантических элементов в HTML. Я знаю, что они из себя представляют и что они делают, но должен ли я использовать их так:
<section>
<div class = "info">
...
или вот так:
<section class = "info">
...
Неправильно ли использовать тот или иной ? Оба на самом деле "действительны"?
Другим примером может быть элемент заголовка:
<body>
<header>
<div class = "logo">
...
или я должен сразу начать с
<body>
<header class = "logo">
...
Возможно, этот вопрос может показаться странным для продвинутых разработчиков, но для новичка он может быть неочевидным, и я не нашел четкого ответа.
Лично я использую «длинную» версию и начал задавать себе вопросы, когда начал смотреть чужие коды.
Оба в порядке. Речь идет о личных предпочтениях.
Технический аспект заключается в том, что он добавит немного отступа между двумя вложенными элементами.
Я предпочитаю использовать первый, поскольку он кажется более организованным, но, честно говоря, это просто предпочтения.
<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...>.
В любом случае допустимо, но если вы хотите иметь семантический HTML, старайтесь избегать использования
<div>
и<span>
, поскольку они не имеют явного значения. Когда вам нужно использовать<div>
или<span>
, достаточно описательного класса. IMO меньше значит больше, меньше беспорядка делает ваш код более легким для чтения.