Простой минималистичный шаблон HTML5 для создания сайта

11.12.2021 Программирование

При создании сайта с нуля, вам необходима будет верстка (шаблон) сайта. Можно взять готовый сверстанный шаблон сайта, но тут есть проблемы, вам придется переделывать его под себя. По этому наилучшим выходом будет взять просто готовый шаблон верстки сайта с использованием стандарта HTML5.

Большинство сайтов состоят из следующих блоков: шапки, контентной зоны, сайдбара и подвала. Т.е. базовая часть верстки сайта представляет из себя такой вот каркас:

<!doctype html>
<html lang="ru">
	<head>
	  <meta charset="utf-8" />
	  <title>Мой шаблон HTML5</title>
	</head>
	<body>
		Простой пример верстки сайта
	</body>
</html>

Основные блоки сайта

В HTML5 введено несколько новых тегов: <article>, <aside>, <footer>, <section>, <header>, <nav>, которые заменяют в некоторых случаях привычный тег <div>. Такой подход улучшает семантику верстки и поисковые роботы лучше распознают содержимое страниц сайта, и лучше основной контент от вспомогательных элементов сайта. Поэтому при верстке сайта очень желательно использовать эти теги.

Использование тегов в блоках

Для "шапки" (верхняя часть сайта) обычно используют тег <header>, в это блоке обычно находятся логотип сайта и часть меню. Для блока "контентная зона" используется тег <article>, который как раз и отвечает за содержимое сайта. Для "сайдбар" используется тег <aside> Для подвала используется тег <footer> Для других блоков обычно используют <section>

Тег <nav>, используется для меню и обычно используется внутри выше перечисленных тегов.

Шаблон HTML5

С учетом выше перечисленных подходов у нас получается вот такая вот заготовка верстки под наш сайт:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <title>Мой сайта</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
	<header>Шапка сайта</header>
	<aside>
		Сайдбар
		<section>
			Какой то блок в сайдбаре
		<section>
	</aside>
	<article>
		<nav>Меню навигации</nav>
		Контентая зона
	</article>
	<footer>
		Подвал сайта
	</footer>
</body>
</html>

На основании этого шаблона уже можно дальше выстраивать сайт, добавляя новые блоки в структуру шаблона.

Упрощение написания DOCTYPE

Вспомним как было раньше, в HTML4 тег DOCTYPE выглядел так:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

Теперь же запись минимальна, проще, наверное некуда :

<!doctype html>

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

Необязательные теги в HTML5

Новый стандарт принес много послаблений верстальщикам. В частности, использование элементов HTML, HEAD и BODY уже не является обязательным для разметки HTML5. Если их нет, то браузер все равно считает, что они существуют. По сути из обязательных в HTML5 остался только <!doctype html>.

Трактовка русского языка lang="ru" как основного языка HTML документа

Тег определяет язык документа. В сети регулярно возникают дискуссии о правильном его написании, в частности правильность написания «ru-RU». Я склоняюсь к варианту, что «-RU» является избыточным, так как у русского языка нет диалектов и вариантов написания как у Английского языка (Британский и Американский). Суффикс RU уточняет, где говорят на русском языке. То есть если en-US означает «английский язык на котором говорят в США», то ru-RU означает «русский язык на котором говорят в России», что является излишним.

В прочем, ничего страшного не случится, если вы и дальше будете использовать вариант «ru-RU».