HTML5: использование элементов секционирования

HTML5 - самая последняя версия разметки HTML. Если вы не были обучены использованию HTML5 или еще не заставили себя использовать / изучать его, новые элементы могут сбивать с толку. Многие разработчики, привыкшие к кодированию в div, обычно не могут понять смысл всех новых элементов секционирования в HTML5. «Почему я не могу просто использовать div, как раньше?» «Какой смысл использовать эти теги, когда они делают то же самое, что и div?». Вот вопросы, на которые я собираюсь ответить для вас. Я также постараюсь помочь вам понять правильное использование этих новых элементов секционирования.

Начнем с перечисления новых элементов секционирования:

• <Заголовок>
• <Нав>
• <Раздел>
• <Статья>
• <В сторону>
• <Колонтитул>
• <Главная>

Если вы заметите из этого списка, мы сможем удалить дополнительные идентификаторы из наших элементов. Многие разработчики создают разметку, используя этот формат:

Обратите внимание на идентификатор на div. С новыми элементами мы теперь можем устранить некоторые из этих «беспорядков». Вместо этого теперь мы можем настроить нашу страницу примерно так:

Это обеспечивает более чистую наценку. Теперь поговорим об этих новых элементах.

• <Header> - довольно понятен. Это будет контент, который вы обычно вставляете в <div id = ”header”>.

• <Main> - указывает основную часть контента или самый важный контент на странице. У вас может быть только один тег <main> на страницу. В этом теге вы можете использовать другие теги секционирования, чтобы разделить ваш контент.

• Тег <footer> - именно это. Вы добавите содержимое нижнего колонтитула так же, как и в свой старый контейнер <div id = ”footer”>.

Надеюсь, это немного поможет вам в понимании этих основных тегов, и, надеюсь, вы сможете найти их применение. Теперь давайте поговорим о других тегах, которые я упоминал ранее. <nav>, <section>, <article> и <aside>. В приведенном ниже примере вы увидите их использование и объяснение после.

Посмотрите на структуру. Отсутствуют контейнеры, которые я обычно имел бы в своей разметке, но я удалил их с целью сосредоточения.

• <Nav> - это оболочка, которая объявляет меню навигации. ** Вы должны иметь только на <nav>, поскольку это указывает на самую важную навигацию или навигацию самого верхнего уровня на вашем сайте. Вот почему он находится в заголовке и в теге <nav>. Любая другая вторичная навигация должна быть размещена только в теге <ul>. **

• <Section> - это то место, где большинство людей растеряны. Чем это отличается от div? <Section> - это контейнер для вас, чтобы сгруппировать связанный контент на странице. <Div>, с другой стороны, не имеет смысла и может использоваться для переноса содержимого в <section> в целях стилизации, но, если есть более подходящий элемент для использования, вам следует это сделать.

• <Article> - это элемент, используемый для обёртывания контента, который может иметь смысл, если он стоит отдельно. Для этого не нужен остальной контент на странице, чтобы понять это.

• <Aside> - используется для таких вещей, как боковая панель. Он должен содержать контент, связанный с основным контентом на странице, но без него основной контент не потеряет своего значения.

Надеемся, что эти пояснения и иллюстрации помогут вам разобраться в этих новых элементах секционирования или контейнера в HTML5. Есть помощники, которые вы можете использовать, чтобы заставить старые браузеры понимать большинство элементов HTML5. Если вы хотите больше информации об этих элементах и ​​больше элементов HTML5, вы можете найти хороший список, перейдя в https://developer.mozilla.org/en/docs/Web/Guide/HTML/HTML5/HTML5_element_list

Есть много других ресурсов для вас, чтобы использовать также. Теперь я сказал, что объясню, почему мы должны сейчас использовать элементы HTML5. Помните, что те из вас, кто все еще думает, что сеть не готова к этой наценке, обратите внимание, что сегодня существует много сайтов HTML5, которые хорошо работают.

Новые элементы в некоторой степени помогают нам (разработчику), потому что мы можем устранить некоторые ненужные идентификаторы, и мы можем находить элементы намного быстрее, когда смотрим на разметку. Мы всегда будем использовать идентификаторы, но их следует использовать с осторожностью. Используйте их на верхнем уровне или «родительских» элементах. Затем вы можете настроить таргетинг на дочерние элементы, начиная с идентификатора родителя.

Другая причина, по которой эти теги станут более важными, - это SEO. Поисковые системы будут и уже ищут более значимую наценку. Поисковые системы хотят, чтобы ваш контент имел больше смысла и ассоциировался со смыслом разделов вашей страницы. По мере развития алгоритмов поисковых систем они будут отдавать предпочтение веб-сайтам с более содержательной и семантической разметкой. Да, это будет означать, что сайты, которые закодированы в таблицах и div, в конечном итоге увидят ошибку в своем рейтинге. Поэтому, если SEO имеет значение для вас или вашего клиента, что, я думаю, будет заботить клиента, нам нужно начать внедрять HTML5 на веб-сайтах наших клиентов. Вы можете прочитать статьи об этом, перейдя на следующие ресурсы:

http://www.webconfs.com/html5-seo-article-27.php

http://www.webdesignerdepot.com/2012/10/html5-and-seo/

http://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniques-you-must-know-net-13520

http://www.developerdrive.com/2012/09/seo-and-web-development-5-html5-tags-for-seo/

Похожие

Комментарии