Перевод статьи Going Places with HTML and CSS – Times Open
Скорее всего первое что вы изучали, когда начали программировать были HTML и CSS. Они являются основой веб страницы и хотя их легко понять, но иногда сложно выучить. HTML предлагает большое количество инструментов, которые помогут точнее определить объекты на странице и оптимизировать поисковую выдачу; в CSS недавно вышел релиз нового инструмента с названием Grid, который предоставляет основу для макета, адаптивного под экраны различного размера.
Ориентирование в продвинутых инструментах HTML и CSS может быть достаточно нетривиальной задачей. Эта статья направлена на то, чтобы помочь разобраться в некоторых из них.
Язык гипертекстовой разметки или HTML, самый популярный вид коммуникации с вебом, так как он сообщает браузеру как отображать на странице такие элементы как картинки или текст. Так как этот язык, который управляет отображением контента, очень важно использовать HTML теги, чтобы недвусмысленно описать тип контента на странице. Применение семантических тегов может продвинуть ваши страницы в поисковой выдаче и сделать их более доступными для читателей с ограниченными возможностями.
Написание семантического HTML означает написание понятного HTML, в котором теги отражают значение контента, содержащегося в них. Семантический HTML служить как прослойка коммуникации между разработчиками, работающими над кодом, а также сообщает браузерам, поисковым движкам и программам чтения с экрана как работать с контентом страницы. В сущности, семантический HTML это <div> с описанием.
Как использовать семантический HTML
Семантический HTML помогает создать веб-страницу с четко описанной структурой, что способно снизить двусмысленность. Он также улучшает доступность страницы, позволяя программам чтения с экрана - программному обеспечению, которое просматривает содержимое страницы и читает его вслух - перемещаться по страницам и передать больше информации пользователю.
Вот несколько общих семантических тегов HTML:
<header>
Этот тег помогает определить любой вводный контент, такой как меню или логотип. Этот тег может присутствовать где угодно на странице, за исключением тега <footer>. Также на одной странице может присутствовать несколько тегов <header>. Например, используйте этот тег, чтобы обернуть основной заголовок с вводным текстом, как показано ниже:
<nav>
Основное меню страницы может быть обернуто в тег <nav>. Это помогает поисковым роботам и идентифицирует основное меню более четко, в случае если на странице присутствуют другие методы навигации.
<section>
Используйте тег <section> вместо <div> чтобы более явно обозначить часть документа, который содержит однородный контент. Оберните блок параграфов, изображений или комбинацию из тегов, чтобы показать, что они связаны между собой основной идеей.
Тег <article> предназначен для определения независимого контента, это значит, что он должен иметь смысл вне контекста страницы, как в RSS ленте или на другой платформе. Используйте этот тег, чтобы обернуть отдельную новость или статью блога.
<footer>
Также как и <header>, используется для обозначения содержимого нижнего колонтитула, включая навигацию, данные об авторе или копирайт. На странице также может быть несколько тегов <footer>. Как и тег <header> , <footer> может быть размещен где угодно на странице, но обычно размещается перед закрывающим тегом </section> или </body>, как показано ниже.
Семантический теги заголовков
Важно заметить, что на странице должен быть один тег <h1>! Любой тег заголовков нижнего уровня ( <h2>, <h3>, и т.д.) считается подзаголовками и не создают новый раздел.
Как насчет <div>?
Все выше сказанное не означает, что тег <div> не имеет значения, но он должен использоваться когда это необходимо.
Пример разметки ниже показывает как использовать некоторые из этих тегов более эффективно.
Поисково-оптимизированный HTML
Поисково-оптимизированный HTML, или SEO HTML, может помочь поисковым движкам найти вашу веб-страницу, а вам получить большую аудиторию. Как страница появляется в поисковой выдаче может контролироваться SEO разметкой.
Вот некоторые SEO теги:
<head>
Самый важный SEO тег, находится внутри тега <head>. Этот раздел практически не влияет на отображение вашей веб-страницы, но большая часть из его содержимого имеет важное значение на результаты поисковой выдачи.
<title>
Это то что отображается на странице результатов поиска. Тег <title> должен содержать название вашей страницы и возможно часть содержимого вашей страницы.
<meta name=”[ваше описание]”>
Это описание вашей страницы в поисковой выдаче. Убедитесь, что оно подробное и точное.
Например:
Вот пример этих SEO тегов на практике:
Open Graph теги
Еще один полезный HTML инструмент это open graph теги, которые необходимы для корректного отображения контента в социальных сетях при добавлении ссылки на страницу. Например, контент, который появляется в Facebook когда вы делитесь ссылкой, такой как название статьи, автор и описание контролируется open graph tags.
Есть четыре обязательных свойства: название, тип, изображение и URL. Дополнительные теги метаданных могут содержать аудио, описание, язык по умолчанию и другие. Узнать более полную информацию и почитать документацию можно на официальном сайте http://ogp.me
Для того чтобы сделать из вашей страницы graph объект, просто добавьте дополнительные мета теги в раздел <head> вашего HTML с соответствующими атрибутами как показано ниже:
Изображение Jason Fujikuni
CSS Grid
В то время как семантические теги HTML позволяют нам создавать структурированную и простую для чтения разметку, они не влияют на отображение содержимого страницы в браузере. Каскадная таблица стилей или CSS, именно там мы определяем цвет, расположение, шрифт и другие стили. CSS может также использоваться для контроля над разметкой страницы и как элементы изменяются в зависимости от размера экрана.
Есть множество способов контролировать разметку страницы с помощью CSS — таблицы, установка ширины, флоаты, флексбокс — и все они имеют свои уникальные особенности. Последний выпущенный инструмент называется CSS Grid или Grid, может разделить любую страницу на две плоскости колонки и ряды которые могут контролироваться CSS правилами. Это реализуется путем применения CSS правил как к родительскому (контейнеру) так и к дочерним элементам (элементы, вложенные в контейнер). Теперь не нужно никаких флоатов или маржинов чтобы сделать страницу адаптивной.
Очень важно обеспечить доступ пользователю к вашему контенту вне зависимости от того, какое устройство он использует. CSS Grid может быть полезен для создания понятных макетов страниц, которые адаптируются под различные размеры экранов.
Ячейки сетки не имеют фиксированного размера. Если дизайн требует расположить ячейку сетки в определенном месте, вы можете применить CSS свойства `grid-column` и `grid-row` к этой ячейке. Эти свойства определяют начальное и конечное положение ячейки в сетке. Это полезно, если дизайн требует определенного расположения элементов сетки на макете страницы, для мобильных телефонов, который отличается от макетов для планшета и настольного компьютера.
Вы можете изменить расположение любого блока в сетке, не беспокоясь, что нарушите макет.
Есть много способов отобразить макет с помощью CSS и может быть достаточно сложно какой из них использовать. Хорошее правило: если вы можете нарисовать сетку поверх макета, вы должны использовать CSS Grid. Если сетка не работает, используйте flexbox.
Создавая веб-страницу необходимо помнить о своей аудитории и думать о том, в каком виде пользователи получат контент. Описанные здесь инструменты помогут вам упростить макеты, сделать страницы более доступными и улучшить их отображение в поисковой выдаче.