Создание HTML5 с умом

Вы использовали HTML5 на своем последнем веб-сайте? Или вы слишком напуганы, чтобы даже попробовать? HTML5 не сильно изменился в том, как вы создаете веб-страницы, но может быть полезно ознакомиться с мельчайшими подробностями хорошо написанного документа HTML5, чтобы вы могли понять, как создать страницу HTML5 и зачем вам нужны различные элементы и функции. .

Здесь мы познакомим вас с документом HTML5 и объясним новые и различные функции.

Начиная сверху

Первое, что отличает страницу HTML5 от страницы HTML 4.01, — это DOCTYPE. Это первая строка документа:

Но после этого это то же самое, что и HTML 4, вы помещаете элемент HTML, а затем элемент HEAD. Построение html5


<голова>

Очень важно, чтобы первым элементом внутри вашего элемента HEAD был набор символов META. Это поможет защитить вашу страницу.

<метакодировка=utf-8>

Элемент TITLE такой же, как в HTML 4.01. Опишите здесь название и назначение страницы. Помните, что НАЗВАНИЕ используется поисковыми системами в результатах и ​​веб-браузерами в закладках, поэтому оно должно быть хорошо написано.

Пример документа HTML5

Поместив элемент LINK в одну внешнюю таблицу стилей сразу после элемента TITLE, вы ускорите загрузку страниц. Затем вы можете перечислить любые другие мета-теги, которые хотите включить. Единственное, что действительно важно, — это тег описания META. Это используется поисковыми системами для описания страницы. Но вы также можете включить ключевые слова META, если хотите.

<ссылка rel=таблица стилей href=styles.css>

Последним в элементе HEAD должны быть любые сценарии, которые вам могут понадобиться для загрузки, такие как jQuery и HTML5Shiv, чтобы помочь IE 8 и ниже просматривать ваши страницы HTML5 так хорошо, как они могут.





Начните создавать свой документ

Элемент BODY — это место, где вы начинаете использовать все новые элементы секционирования HTML5. Это делит вашу страницу на разделы, которые можно выделить и просмотреть семантически.

<тело>

Как правило, первая часть вашей страницы представляет собой раздел заголовка для всей страницы. В нем вы можете найти логотип, заголовок страницы, слоган и, возможно, основную навигацию. Вы можете использовать элемент HEADER для определения раздела заголовка.

<заголовок>
Мой логотип

Этот пример страницы помещает заголовок страницы и подзаголовок в HGROUP, чтобы они воспринимались как один заголовок любыми функциями структурирования, и они не создавали отдельных подразумеваемых разделов.

<группа>

Название страницы

Подзаголовок страницы

Существует также навигация, обозначенная элементом NAV.

<навигация>

Основная навигация

<ул>

  • Ссылка
  • Ссылка

    Мясо вашего документа

    Мне нравится думать об элементе ARTICLE как о сути вашей страницы, но на самом деле это любой контент на странице, который может быть синдицирован. Маловероятно, что вы не будете использовать элемент ARTICLE на странице, так как на большинстве страниц вы хотите, чтобы ваши читатели нашли в них что-то ценное, и эта примерная страница не является исключением.

    <статья>

    Содержание главной страницы

    … Основное содержание здесь

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

    <рисунок>
    Изображение, которое может остаться вне потока

    Это цифра для статьи

    Любой раздел вашей страницы может иметь HEADER или FOOTER. В этой статье нет ЗАГОЛОВКА, но есть НИЖНИЙ СТОЛ.

    <нижний колонтитул>

    Текст нижнего колонтитула


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

    Дополнительная информация

    Почти на каждой веб-странице есть информация, выходящая за рамки основного содержания страницы. Этот контент может храниться в элементе ASIDE. Поскольку этот ASIDE находится за пределами ARTICLE, это сообщает браузеру, что содержимое косвенно связано с сайтом в целом, а не с конкретной статьей.

    <в сторону>

    Помните, что каждый раздел должен иметь заголовок. Я записал их в этом документе как все элементы H1, но программам чтения с экрана это может быть трудно интерпретировать. Поэтому вы можете построить их в иерархии (H1, затем H2, затем H3 и т. д.), как вы это делали в документах HTML 4.01.

    Вспомогательная информация о сайте

    Эта боковая панель состоит из трех отдельных элементов. Эти элементы семантически не являются ни статьей, ни навигацией, поэтому я использовал самый общий из элементов секционирования, SECTION.

    <раздел>

    Блогролл

    <р>…

    <раздел>

    Твиттер-лента

    <р>…

    <раздел>

    Реклама

    <р>…

    Нижняя часть страницы

    Последнее, что вы, вероятно, увидите в документе HTML5, — это ФУТЕР. Он содержит информацию, которая обычно находится в нижнем колонтитуле большинства веб-страниц, например, дополнительную навигацию, информацию об авторских правах и контактные ссылки.

    <нижний колонтитул>

    Нижний колонтитул страницы

    Авторское право © 2013 Jane Doe

    Этот нижний колонтитул содержит дополнительную навигацию, которую я окружил элементом NAV. Вам не нужно окружать каждый аспект навигации элементом NAV, только наиболее важные области навигации.

    <навигация>

    Нижний колонтитул

    <ул>

  • Ссылка
  • Ссылка

    И, наконец, документ HTML5 заканчивается, как и любой другой документ HTML, закрывающими тегами BODY и HTML.


  • Похожие записи

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *