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

[alexburn]

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

[Val_Ery]

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

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

(нажмите чтобы показать/скрыть)

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

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

[alexburn]

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

[Val_Ery]

гугл-хром что-то не так сохранил

Понял...

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

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

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

Код:

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

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

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

Код:

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

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

Код:

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

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

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

Код:

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

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

Код:

Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.и с количеством элементов попроще, и классы прописаны

[alexburn]

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