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

Автор Тема: Семантическая верстка HTML5  (Прочитано 675 раз)

Оффлайн alexburnАвтор темы

  • Бизнес оценка: (1, 100%)
  • КМС
  • *****
  • СПАСИБО: 1058
  • Сообщений: 3399
  • Карма: 72
  • Пол: Мужской
  • Нужна прога для компа?
    • Прикладные программы на заказ

Оффлайн alexburnАвтор темы

  • КМС
  • *****
  • Доп. информация
    • Бизнес оценка: (1, 100%)
    • СПАСИБО: 1058
    • Сообщений: 3399
    • Карма: 72
    • Пол: Мужской
    • Нужна прога для компа?
      • Прикладные программы на заказ
Приветствую, ребята! Подскажите пожалуйста с таким вопросом. Переделываю себе сайт на ASP (сейчас крутится на Joomla). Хочу сделать корректную семантическую верстку. Читал различные статьи, что-то в голове отложилось, но насколько верно все сделал - терзают сомнения. Поэтому хочу обратиться к специалистам фронта :) . В прикрепленных файлах структура каталога статей и материала, покритикуйте пожалуйста, как должно быть ? Буду рад любой критике и любым примерам реализации.


Оффлайн Val_Ery

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 141
  • Сообщений: 247
  • Карма: 28

Оффлайн Val_Ery

  • Постоялец
  • ***
Re: Семантическая верстка HTML5
« Ответ #1 : 18-12-2020, 10:49:04 »
alexburn,
Ну, как бы, рецептов "Как должно быть" не существует: вы вправе использовать ту разметку, которая позволяет вам получить желаемый результат.

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

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

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

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

Оффлайн alexburnАвтор темы

  • Бизнес оценка: (1, 100%)
  • КМС
  • *****
  • СПАСИБО: 1058
  • Сообщений: 3399
  • Карма: 72
  • Пол: Мужской
  • Нужна прога для компа?
    • Прикладные программы на заказ

Оффлайн alexburnАвтор темы

  • КМС
  • *****
  • Доп. информация
    • Бизнес оценка: (1, 100%)
    • СПАСИБО: 1058
    • Сообщений: 3399
    • Карма: 72
    • Пол: Мужской
    • Нужна прога для компа?
      • Прикладные программы на заказ
Re: Семантическая верстка HTML5
« Ответ #2 : 19-12-2020, 11:05:37 »
Val_Ery, извиняюсь, гугл-хром что-то не так сохранил. Вот исправленная верстка.

Оффлайн Val_Ery

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 141
  • Сообщений: 247
  • Карма: 28

Оффлайн Val_Ery

  • Постоялец
  • ***
Re: Семантическая верстка HTML5
« Ответ #3 : 19-12-2020, 19:38:01 »
гугл-хром что-то не так сохранил
Понял...

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 не понадобится.

Я бы, наверное, попытался привести разметку к виду типа такого:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.и с количеством элементов попроще, и классы прописаны
« Последнее редактирование: 19-12-2020, 19:45:42 от Val_Ery »

Оффлайн alexburnАвтор темы

  • Бизнес оценка: (1, 100%)
  • КМС
  • *****
  • СПАСИБО: 1058
  • Сообщений: 3399
  • Карма: 72
  • Пол: Мужской
  • Нужна прога для компа?
    • Прикладные программы на заказ

Оффлайн alexburnАвтор темы

  • КМС
  • *****
  • Доп. информация
    • Бизнес оценка: (1, 100%)
    • СПАСИБО: 1058
    • Сообщений: 3399
    • Карма: 72
    • Пол: Мужской
    • Нужна прога для компа?
      • Прикладные программы на заказ
Re: Семантическая верстка HTML5
« Ответ #4 : 20-12-2020, 10:19:04 »
Val_Ery, премного благодарен за расширенный ответ. Я тут поставил расширение HTML5 Outliner для Хрома, думаю с его помощью проще будет собрать верстку.


 

Похожие темы

  Тема / Автор Ответов Последний ответ
4 Ответов
2264 Просмотров
Последний ответ 01-11-2010, 09:46:43
от armid
6 Ответов
2818 Просмотров
Последний ответ 12-05-2012, 17:17:33
от Clever
1 Ответов
1300 Просмотров
Последний ответ 25-11-2011, 15:19:37
от langraf
12 Ответов
3395 Просмотров
Последний ответ 28-09-2012, 23:52:37
от fr1end
28 Ответов
7053 Просмотров
Последний ответ 07-07-2012, 14:50:32
от Clever