Всем привет! Сегодня, как и обещал на предыдущем уроке, будем разбираться в семантических тегах html5. Начну со списка тегов для создания внешнего шаблона страницы:
- <header> - шапка документа либо секции
- <nav> - основная навигация
- <aside> - вспомогательный контент
- <section> - семантически обособленная секция
- <main> - главный контент страницы
- <footer> - подвал документа либо секции
Далее посмотрим какие есть внутренние семантические теги:
- <article> - статья или новость
- <figure> - автономный контент (видео, картинка и т.п.)
- <figcaption> - подпись для figure
- <details> - дополнительные сведения
- <summary> - видимая подпись к details
- <mark> - выделенный текст
- <time> - время/дата
До html5 вместо этих тегов использовали <div> c классами CSS. Благодаря этим тегам сайты стали более удобочитаемы для разработчиков и для поисковых роботов. Также были привнесены новшества для упрощения создания графических и мультимедийных объектов без использования сторонних плагинов.
90% сайтостроителей используют только эти 6 основных семантических тегов, и этого на само деле бывает достаточно для большинства сайтов. Давайте же применим эти теги к нашему мини-сайту из прошлого урока.
Заключил весь контент в тег <main>. Добавил основную навигацию <nav> в виде списка <ul> с ссылками <a> (которые пока никуда не ведут) в блоке вспомогательного контента <aside>. К картинке добавил подпись <figcaption>, которая не работает без <figure>. Еще добавил подвал <footer>, чтобы был.
Данный урок был последним из базового курса по html. Далее буду продолжать рассказывать про CSS и JavaScript. Список всех уроков html прилагаю:
- HTML для начинающих #5
- HTML для начинающих #8
