Семантическая верстка HTML5

Автор alexburn, 18-12-2020, 07:30:58

« назад - далее »

alexburnTopic starter

Приветствую, ребята! Подскажите пожалуйста с таким вопросом. Переделываю себе сайт на ASP (сейчас крутится на Joomla). Хочу сделать корректную семантическую верстку. Читал различные статьи, что-то в голове отложилось, но насколько верно все сделал - терзают сомнения. Поэтому хочу обратиться к специалистам фронта :) . В прикрепленных файлах структура каталога статей и материала, покритикуйте пожалуйста, как должно быть ? Буду рад любой критике и любым примерам реализации.


Val_Ery

alexburn,
Ну, как бы, рецептов "Как должно быть" не существует: вы вправе использовать ту разметку, которая позволяет вам получить желаемый результат.

Но уж если вы решили пользоваться семантикой html5, то хотелось бы видеть в ваших примерах семантические теги html5. (https://www.w3schools.com/html/html5_semantic_elements.asp)

[spoiler][/spoiler]

Я ваш код сделал "покрасивее".
Вижу, что семантики тут нет ваще, одни таблицы. Внутри которых совсем не семантические дивы и спаны.

Обвел таблицу и непонятные мне "элементы".
Не, понятно, что это угловые скобки, но найти ответные части я не смог (хотя особо и не заморачивался поиском по ячейкам таблицы).
  •  


alexburnTopic starter

Val_Ery, извиняюсь, гугл-хром что-то не так сохранил. Вот исправленная верстка.

Val_Ery

#3
Цитата: alexburn от 19-12-2020, 10:05:37гугл-хром что-то не так сохранил
Понял...

alexburn, посмотрел ваши шаблоны.

В общем, наверное, так...

1. Подвал с вложенными боковыми панелями.

<footer class="body-content">
  <aside>
    <div class="row justify-content-around">
        <div class="col-12 col-md-3 card text-center BlockColumn">
            <aside class="PanelBox">
                <div class="PanelBoxHeader">

Здесь вы используете два, назовем их так, секционных элемента: footer и aside. Причем, в подвале страницы боковых панелей пять: одна как обкладка для бутстрапового row и четыре вложены в бутстраповые же колонки.

P.S. Я еще раз повторю, вы имеете полное право использовать ту разметку, которая дает вам необходимый результат.

Применительно к семантике...  Тело любой страницы можно условно разделить на
- собственно главное содержимое (я главное содержимое всегда оборачиваю в main),
- содержимое, не связанное с основным контентом (это может быть панель навигации - блок nav, шапка сайта - может включать навигацию + банер с формой или слайдшоу, ну и подвал сайта - footer)
- содержимое, косвенно связанное с основным контентом (это обычно - боковая панель, aside; здесь может быть реклама, установленные фильтры, если речь о коммерсе, дополнительное меню и т.п.; может размещаться как внутри main, так и как отдельный секционный блок - это по необходимости).
Речь о heading'ах (заголовках) и элементах типа p, ul, blockquote не ведем, только блоки... В итоге получаем структуру, которую везде рисуют на картинках

header
main
    aside
    article
footer

Основное содержимое main, которое содержит собственно Статью article с дополнительным блоком вспомогательного контента aside. Шапка header с Подвалом footer к основному содержимому (содержимому конкретной статьи) отношения не имеют.
Каждый из этих блоков может быть разбит на вложенные секции section.

Теперь ваш Подвал из вашего шаблона... Он делится на 4 секции - не вопрос:

footer
    div.row
        div.col-md-3.BlockColumn
            section.PanelBox

P.S. Тут еще вопрос в классах. Я, например, не уверен в необходимости класса BlockColumn: он не несет никакой  доп."нагрузки", кроме информирования, что это BlockColumn... стилизация-то всё равно бутстраповая. Поэтому можно две последние строки заменить на одну: section..col-md-3.PanelBox. И с семантикой все красиво, и кода вложенного меньше :)

P.P.S. Вот эти вот ребята - WHATWG - вообще рекомендуют использовать дивы только в тех случаях, когда семантически правильного html5 тега найти не удается. Правда, они же утверждают, что неправильно использовать cite для вывода имени автора материала... Каюсь, я использую ::)

2. По сути - продолжение первого, только с классами
Ваша разметка:

<div class="container">
    <div class="row">
        <article class="col-12">
            <div class="ArticteContainer">
                <div class="row justify-content-around">
                    <div class="col-12 col-md-8 MainColumn">
                    <aside class="col-12 col-md-3 RightColumn">

Здесь вы пытаетесь задавать некие семантические атрибуты посредством классов. Как результат - огромное количество вложенных блоков.
Блок ArticteContainer, как таковой, не нужен - у него родитель article: скринридер или робот "поймут", что внутри Статья. А если вынесите из него aside, то и div.row.justify-content-around не понадобится.

Я бы, наверное, попытался привести разметку к виду типа такого:

<div class="container">
    <div class="row">
        <article class="col-12 col-md-8 MainColumn"></article>
        <aside class="col-12 col-md-3 RightColumn"></aside>

и с количеством элементов попроще, и классы прописаны
  •  

alexburnTopic starter

Val_Ery, премного благодарен за расширенный ответ. Я тут поставил расширение HTML5 Outliner для Хрома, думаю с его помощью проще будет собрать верстку.