Структура HTML-документа определяет базовый «скелет» для будущего сайта, вариацию которого мы рассмотрим в данном материале. Код выполнен по стандарту HTML5 и кратко изложены основные тезисы элементов. Он подойдет как для начинающего верстальщика в целях разобраться, что собой представляет каркас страницы, так и профессионального вебмастера в качестве быстро используемого шаблона в своих работах.
Шаблон «скелета» HTML-страницы
Приведем исходный HTML-код с некоторыми дополнительными вставками для дальнейшей визуализации с помощью CSS и JS:
В полученном шаблоне наш «скелет», при условии что файл стилей (style.css) составлен верно, преобразуется в страницу такого типа:
Теги и атрибуты
Разберем основные теги и атрибуты, примененные в примере:
- – указание браузеру, как интерпретировать данную страницу, к какой версии принадлежит HTML-документ. В нашем случае подразумевается стандарт HTML5.
- – контейнер для всего содержимого страницы с указанием принадлежности сайта к конкретному языку.
- – технический контейнер, направленный на составление информации о странице, подключения стилей и скриптов.
- – кодировка сайта.
- – название страницы. Придерживайтесь правильного заполнения тега Title.
- – мета-описание документа. Опять же, существуют некоторые правила грамотного заполнения метаданных.
- – подключение файла каскадных таблиц стилей (CSS) для стилизации и оформления элементов.
- – иконка сайта, отображаемая в браузере.
- – подключение внешней библиотеки JQuery последней версии.
- – условие, при котором посетитель, зашедший с браузера Internet Explorer 9, получит поддержку новым тегам, описанным в HTML5.
- – шапка сайта.
- – навигация по ресурсу непосредственно в шапке. Может быть также использован как в aside, так и в footer.
- – основной контент документа.
- – секция для одного типа содержания. Допустимо наличие несколько одноименных тегов.
- – заголовок страницы.
- – боковая колонка, также именуемая как «сайдбар».
- – подвал сайта.
Старайтесь верстать «чистый» код, без дополнительного мусора. Спасибо за внимание.
Создание простого сайта html в Блокноте за 14 минут.
31,614 total views, 40 views today
Источник: lospirata.ru
Пустой шаблон HTML5
В новом стандарте многое упростилось и теперь базовая часть выглядит так:
Новые теги HTML5
В HTML5 для структуры кода введено несколько новых тегов: , , , , , которые заменяют в некоторых случаях привычный . Сделано это для поисковых роботов, чтобы они лучше распознавали код страниц и отделяли основной контент от вспомогательных элементов.
Создаем простой сайт HTML в блокноте. Пошаговая инструкция (HTML пример)
С использованием новых тегов пустой шаблон HTML5 может выглядеть так:
Упрощение написания DOCTYPE
Вспомним как было раньше, в HTML4 тег DOCTYPE выглядел так:
Теперь же запись минимальна, проще, наверное некуда :
Похожие упрощения произошли и с остальными тегами, так что переход на стандарт HTML5 существенно облегчает написание.
Необязательные теги в HTML5
Новый стандарт принес много послаблений верстальщикам. В частности, использование элементов HTML, HEAD и BODY уже не является обязательным для разметки HTML5. Если их нет, то браузер все равно считает, что они существуют. По сути из обязательных в HTML5 остался только .
Трактовка русского языка как основного языка HTML документа
Тег определяет язык документа. В сети регулярно возникают дискуссии о правильном его написании, в частности правильность написания «ru-RU». Я склоняюсь к варианту, что «-RU» является избыточным, так как у русского языка нет диалектов и вариантов написания как у Английского языка (Британский и Американский). Суффикс RU уточняет, где говорят на русском языке. То есть если en-US означает «английский язык на котором говорят в США», то ru-RU означает «русский язык на котором говорят в России», что является излишним.
В прочем, ничего страшного не случится, если вы и дальше будете использовать вариант «ru-RU».
Благодарности
При написании статьи были использованы следующие источники:
- http://snipplr.com/view/42713/
- https://www.sitepoint.com/a-basic-html5-template/
- https://html5book.ru/neobyazatelnye-tegi-html5/
- http://htmlbook.ru/samlayout/verstka-na-html5/novye-tegi
Источник: moonback.ru