Html разметка страницы: Разметка страницы HTML — с примерами

22.01.2018 alexxlab

Содержание

Разметка страницы HTML — с примерами

Основные термины и понятия в HTML разметке:

<Article>, <nav>, <header>, <footer> — HTML теги, которые используются для разделения информации на блоки.
Футер — нижняя часть веб-страницы. Содержит в себе контактную информацию.
Шапка — верхняя часть страницы. Содержит в себе логотип, а также навигационную панель.

В этой статье мы поговорим с вами о том, как создать каркас страницы, а также о том, в каких блоках располагать те или иные элементы.

Блочная верстка стала довольно популярной и используется практически везде. Раньше, в HTML 4, блочные конструкции создавались с помощью блоков div. Если открыть любой сайт 2012-2014 года, а затем открыть его исходный код, то вы увидите длинный и сложный код нагроможденный блоками <div>.

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

Основная проблема — большое количество блоков <div>, их могло быть и до 50,100 и даже 200. Такое нагромождение могло вызвать путаницу в коде — многие разработчики очень часто путались в своем коде. Это делало разработку медленной.

HTML 5 изменил эту проблему, добавив несколько семантических блоков. Каждый блок был настроен под определенную информацию, как «nav» для навигационной панели, или «footer» для подвала.

Кроме этого, новая версия HTML уделила большое внимание семантическому ядру сайта. Поисковики имели лучшее понимание информации, которая расположена в определенном блоке.

Семантические элементы. HTML 5

Перед тем как говорить о разметке веб-страницы, давайте рассмотрим основные теги-контейнеры:

<Header> — необязательный тег, который может использоваться для навигации, главного заголовка, либо же для размещения отдельного блока с информацией.
<Nav> — контейнер для навигации страницы или сайта. Может находиться в теге header, но это необязательно. На странице может присутствовать несколько блоков <nav>.
<Article> — блок статьи. Используется для размещения статей для сайта или блога, каких-либо публикаций или комментариев. Хорошо подходит для дублирования веб-страницы, так как содержимое очень легко изменяется.
<Section> — разделяющий блок. Его основной функцией не является оборачивание информации в определенный блок. Чаще всего используется для разделения сайта на разделы и группирует их.

<Aside> — блок для дополнительной информации. Чаще всего содержит в себе блок nav, при создании боковой панели. Располагается сбоку, может содержать блоки с рекламой, различными датами и ссылками.
<Footer> — подвал сайта — блок-колонтитул. Обычно содержит в себе информацию об авторе статьи, сведения об авторском праве и контактную информацию. Располагается внизу, под всеми остальными блоками.

Существует ещё 7 HTML5 тегов, которые можно использовать для создания различных блоков. Они используются реже, поэтому мы не будем их рассматривать.

Разметка страницы

Когда мы познакомились с основными тегами-контейнерами, давайте приступим к созданию простого HTML каркаса. Откройте ваш HTML документ и запишите туда все стандартные теги, по типу <html>, <head>, <body> и <meta>.

Создание нашего макета будет проходить в 3 этапа:

Создание шапки.
Создание основных блоков.
Создание футера.

Для начала необходимо создать шапку для нашей страницы.

Создаем тег <header>, а в нем располагаем заголовок(будет использоваться вместо логотипа) и список с пунктами меню.

Создадим главный блок страницы. Это будет тег-контейнер <section>, в котором будет располагаться список преимуществ товара и кнопка перелистывания.

Далее приступаем к созданию основных блоков. Для них будем использовать теги <section>. Первый блок обернем в тег <article>, так как в нем будет располагаться публикация с информацией о продукте.

Второй блок будет содержать в себе прайс-лист и кнопку. Внутри создаем 3 блока <div>, в которых создаем списки с информацией. Ниже располагаем кнопку.

Далее идет создание футера страницы

Теперь расположим подвал страницы, в котором будет находиться контактная информация и кнопки социальных сетей.

Создаем тег <footer> и записываем основную контактную информацию. Кроме контактов, нам необходимо разместить информацию о копирайте.

Заключение

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

Если хотите, можете самостоятельно исследовать HTML-документ. Можете добавить туда какие-либо блоки или заменить информацию, по вашему усмотрению. Главное, не меняйте общую структуру документа, он нам ещё понадобится.

А если у вас возникли трудности с размещением элементов или записью HTML кода, то можете скачать наши исходники. Удачи в изучении!

Скачать пример разметки текста

Скачать пример разметки текста Теги:

Основы CSS и HTML. Блочная верстка — Web-Lesson

Этот урок рекомендуется тем, кто только начинает осваивать премудрости создания сайтов. В нем даны основные понятия о HTML и CSS. Пошагово выполняя инструкции данного урока, вы уже через несколько минут сверстаете шаблон для своего сайта.

Шаблон вебсайта мы будем делать с помощью

блочной верстки, использую тег – «DIV».

Шаг 1 – Разметка веб страницы с помощью тегов HTML

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

HTML — это язык разметки гипертекста. С его помощью создается структура веб страницы. Для этих целей используются теги HTML. Они заключаются в скобки «<» и «>».

Теги, как правило следуют в паре — открывающий и закрывающий. Последний отличается тем, что имеет после первой скобки знак «/». (Например: <div></div>). С помощью тегов вы определяете, что будет располагаться на вашей веб странице.

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

Простейшие теги веб страницы это:

<html>

<head>

<title></title>

</head>

<body>

</body>
</html>

Впоследствии, именно между тегами <body> вы будете размещать другие теги для разметки элементов веб страницы. Важным тегом для структурирования страницы является тег <div>. Используя его, вы можете делить свою страницу на блоки.

Внутри данного тега вы сможете разместить другие HTML теги, которые вам потребуются для создания содержимого вашего сайта (ссылки, текст, изображения и тд.). Все эти элементы впоследствии обретут свой стиль с помощью каскадных таблиц стиля CSS.

Теперь, используя графический редактор (Photoshop например) нарисуем блоки нашей веб страницы:

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

div:

<html>

<head>

<title></title>

</head>

<body>

<div id=»container»>

<div id=»header»>

</div>

<div id=»navigation»>

</div>

<div id=»menu»>

</div>

<div id=»content»>

</div>

<div id=»footer»>

</div>

</body>

</html>

Как видите, каждому тегу div мы дали определенный селектор ID. То есть каждому отдельному блоку нашей страницы мы дали свое название. Это необходимо для того, чтобы позже, задавая стиль блокам в файле CSS, мы могли отличать один блок от другого.

Существует два вида селекторов. ID — используется для уникальных блоков, таких, которые больше нигде на странице не повторяются. В то время как селектор CLASS — применятся для обозначения повторяющихся блоков.

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

Шаг 2 — прикрепление таблицы стилей CSS

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

Если вы уже открыли свою веб страницу в браузере, то ничего там не обнаружили. Это потому, что вы не наполнили свои блоки ни каким-либо содержимым, ни придали им какой-либо формы и цвета. Контент для блоков вы можете добавить между соответствующими тегами. А вот форму, расположение цвет и другие внешние проявления блоков мы зададим с помощью файла CSS.

Но для начала вы должны создать его. Назовем его style.css и разместим в той же папке, что и документ html. После этого в html файле, между тегами необходимо добавить следующую строчку:

<link rel=»stylesheet» type=»text/css» href=»style.css» />

Таким образом мы связываем эти два файла вместе. Теперь при отображении веб страницы браузер будет использовать соответствующий файл стилей.

Шаг 3 — задаем стиль

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

Для записи селекторов, кроме тега body, используются знаки «#» либо «.«. они следуют перед именем селектора. Первый применяется, чтобы указать на селектор ID, второй, соответственно на селктор CLASS. Селектор может иметь любое количество свойств. Которые заключаются в фигурные скобки «{}«.

#selector {

property:value;

}

либо

.selector {

property:value;

}

У нас имеются следующие селекторы:

body
container
header
navigation
menu
content
footer

Свойства и возможные значения CSS:

Фон (background) может быть задан изображением или цветом, либо и тем и другим одновременно. Чтобы отобразилось изображение, необходимо прописать путь к нему. Если фон задан цветом, то используется шестнадцатеричная система (#ffffff для белого цвета и тд.).

Свойство color используется для определения цвета текста.

font-family
— это свойство определяет семейство шрифтов, которыми будет отображаться текст. Как правило задается сразу три типа шрифтов. Поэтому, если браузер не смог отобразить первый, ему есть из чего выбирать (Trebuchet MS, Arial, Times New Roman).

font-size — размер текста, задается в различных системах измерения, здесь мы будем использовать пиксели.

margin — определяет местоположение блока. За точку отсчета при этом может выступать как окно браузера, так и границы других элементов веб страницы. Так как мы хотим разместить свою страницы посредине окна браузера, то запишем такие значения для данного свойства: 0px auto 0px auto. Запись может выглядеть проще 0px auto. Отсчет в случае задания данных значений идет по часовой стрелке: верх — право- низ — лево. Поскольку верх — низ, право — лево у нас совпадают, то дублировать их нет потребности.

width — ширина блока.

height — высота.

float — свойство, которое позволяет нам позиционировать элементы селектора, главным образом по левую или по правую сторону.

Теперь добавим код в наш файл стилей style.css (ведь вы его уже создали, да?):

body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}

#container {
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}

#header {
background: #838283;
height: 200px;
width: 900px;
}

#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}

#menu {
background: #333333;
float: left;
width: 200px;
height: 600px;
}

#content {
background: #d2d0d2;
float: right;
width: 700px;
height: 600px;
}

#footer {
background: #838283;
height: 180px;
width: 900px;
}

Примечание

На момент написания статьи не все браузеры корректно отображали созданную веб страницу. Для устранения этого недостатка можно использовать дополнительный блок, который следует разместить сразу за блоком content.

Вот его код HTML:

</div>

И CSS:

#clear {
clear:both;
}

А между тегами head записать, какую кодировку необходимо использовать браузеру, если вы вдруг попробуете добавить русский текст в свои блоки:

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />

Финальный код HTML:

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />

<title>Основы HTML и CSS</title>

<link rel=»stylesheet» type=»text/css» href=»style.css» />

</head>

<body>

<div id=»container»>

<div id=»header»>Шапка сайта

</div>

<div id=»navigation»>Блок навигации

</div>

<div id=»menu»>Меню

</div>

<div id=»content»>Контент

</div>

<div id=»clear»>

</div>

<div id=»footer»>Подвал сайта

</div>

</body>

</html>

CSS:

body {

background: #f3f2f3;

color: #000000;

font-family: Trebuchet MS, Arial, Times New Roman;

font-size: 12px;

}

#container {

background: #FFFFFF;

margin: 30px auto;

width: 900px;

height: 1000px;

}

#header {

background: #838283;

height: 200px;

width: 900px;

}

#navigation {

background: #a2a2a2;

width: 900px;

height: 20px;

}

#menu {

background: #333333;

float: left;

width: 200px;

height: 600px;

}

#content {

background: #d2d0d2;

float: right;

width: 700px;

height: 600px;

}

#clear {

clear:both;

}

#footer {

background: #838283;

height: 180px;

width: 900px;

}

Надеемся, данный урок позволил вам понять основы работы с HTML и CSS.

Вот как это выглядит в браузере:

Разметка HTML5

Стандартная разметка страницы HTML5

<!DOCTYPE HTML>
<html lang="ru">
  <head>
  <!-- Подключаемые файлы, метатеги, название страницы -->

  <!-- Кодировка страницы-->
  <meta charset="utf-8"/> 
  <title>Название страницы</title>
</head>
<body>
  <!-- Тело сайта, отвечает за вывод на страницу-->
  <header>
  <!-- Шапка сайта-->
  </header>
  <nav>
  <!-- Навигация -->
  </nav>
  <footer>
  <!-- Подвал сайта-->
  </footer>
</body>
</html>

header,nav,footer — новые теги HTML5, очень полезно их использовать, чтобы добиться лучшей SEO оптимизации сайта, они показывают поисковому роботу, где находится шапка,меню и подвал сайта.

SEO теги HTML5:

header	Шапка сайта
nav	Меню сайта
footer	Подвал сайта
section	Разделы документа
aside	Блок для сайдбара(размещения рубрик, ссылок, различных меток и любой информации)

Читайте — Таблица шрифтов html

HTML разметка для чайников

Для начала давайте определимся, что такое разметка? Как следует из самого термина, разметка – это расстановка меток, в нашем случае в коде хтмл документа, т.е. веб-страницы. В качестве меток здесь выступают теги, что позволяют определить границы действия разметки или создать элемент хтмл документа. Всё ещё непонятно? Тогда читайте дальше, и всё станет на свои места.

Основы разметки хтмал или что такое тег

Тег представляет собой конструкцию, начинающуюся знаком меньше (<) и заканчивающуюся знаком больше (>). Большинство тегов состоят из открывающегося и закрывающегося тегов. Отличие между ними состоит в том, что в открывающемся теге вы можете (если нужно) указать ряд дополнительных его свойств, используя так называемые атрибуты, а в начале названия закрывающегося тега указывается символ сэлш (/), например:

<p align=»right»>Текст параграфа, выровненный по правому краю.</p>.

В данном случае блочный тег p создаёт параграф, а атрибут align выравнивание содержимого параграфа по правому (right) краю.

Следует отметить, что в хтмл, теги бывают двух видов: блочными и строковыми. Блочные теги создают блочный элемент, зачастую имеющий отступы и ниже следующие элементы идут уже «с новой строки». Строчные теги предназначены для разметки фрагмента кода и не создают переноса строки.

Как говорится: в любом правиле есть исключения – это же верно и для тегов. Существуют теги, которые не имеют закрывающего тега и предназначены они для создания меток и элементов хтмл документа, например:

В данном случае строковый тег img вставляет на веб-страницу элемент в виде картинки, адрес которой прописывается в атрибуте src. Значением атрибута alt является альтернативный текст, который выводится в том случае, если картинка не доступна, а атрибут border задает толщину рамки вокруг картинки.

Чтобы Вам было легче запомнить всё выше изложенное, приведу небольшую и наглядную шпаргалку, которую Вы можете использовать для изучения HTML:

Краткий справочник по хтмл тегам

И так, мы уже познакомились с двумя тегами, так что их я опущу. Ниже я приведу ещё ряд тегом разметки хтмл документа и некоторые их атрибуты. Для начала этого будет более чем достаточно, но если вас интересует полный перечень хтмл тегов и их атрибутов, рекомендую заглянуть на сайт htmlbook.ru, а также добавить его в закладки как наиболее полный и удобный справочник по ХТМЛ и ЦСС. Продолжим?

Как сделать ссылку? Для этого вам нужно использовать строковый тег A, который размечает содержащийся в нём текст как ссылку – активный элемент веб-страницы при клике на который пользователь может перейти на другую веб-страницу, адрес которой указан в атрибуте href.

Пример	текст, со <a href=»http://www.wmascat.ru/»>ссылкой</a> на другую веб страницу.
Результат	текст, со ссылкой на другую веб страницу.

Как выделить текст жирным? Для этого вам нужно использовать строковый тег B, который устанавливает для содержащегося в нём текста жирное начертание шрифта.

Пример	текст, выделенный <b>жирным</b> шрифтом.
ЦСС аналог	текст, выделенный <span>жирным</span> шрифтом.
Результат	текст, выделенный жирным шрифтом.

Как сделать текст курсивом? Для этого вам нужно использовать строковый тег I, который устанавливает для содержащегося в нём текста курсивное начертание шрифта.

Пример	текст, выделенный <i>курсивом</i>, т.е. с наклоном.
ЦСС аналог	текст, выделенный <span>курсивом</span>, т.е. с наклоном.
Результат	текст, выделенный курсивом, т.е. с наклоном.

Как подчеркнуть текст? Для этого вам нужно использовать строковой тег U, который добавляет подчеркивание для содержащегося в нём текста.

Пример	текст, с добавлением <u>подчеркивания</u>.
ЦСС аналог	текст, с добавлением <span>подчеркивания</span>.
Результат	текст, с добавлением подчеркивания.

Как зачеркнуть текст? Для этого вам нужно использовать строковой тег S, который отображает текст как перечеркнутый.

Пример	текст, содержащий <s>зачеркнутое</s> слово.
ЦСС аналог	текст, содержащий <span>зачеркнутое</span> слово.
Результат	текст, содержащий зачеркнутое слово.

Как выделить код в тексте? Для этого вам нужно использовать строковой тег CODE, который обычно отображается браузером моноширинным шрифтом, например Courier New.

Пример	текст, выделенный как <code>программный код</code>.
ЦСС аналог	текст, выделенный как <span>программный код</span>.
Результат	текст, выделенный как программный код.

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

Пример	<pre>форматированный текст и ещё один форматированный текст</pre>
Результат	форматированный текст и ещё один форматированный текст

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

Пример	текст, выделенный <big>большим</big> шрифтом.
ЦСС аналог	текст, выделенный <span>большим</span> шрифтом.
Результат	текст, выделенный большим шрифтом.

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

Пример	текст, выделенный <small>маленьким</small> шрифтом.
ЦСС аналог	текст, выделенный <span>маленьким</span> шрифтом.
Результат	текст, выделенный маленьким шрифтом.

Как задать шрифт, цвет и размер шрифта в тексте? Для этого вам нужно использовать строковой тег FONT. Атрибут face здесь задаёт гарнитуру (название) шрифта, color – цвет шрифта, а size – его размер в условных единицах (от -7 до 7).

Пример	текст, выделенный другим <font face=»Arial» color=»#008000″ size=»5″>шрифтом и цветом</font>.
ЦСС аналог	текст, выделенный другим <span>шрифтом, цветом и размером</span>.
Результат	текст, выделенный другим шрифтом, цветом и размером.

Как сделать заголовок? Для этого вам нужно использовать блочные H теги, которые задают заголовки разного уровня, от 1 (самого большого) до 6 (самого маленького), что позволяет задать структуру опубликованной на веб-странице информации. Заголовки отличаются друг от друга размером шрифта и отступы, а также выделены жирным начертанием.

Пример	<h2>Заголовок</h2>
Результат:	Заголовок

Как сделать подстрочный шрифт? Для этого вам нужно использовать строковой тег SUB, который отображает шрифт в виде нижнего индекса, т.е. текст будет располагаться ниже базовой линии остальных символов строки и уменьшенного размера.

Пример	текст, выделенный шрифтом в <sub>нижнем</sub> индексе.
ЦСС аналог	текст, выделенный шрифтом в <span>нижнем</span> индексе.
Результат	текст, выделенный шрифтом в _нижнем индексе.

Как сделать надстрочный шрифт? Для этого вам нужно использовать строковой тег SUP, который отображает шрифт в виде верхнего индекса, т.е. текст будет располагаться выше базовой линии остальных символов строки и уменьшенного размера.

Пример	текст, выделенный шрифтом в <sup>верхнем</sup> индексе.
ЦСС аналог	текст, выделенный шрифтом в <span>верхнем</span> индексе.
Результат	текст, выделенный шрифтом в ^{верхнем} индексе.

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

Пример	текст, содержащий: <q>цитату</q>.
ЦСС аналог	текст, содержащий: <span>цитату</span>.
Результат	текст, содержащий: цитату.

Как оформить цитату в тексте? Для этого вам нужно использовать блочный тег BLOCKQUOTE, который предназначен для выделения длинных цитат в хтмл документе. Обычно такой текст отображается с отступами в 40 пикселей слева и справа, а также отбивкой сверху и снизу.

Пример	<blockquote>Цитата</blockquote>
Результат	Цитата

Как сделать перенос строки в тексте? Для этого вам нужно использовать блочный тег BR, который устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца p, использование тега br не добавляет пустой отступ перед строкой.

Как выделить фрагмент? Строковый тег SPAN не производит какого-либо преобразования со своим содержанием, что позволяет использовать его для задания цсс стилей заданной области. В данном случае указано цсс свойство text-decoration, которое добавляет оформление для текста, например: line-through – зачеркивание.

Пример	текст, выделенный <span>спаном</span>.
Результат	текст, выделенный спаном.

Как сделать слой в хтмл? Для этого вам нужно использовать блочный тег DIV, который создаёт слой без отступов.

Пример	<div align=»right»>Блок.</div>
ЦСС аналог	<span>Блок.</div>
Результат	Блок.

Как сделать разделитель в тексте? Для этого вам нужно использовать блочный тег HR, который рисует разделительную горизонтальную линию. Атрибут color задаёт цвет линии, size – размер, а noshade – отключает трехмерный эффект.

Пример	<hr color=»#008000″ size=»1″ noshade>
Результат

Как сделать список? В хтмл существует два основных вида списков: нумерованный (OL) и маркированный (UL). В данном случае приведен хтмл код маркированного списка, заданного блочным тегом UL. По умолчанию, в качестве маркера окружность (закрашенный кружочек), которая отображается в начале первой строки элемента списка, заданного тегом LI.

Пример	<ul> <li>Элемент списка 1.</li> <li>Элемент списка 2.</li> </ul>
Результат	Элемент списка 1. Элемент списка 2.

Безусловно, в своей статье я привел лишь основные хтмл теги, которые могут понадобиться вам при разметке веб-страницы. В большинстве случаев, для ХТМЛ разметки, это более чем достаточно. Единственное, что я опустил, но, что, безусловно, важно при разметке веб-страниц, это работа с таблицами. Их нужно изучать отдельно, т.к. там слишком много нюансов, а статья получилось и без того достаточно большой. На этом у меня всё. Спасибо за внимание. Удачи!

Короткая ссылка: http://goo.gl/3tUuon

Блочная верстка сайта — урок с примером

Раньше на просторах Интернета был широко распространён табличный тип вёрстки, которому посвящена отдельная статья. Однако со временем этот подход к созданию структуры сайта устарел, и на смену ему пришла блочная вёрстка.

Отличия блочной вёрстки от табличной

Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега <table>, то концепция блочной вёрстки основана на активном использовании универсальных тегов <div>, внутрь которых помещается содержимое, включая другие теги.

Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки <div>, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.

Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.

Суть блочной вёрстки

В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.

Каждая часть страницы помещается в свой блок <div>: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.

Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом <link>, или как минимум в контейнере <style> секции <head>.

Принципы блочной вёрстки

Первый — конечно же, повсеместное использование тега <div>, который можно назвать базовым элементом блочной структуры, но об этом было сказано уже достаточно много.

Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.

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

Пример блочной вёрстки

Но, сколько не теоретизируй, а понимать всё проще на примере.

Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.

Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».

Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:

<!DOCTYPE html>
<html>
<head>
    <title>Блочная вёрстка</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
	<div>
	<h3>header (шапка сайта)</h3>
	</div>
		 
	<div>
	<h3>Блок навигации</h3>
	</div>
		 
	<div>
	<h3>Левая панель</h3>
	</div>
		 
	<div>
	<h3>Основной контент страницы</h3>
	</div>
		 
	<div>
		 
	</div>
							   
	<div>
	<h3>footer (низ сайта)</h3>
	</div>
</div>
</body>
</html>

Разберём некоторые моменты.

<div> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри <table>. Назначение дочерних контейнеров должно быть понятно, за исключением разве что блока <div>. Это вспомогательный слой, его смысл будет понятен, когда вы увидите код CSS.

Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так.

Теперь добавим файл CSS, код которого приведён ниже.

body {
     background: #FFF;
     color: #000;
     font-family: Arial, sans-serif;
     font-size: 14px;
}

#header {
     background: #F5DEB3;
     width: 100%;
     height: 55px;
}
 
#container {
     background: #FFD700;
     margin: auto auto;
     text-align: center;
     width: 80%;
     height: 400px;
}
 
#navigation {
     background: #FE9798;
     width: 100%;
     height: 25px;
}
 
#sidebar {
     background: #40E0D0;
     float: left;
     width: 20%;
     height: 280px;
}

#content {
     background: #DCDCDC;
     float: right;
     width: 80%;
     height: 280px;
}
 
#clear {
     clear: both;
}
 
#footer {
    background: #00BFFF;
	width: 100%;
	height: 40px;
}

С помощью стилей мы последовательно оформляем содержимое тега <body> и всех находящихся внутри контейнеров с помощью ранее изученных правил.

#clear { clear:both; } запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.

CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.

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

Полезные ссылки:

HTML Разметка — Andrew BLOG

Andrew | Posted on 06.04.2020 |

Введение в HTML

HTML-теги

Тег: <имя_тега>

Примеры тегов: <html> <body> <section> <article> <div> <h2> <nav> <ul> <ol> <li> <p> <a> <strong> <em> <time> <mark> <img> <video> <audio> <form> <input> <button> <label>

<!— А я комментарий! —>

Парные теги

<h2>Три главных слова</h2>

<p> Инкапсуляция, наследование, полиморфизм! </p>

Одиночные теги

Вложенные теги

<p> Текст абзаца с <em>выделением</em> </p>

<ul> <li>элемент списка</li> <li>элемент списка</li> </ul>

Ошибки вложенности

<!— Неверный порядок закрытия —> <strong><em>жирный</strong> курсив</em>
<!— Правила для отдельных тегов —>

<ul> <p>название списка</p> <li>элемент списка</li> </ul>

Атрибуты тегов

Атрибутов может быть несколько.

Некоторые теги не могут использоваться без атрибутов.

Простейшая страница

<!DOCTYPE html>
<html>
<head> 
 <meta charset="utf-8"> 
 <title>Заголовок окна</title> 
</head> 
<body> 
 <!-- Содержимое --> 
</body> 
</html>

Страница сложнее

<!DOCTYPE html>
<html> 
<head> 
 <meta charset="utf-8"> 
 <title>Заголовок окна</title> 
 <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
 <h2>Заголовок 1</h2>
 <p>Абзац - это лучшее, что у нас есть!</p>
 <script src="scripts.js"></script>
</body>
</html>

Спецификация HTML

https://www.w3.org/TR/html/

Категории содержания

Metadata content — метаданные для браузеров, поисковиков и так далее (всё, что в <head>).
Flow content — потоковый контент (всё, что в <body>).
Sectioning content — крупные смысловые разделы документа.
Heading content – заголовки.
Phrasing content — фразовый контент, сам текст документа и мелкие текстовые элементы, которые мельче абзаца.
Embedded content — встраиваемый контент (изображения, видео, аудио и так далее).
Interactive content — интерактивные элементы, то, с чем взаимодействует пользователь.

Валидатор

Markup Validation Service http://validator.w3.org/nu/

Обзор тегов

Крупные смысловые разделы

<article>

Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.
Особенности: желателен заголовок внутри. – Типовые ошибки: путают с тегами <section> и <div>.

<section>

Значение: смысловой раздел документа. Неотделяемый, в отличие от <article>.
Особенности: желателен заголовок внутри. – Типовые ошибки: путают с тегами <article> и <div>.

<nav>

Значение: смысловой раздел документа. Неотделяемый, в отличие от <article>.
Особенности: желателен заголовок внутри. – Типовые ошибки: путают с тегами <article> и <div>.

Заголовки

Значение: заголовки смысловых разделов.
Особенности:
Желателен один <h2> на странице.
Не желательны пропуски в уровнях заголовков на странице. Внутри <article> заголовков можно начинать с <h2>.
На главных страницах не всегда рисуют заголовок первого уровня.
Типовые ошибки:
Определение уровня заголовка по размеру текста на макете.
Не весь крупный текст – заголовки

Поток

<header>

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

<main>

Значение: основное, не повторяющееся на других страницах, содержание страницы.
Особенности: должен быть один на странице, исходя из определения.
Типовые ошибки: включать в этот тег то, что повторяется на других страницах (навигацию, копирайты и так далее).

<footer>

Значение: заключительная часть смыслового раздела или всего сайта, обычно содержит информацию об авторах, список литературы, копирайт и так далее.
Особенности: этих элементов может быть несколько на странице. Тег <footer> не обязан находиться в конце раздела.
Типовые ошибки: использовать только как подвал сайта

<ul>/<ol>

Значение: неупорядоченный и упорядоченный списки.
Особенности:
Если существует набор однородных элементов, порядок которых не важен (пункты меню), то используем <ul>.
Если порядок элементов важен (топ популярных товаров, последовательные шаги в рецепте), то используем <ol>.
Типовые ошибки
Объединять в список неоднородные элементы.
Использовать что-то, кроме <li> в качестве дочерних элементов списка.
Неправильная разметка вложенных списков.

<p>

Параграф в HTML – это структурный элемент, а не смысловой.
Параграфы можно явно выделять с помощью тега <p>. Если не выделите явно, они всё равно будут существовать неявно.
<p> – универсальный контейнер для группировки мелких фразовых элементов, отделения их друг от друга, особенно, когда нужна стилизация.
Значение: параграф (как структурный элемент, а не как смысловой).
Типовые ошибки: использовать внутри параграфов не фразовые элементы, например, списки.

<table>

Значение: многомерные связанные данные (табличные данные).
Особенности:
Простейший, двумерный, вид связанных данных – «параметр-значение». Его можно описать как таблицей, так и списком определений (тег <dl>).
Когда измерений больше (параметр-значение1-значение2-…), подходят только таблицы. Пример: тарифы сотового оператора, расписание поездов.
Типовые ошибки:
Использовать таблицы для сеток (так уже не делают).
Не использовать таблицы там, где они нужны.

<div>

Значение: многомерные связанные данные (табличные данные).
Особенности:
Простейший, двумерный, вид связанных данных – «параметр-значение». Его можно описать как таблицей, так и списком определений (тег <dl>).
Когда измерений больше (параметр-значение1-значение2-…), подходят только таблицы. Пример: тарифы сотового оператора, расписание поездов.
Типовые ошибки:
Использовать таблицы для сеток (так уже не делают).
Не использовать таблицы там, где они нужны.

Различия <article>, <section>, <div>

Можете дать имя разделу и вынести этот раздел на другой сайт? <article>
Можете дать имя разделу, но вынести на другой сайт не можете? <section>
Не можете дать имя? Вменяемое имя, а не «новости и фотогалерея» или «правая колонка». <div>

Фразовые

<img>

Значение: контентное изображение.
Особенности: есть обязательные атрибуты (src). Хороший тон — задавать атрибут alt, который описывает содержание картинки.
Типовые ошибки:
Использовать контентные изображения вместо фоновых.
Использовать фоновые изображения вместо контентных.

<a>

Значение: ссылка.
Особенности: если атрибута href нет, то это заглушка («здесь будет ссылка при других обстоятельствах»). Ссылка без href используется, чтобы не делать ссылку на саму себя.
Типовые ошибки: использовать вместо ссылок другие элементы, например, кнопки.

<button>

Значение: кнопка.
Особенности:
Лучше явно указывать атрибут type. Его значение по умолчанию — submit, но часто нужно значение button.
Кнопка не обязательно должна находиться в пределах формы. Часто это просто интерактивный элемент, который «оживляется» с помощью JavaScript. Например, кнопка закрытия всплывающего окна.
Типовые ошибки: использовать вместо кнопок другие элементы, например, ссылки или спаны.

<b>

Значение: текст, который выделяется для привлечения внимания, но без придания значимости.
Типовые ошибки: слишком частое неуместное использование.
Подробнее про теги <b>, <i>, <em>, <strong>:
http://html5doctor.com/i-b-em-strong-element

<br>

Значение: перенос строки.
Типовые ошибки:
Слишком частое использование.
Использование вместо параграфов.

<span>

Значение: универсальный фразовый элемент без собственного значения.
Особенности: смысл этому элементу придаётся с помощью атрибута class.

Глобальные атрибуты

Атрибуты, которые могут быть у любого тега. – class – accesskey – contenteditable – contextmenu – dir – draggable – dropzone – hidden – id – lang – spellcheck – style – tabindex – title – translate – атрибуты для обработки событий – data-атрибуты

Атрибут class

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

Как делать разметку

Что такое разметка

Когда все содержательные сущности документа размечены подходящими по смыслу тегами.
Декоративные (не содержательные) сущности в разметку входить не должны. Кроме тех случаев, когда без них никак.

Подходы к разметке

Страница как документ
Страница как интерфейс
Дивянка

Страница как документ

Задача — восстановить из макета первоначальную логическую структуру документа.
Можно добавлять то, чего не видно на макете.
В разметку попадает не всё, что есть на макете.

Алгоритм разметки

Выделяем повторяющиеся на каждой странице блоки (шапка и подвал) и основное содержание.
В этих блоках размечаем крупные смысловые разделы.
В документе, и в каждом смысловом разделе выделяем заголовки (если их нет в макете, то позже прячем с помощью стилей).
Размечаем оставшиеся мелкие элементы в каждом смысловом разделе методом исключения:
1. Получилось найти самый подходящий тег – используем его.
2. Нужно разметить потоковый контейнер – <div>.
3. Нужно сгруппировать мелкие фразовые элементы – <p>.
4. Нужно выделить сам мелкий фразовый элемент (слово или фразу) – <span>.

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

Как называть классы?

Имя класса должно отражать назначение элемента, а не рассказывать о его внешнем виде.
Воздержитесь от транслита.

Типовые имена классов

https://github.com/yoksel/common-words

Пространства имён

Упрощают именование классов.
Разбивают код на относительно независимые блоки.
Предотвращают нежелательное перемешивание стилей.
Ускоряют разработку и упрощают поддержку.

Признаки хорошей разметки

Простота
- Использовано минимально необходимое количество тегов.
- Имена классов рассказывают о назначении элементов.
- Есть чёткие границы смысловых блоков, легко понять к какому блоку принадлежит тег.
Соблюдение стиля кодирования
- Ориентируемся на Кодгайды
Отсутствие лишних элементов
- Декоративные элементы отсутствуют в разметке
Работоспособность
- Доступность всего контента
  Содержательный текст (вспомните шапку Седоны, где есть декоративный текст) должен быть в HTML-разметке, содержательные изображения должны быть размечены с помощью <img>.
- Корректный сбор данных от пользователей
  Формы работоспособны, у полей форм есть подходящие имена и значения.
- Связность документов
  Всё, что должно быть ссылками сделано ссылками.

Полезные ссылки

О разметке

Статьи о стилях кодирования

Кодгайды

Верстка сайта на HTML5 и CSS3

От автора: с тех пор, как в сети стали появляться статьи, демонстрирующие новые свойства HTML5 и CSS3, у меня родилась идея создания верстки сайта без изображений. Взяв на вооружение улучшения HTML5 и CSS3 (по сравнению с предыдущими почтенными спецификациями), не слишком сложно сверстать достойно выглядящий веб сайт, которому не придется полагаться на изображения в качестве элементов разметки.

Вот изображение сайта, который мы будем верстать на HTML5 и CSS3:

demo

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

demo

Выше на изображении вы видите контент папки, содержащей финальную демоверсию страницы – как и обещано, ни одного изображения. У нас имеется страница HTML с «продвинутой» разметкой, файл CSS, содержащий стили, управляемые CSS3 и папка, содержащая несколько шрифтов, которые мы собираемся вставить, применив правило @font-face.

Как обычно, я советую расположить все содержимое сайта в файле index.html еще до того, как вам в голову придет перейти к CSS, так что давайте прямиком к этому и приступим.

Верстка на HTML5 — разработка быстрее, а код гибче

Вдобавок к размещению новых семантических элементов HTML5 еще и сильно укорачивает код.

<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Fictive Company Blog | a blog showcasing the übercoolness of HTML5 & CSS3</title> <!—[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]—> <link href=styles.css rel=stylesheet /> </head>

<!DOCTYPE html>

<head>

<title>Fictive Company Blog | a blog showcasing the übercoolness of HTML5 & CSS3</title>

<!—[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]—>

</head>

Заметно, что они вышли гораздо аккуратнее, чем то, что у вас получилось бы, если писать HTML4 или XHTML. Объявление doctype занимает всего четыре буквы.

А вот как это было раньше:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

Способ HTML5 гораздо лучше, правда? Далее мы открываем тэг html и устанавливаем язык документа. (Подтэг своего языка можно найти в IANA Language Subtag Registry). Еще одно заметное тут изменение – отсутствие кавычек, окружающих значение en. Вам приходилось для подтверждения правильности включать кавычки в XHTML, но исходя из того, что это HTML5, они больше не необходимы.

Может, это покажется совсем небольшим выигрышем: сколько (кило)байт вы сэкономите на нескольких кавычках? Но ведь страница грузится не единожды; со временем она вам за все отплатит. У вас в действительности может приключиться другая сложность — по привычке вы продолжите добавлять кавычки. Если в своем любимом текстовом редакторе вы пользуетесь великолепным плагином Zen Coding, то он добавляет кавычки автоматически. Единственное решение проблемы – найти и убрать их все после окончания работы над файлом.

В элементе head мы сначала определяем набор символов и добавляем заглавие. Весьма стандартно, без кавычек. Двигаясь дальше, вставляем условный комментарий, внутрь которого загружаем файл JavaScript, который поможет нам работать с Internet Explorer (IE) 8 и более ранними его версиями.

Условный комментарий – это вид HTML-комментария, который Microsoft использует в IE, по сути, для реализации отдельных (или всех) версий своего браузера.

Используемый нами здесь комментарий проверяет, является ли браузер, открывающий страницу, Internet Explorer’ом с номером версии менее 9. Другой комментарий, который мы бы использовали, это: ; он проверил бы, является ли открывающий страницу браузер IE версией ниже или равной 8. По существу, между этими двумя комментариями нет разницы; они оба направлены на один ряд версий IE, так что можете взять любой.

Причина включения скрипта HTML5Shiv Реми Шарпа (Remy Sharp) кроется в отсутствии у Internet Explorer’а поддержки элементов HTML5. Проблема IE в том, что он не применяет никаких стилей CSS к элементам, которые не распознает. Таким образом, чтобы заставить более старые версии IE правильно выполнять элементы HTML5, нам нужно при помощи JavaScript создать незнакомые элементы.

Продвигаясь к тэгу body, размечаем область заголовка своей страницы, где полно элементов HTML5:

<body> <header> <hgroup> <h2>Fictive Company Blog</h2> <h3>a blog showcasing the übercoolness of HTML5 & CSS3</h3> </hgroup> <nav id=global> <ul> <li><a href=#>Home</a></li> <li><a href=#>About</a></li> <li id=services> <a href=#>Services</a> <ul id=subMenu> <li><a href=#>Whatever</a></li> <li><a href=#>Your Heart</a></li> <li><a href=#>Desires</a></li> </ul> </li> <li><a href=#>Portfolio</a></li> <li><a href=#>Contact</a></li> </ul> </nav> </header>

<body>

<h2>Fictive Company Blog</h2>

<h3>a blog showcasing the übercoolness of HTML5 & CSS3</h3>

</hgroup>

<ul>

<li><a href=#>About</a></li>

<a href=#>Services</a>

<li><a href=#>Whatever</a></li>

<li><a href=#>Your Heart</a></li>

<li><a href=#>Desires</a></li>

</ul>

</li>

<li><a href=#>Portfolio</a></li>

<li><a href=#>Contact</a></li>

</ul>

</nav>

</header>

Элемент Header

Сразу же после открытия тэга body мы воспользуемся одним из новых элементов HTML5 – header. Вот какое определение дает элементу заголовка консорциум Word Wide Web (W3C):

Элемент заголовка (header) представляет вступительную группу или вспомогательные средства навигации.

Следуя их рекомендации, элемент header будет содержать наш логотип, подзаголовок и основную навигацию. При вводе элемента заголовка header у нас появляется деталь разметки, содержащая все те части страницы, которые мы интуитивно считаем заголовком. (Или все те детали страницы, которые будут вложены в элемент div с id заголовка.) На странице элемент header можно употребить не один раз, и мы снова будем пользоваться им внутри элементов article, в которых будут содержаться вступления к постам.

Элемент Hgroup

Первым внутри элемента заголовка идет другой новый тэг – hgroup. Мы воспользуемся им для показа соответственно логотипа нашего сайта и подзаголовка в тэгах h2 и h3.

Элемент hgroup используется для группирования набора элементов h2-h6, когда у заголовка имеются множественные уровни, такие как субименования, альтернативные названия или подзаголовки.

Элемент hgroup может смотреться излишним, пока вы не обернете, как обычно, заголовки в элемент div для того, чтобы у названия или субименования(й) был обычный фон или стиль. Однако в схеме документа hgroup играет важную роль. Алгоритм схемы проверяет вашу страницу и передает структуру заголовка. Проверить набросок своей работы с помощью инструмента Outliner. Когда алгоритм схемы столкнется с элементом hgroup, он проигнорирует все, кроме заголовка самого высшего уровня (обычно h2).

Теперь у нас возникла проблема: алгоритм схемы не безупречен и не завершен. Например, следующий элемент, который мы обсудим – это элемент nav, и разметка помечает его как «Untitled Section» (область без названия). К разработчикам разметки поступали просьбы об изменении алгоритма схемы для того, чтобы тот представлял элемент nav как «Navigation» (навигация). В любом случае, элемент hgroup обеспечивает вас способом группирования своих заголовков и, таким образом, организует их как структурно, так и семантически.

Элемент Nav

Мы переходим к следующему элементу HTML5 – nav. В nav мы включим основную навигацию сайта, обернутую в неупорядоченный список.

Элемент nav представляет сектор страницы, который ссылается на другие страницы или области внутри страницы: область со ссылками навигации.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Использование nav для создания основной навигации сайта – это нечто вроде данности, но обстоятельства таковы, что на вашем сайте будет больше областей, содержащих ссылки; вопрос в том, которые из них вам следует обернуть тэгом nav. Вот некоторые примеры использования, которые, я считаю, могут подойти:

Таблица содержания (TOC) в длинном документе;

Навигация «ссылки-цепочки»;

Нумерованные ссылки типа «предыдущий/следующий» и

Связанные посты.

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

Элемент Article

Следующий элемент, который я хочу вам представить – article. Основная область нашей демо-страницы содержит три цитаты из постов, и каждую из них мы обернем в тэг article.

<article> <header> <div class=time> <div class=year>2010</div> <div class=date>16<span>apr</span></div> </div> <h2>Sample Post 1</h2> <div class=comments>38</div> </header> <p>Curabitur ut congue hac, diam turpis[…]</p> <footer> <em>Written by:</em> <strong>Author Name</strong> <span class=newLine><em>Tags:</em> <a class=tags href=#>cool</a><a class=tags href=#>modern</a><a class=tags href=#>hype-friendly</a></span> <a class=button href=#>Continue Reading</a> </footer> </article>

</div>

<h2>Sample Post 1</h2>

</header>

<p>Curabitur ut congue hac, diam turpis[…]</p>

<em>Written by:</em> <strong>Author Name</strong>

<span class=newLine><em>Tags:</em> <a class=tags href=#>cool</a><a class=tags href=#>modern</a><a class=tags href=#>hype-friendly</a></span>

<a class=button href=#>Continue Reading</a>

</footer>

</article>

Вот определение W3C для элемента article:

Элемент article представляет в документе модульную композицию […], таким образом, он предназначен стать автономно распределяемым или многократно используемым, например, при синдикации (одновременном опубликовании контента на нескольких веб-узлах).

На этот раз спецификация более понятная и пост в блог (или его отрывок) гораздо лучше (обратите внимание на упоминание о синдикации) подходит к article. Конечно, мы можем разместить на странице много элементов article.

Вы, несомненно, заметили, что внутри article мы разместили элементы заголовка и нижнего колонтитула. Как header, так и footer могут быть использованы более одного раза на отдельной HTML-странице. Так как header – это «вступительная группа или вспомогательный элемент навигации», то мы включили в него дату, название и количество комментариев. Далее, у нас имеется параграф с отрывком из поста, за которым следует footer (нижний колонтитул).

Элемент Footer

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

Элемент footer представляет нижний колонтитул той секции, к которой обращается. Обычно нижний колонтитул содержит информацию о своей секции, такую, как авторство, ссылки на связанные документы, дату копирайта и прочее.

У нас на демо-странице есть четыре элемента footer: по одному на каждый из трех элементов article и общий нижний колонтитул для всей страницы. Нижний колонтитул в элементе article содержит имя автора поста, тэги и кнопку ссылки на полную версию поста в блоге.

footer

Общий нижний колонтитул содержит три элемента секций и извещение об авторском праве. Оба варианта использования элемента footer правомерны и соответствуют рекомендации W3C.

Элемент Section

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

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

Элемент section довольно хитрый, потому что в определении по спецификации кажется очень похожим на элемент div. Я попался в эту ловушку, когда начал писать код для демо-страницы; я разместил внутри элемента section три элемента article. Вскоре я понял ошибочность своих методов. Единственный способ решить, употреблять ли section – это посмотреть, нужно ли той области, которую вы хотите обернуть элементом section, название (заголовок). Из определения видно, что у элемента section обычно есть заголовок.

Другой вопрос, который полезно задавать для установления обоснованности использования элемента section, это: добавляете ли вы его исключительно для стилей? Вы добавляете его просто потому, что нужно выделить эту секцию с помощью JavaScript, или потому что нужно применить к ней обычный стиль, и вы вместо того должны использовать элемент div.

Обертывание в тэг section трех элементов article нашей демо-страницы было бы оправдано, если бы section включал заголовок типа «Последние посты в блогах». Это имело бы смысл; иначе тэг, внутри которого расположены элементы article – это просто поддержка стилей – нечто, помогающее нам нацелиться на него при помощи JavaScript или CSS.

Элемент Aside

Последний используемый для демо-страницы элемент HTML5 – aside; мы использовали его как контейнер боковой колонки.

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

Как видно из спецификации, один из примеров идеального использования элемента aside – это боковая колонка. Ниже на графике можно увидеть расположение иерархии элемента aside нашей демо-страницы.

aside

Мы разместили два section и один nav. Первый элемент section содержит ссылки на Twitter и RSS, а второй представляет последний твит (запись пользователя в Twitter’е). Второй элемент section, кроме того — один из редких случаев, когда у него отсутствует заголовок. У него могло бы быть название, что-нибудь типа: «Последний твит», но, я думаю, это необязательно, потому что читатели привыкли видеть блоки вроде этого, а метка Twitter’а под цитатой очень узнаваема. Элемент nav нашей боковой колонки используется для отражения списка блогов и, в отличие от основной навигации, у него есть заголовок.

Последнее слово

Итак, вот и подошла к завершению первая часть нашей статьи посвящённой верстке сайта на HTML5 и CSS3. Я старался сделать ее настолько короткой, насколько можно, и не тратить слишком много времени на неопределенности в спецификации HTML5, потому что она еще не закончена. Тем временем нам придется полагаться на сообщество и труд «лекарей» HTML5, что станут нашими проводниками по внедрению новых элементов в сайты.

Спасибо за прочтение и не пропустите вторую часть статьи, где мы обсудим свойства CSS3, используемые для декорирования разметки.

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

Автор: Marko Randjelovic

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: [email protected]

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

примеров HTML-разметки — простое руководство по HTML

Ниже приведены некоторые примеры часто используемых фрагментов кода, демонстрируемых рядом с их HTML-тегами.

Подразделения
Пункт	`Некоторый текст`	Немного текста
Line Break	`Несколько сломанных текстов`	Некоторые сломанные текст
Горизонтальное правило	`выше <ч> ниже`	выше ниже
Форматирование текста
Основная рубрика	`Заголовок 1`
подзаголовок	`Заголовок 5`	Рубрика 5
жирным шрифтом	`текст, выделенный жирным шрифтом`	Полужирный шрифт
Курсив	`Курсив`	Курсив
Цветной Текст	`Текст красного цвета`	Красный цветной текст
Изменить шрифт	`Текст шрифтом с засечками`	Текст с засечками шрифта
Цитируемый текст	`Цитированный текст`	Цитированный текст
Списки
Упорядоченный список	`Элемент списка 1 Элемент списка 2` `Элемент списка 3`	Элемент списка 1 Элемент списка 2 Элемент списка 3
неупорядоченный список	`Элемент списка 1 Элемент списка 2` `Элемент списка 3`	Элемент списка 1 Элемент списка 2 Элемент списка 3

Введение в HTML

HTML — это стандартный язык разметки для создания веб-страниц.

Что такое HTML?

HTML обозначает язык гипертекстовой разметки
HTML является стандартным языком разметки для создания веб-страниц
HTML описывает структуру веб-страницы
HTML состоит из серии элементов
HTML-элементов говорят браузеру, как отображать контент
HTML-элементы обозначают фрагменты контента, такие как «это заголовок», «это это абзац «,» это ссылка «и т. д.

Простой HTML-документ

Пример

Page Title

Мой первый заголовок

Мой первый абзац.

Попробуй сам »

Пример объяснения

Декларация определяет что этот документ является HTML5 документом
элемент является корневым элементом HTML страница
Элемент содержит метаинформацию о HTML-страница
Элемент </code> определяет заголовок для HTML-страница (которая отображается в строке заголовка браузера или на вкладке страницы)</li><li> Элемент<body> </code> <code> определяет тело документа и является контейнером для всего видимого содержимого, такого как заголовки, абзацы, изображения, гиперссылки, таблицы, списки и т. д.</li><li> Элемент <code><div> </code> определяет большой заголовок</li><li> Элемент <code><p> </code> определяет абзац</li></ul><hr/><h3><span class="ez-toc-section" id="_HTML-7"> Что такое элемент HTML? </span></h3><p> HTML-элемент определяется начальным тегом, некоторым содержимым и конечным тегом:</p><p> <tagname> Содержимое идет сюда ... </ tagname></p><p> Элемент </strong> HTML <strong> - это все от начального тега до конечного тега:</p><p><H2> Мой Первый заголовок </ h2></p><p><p> Мой первый абзац.</ Р></p><table class="table table-hover"><tr><th> Стартовый тег</th><th> Содержимое элемента</th><th> Конечная метка</th></tr><tr><td><div></td><td> Моя первая рубрика</td><td> </ h2></td></tr><tr><td><p></td><td> Мой первый абзац.</td><td> </ p></td></tr><tr><td> <br></td><td> <em> нет </em></td><td> <em> нет </em></td></tr></table><p> <strong> Примечание: </strong> Некоторые элементы HTML не имеют содержимого (например, <br> элемент).Эти элементы называются пустыми элементами. Пустые элементы не имеют конечного тега!</p><hr/><hr/><h3><span class="ez-toc-section" id="i-60"> Веб-браузеры </span></h3><p> Целью веб-браузера (Chrome, Edge, Firefox, Safari) является чтение документов HTML и их отображение. правильно.</p><p> Браузер не отображает теги HTML, но использует их для определения способа отображения документа:</p><p></p><hr/><h3><span class="ez-toc-section" id="_HTML-8"> Структура HTML-страницы </span></h3><p> Ниже представлена визуализация структуры HTML-страницы:</p><p><title> Название страницы </ title></p><p><div> Это заголовок </ h2></p><p><p> Это абзац.</ p></p><p><p> Это еще один абзац. </ P></p><p> <strong> Примечание: </strong> Только содержимое внутри раздела<body> (белая область выше) будет отображаться в браузере.</p><hr/><h3><span class="ez-toc-section" id="_HTML-9"> История HTML </span></h3><p> С первых дней существования всемирной паутины было много версий HTML:</p><p> Это руководство соответствует последнему стандарту HTML 5.</p> <br/> ,<div> HTML: язык разметки гипертекста - веб-технология для разработчиков</h2><p> <strong> HTML </strong> (язык разметки гипертекста) является самым основным строительным блоком Интернета. Он определяет смысл и структуру веб-контента. Другие технологии, помимо HTML, обычно используются для описания внешнего вида / представления веб-страницы (CSS) или функциональности / поведения (JavaScript).</p><p> «Гипертекст» относится к ссылкам, которые соединяют веб-страницы друг с другом, либо на одном веб-сайте, либо между веб-сайтами.Ссылки являются фундаментальным аспектом Интернета. Загружая контент в Интернет и связывая его со страницами, созданными другими людьми, вы становитесь активным участником Всемирной паутины.</p><p> HTML использует «разметку» для аннотирования текста, изображений и другого содержимого для отображения в веб-браузере. Разметка HTML включает в себя специальные «элементы», такие как <code><head> </code>, <code><title> </code>, <code><body> </code>, <code><header> </code>, <code><footer> </code>, <code><article> </code>, <code><section> </code> , <code><p> </code>, <code><div> </code>, <code> <span> </code>, <code> <img> </code>, <code> <в стороне> </code>, <code> <audio> </code>, <code><canvas> </code>, <code> <список данных> </code>, <code> <детали> </code>, <code> <embed> </code>, <code><nav> </code>, <code><output> </code>, <code> <progress> </code>, <code><video> </code>, <code><ul> </code>, <code><ol> </code>, <code><li > </code> и многие другие.</p><p> Элемент HTML выделяется из другого текста в документе с помощью «тегов», которые состоят из имени элемента, окруженного «<code> <</code>» и «<code>> </code>». Имя элемента внутри тега не чувствительно к регистру. То есть он может быть написан прописными, строчными буквами или их сочетанием. Например, тег <code><title> </code> может быть записан как <code><Title> </code>, <code><TITLE> </code> или любым другим способом.</p><p> Статьи ниже могут помочь вам узнать больше о HTML.</p><ul><li> HTML Введение<p> Если вы новичок в веб-разработке, обязательно прочитайте нашу статью об основах HTML, чтобы узнать, что такое HTML и как его использовать.</p></li><li> HTML-уроки<p> Статьи о том, как использовать HTML, а также учебные пособия и полные примеры можно найти в нашей Обучающей области HTML.</p></li><li> HTML Reference<p> В нашем обширном справочном разделе HTML вы найдете подробную информацию о каждом элементе и атрибуте в HTML.</p></li></ul><h4><span class="ez-toc-section" id="i-61"> Хотите стать интерфейсным веб-разработчиком? </span></h4><p> Мы разработали курс, который включает в себя всю необходимую информацию, необходимую для достижения вашей цели.</p><p> Начало работы</p><p> Наша область изучения HTML содержит несколько модулей, которые обучают HTML с нуля - предварительные знания не требуются.</p><dl><dt> Введение в HTML</dt><dd> Этот модуль устанавливает сцену, помогая вам привыкнуть к важным концепциям и синтаксису, таким как рассмотрение применения HTML к тексту, создание гиперссылок и использование HTML для структурирования веб-страницы.</dd><dt> Мультимедиа и встраивание</dt><dd> В этом модуле рассматривается, как использовать HTML для включения мультимедиа в ваши веб-страницы, включая различные способы добавления изображений, а также способы встраивания видео, аудио и даже целых других веб-страниц.</dd><dt> HTML-таблицы</dt><dd> Представление табличных данных на веб-странице понятным и доступным способом может быть проблемой. Этот модуль охватывает базовую разметку таблицы, а также более сложные функции, такие как реализация подписей и сводок.</dd><dt> HTML-форм</dt><dd> Формы являются очень важной частью Интернета - они предоставляют большую часть функций, необходимых для взаимодействия с веб-сайтами, например, регистрация и вход в систему, отправка отзывов, покупка продуктов и многое другое. Этот модуль поможет вам создать клиентские / внешние части форм.</dd><dt> Используйте HTML для решения типичных проблем</dt><dd> Содержит ссылки на разделы контента, объясняющие, как использовать HTML для решения наиболее распространенных проблем при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение контента, создание базовой формы и т. Д.</dd></dl><h3><span class="ez-toc-section" id="i-62"> Дополнительные темы </span></h3><dl><dt> CORS включено изображение</dt><dd> Атрибут <code> crossorigin </code> в сочетании с соответствующим заголовком CORS позволяет загружать изображения, определенные элементом <code> <img> </code>, из внешних источников и использовать в элементе <code><canvas> </code>, как если бы они загружались из Текущее происхождение.</dd><dt> Параметры настройки CORS</dt><dd> Некоторые элементы HTML, которые обеспечивают поддержку CORS, такие как <code> <img> </code> или <code><video> </code>, имеют атрибут <code> crossorigin </code> (свойство <code> crossOrigin </code>), который позволяет настраивать запросы CORS для извлеченных данных элемента.</dd><dt> Предварительная загрузка контента с rel = "preload"</dt><dd> Значение <code> предзагрузки </code> атрибута <code> rel </code> элемента <code> элемента<link> позволяет записывать декларативные запросы на выборку в ваш HTML <code><head> </code>, указывая ресурсы, которые понадобятся вашим страницам очень скоро после загрузки, чего вы, следовательно, хотите начать предварительную загрузку на раннем этапе жизненного цикла загрузки страницы, прежде чем включится основной механизм рендеринга браузера.Это гарантирует, что они станут доступными раньше и с меньшей вероятностью заблокируют первый рендеринг страницы, что приведет к повышению производительности. В этой статье дается базовое руководство по работе <code> preload </code>.</dd></dl><h3><span class="ez-toc-section" id="i-63"> Список литературы </span></h3><dl><dt> HTML ссылка</dt><dd> HTML состоит из <strong> элементов </strong>, каждый из которых может быть изменен некоторым количеством <strong> атрибутов </strong>. HTML-документы связаны между собой ссылками.</dd><dt> Ссылка на HTML-элемент</dt><dd> Просмотрите список всех элементов HTML.</dd><dt> Ссылка на атрибут HTML</dt><dd> Элементы в HTML имеют <strong> атрибутов </strong>. Это дополнительные значения, которые настраивают элементы или корректируют их поведение различными способами.</dd><dt> Глобальные атрибуты</dt><dd> Глобальные атрибуты могут быть указаны для всех элементов HTML, <em>, даже если они не указаны в стандарте </em>. Это означает, что любые нестандартные элементы должны разрешать эти атрибуты, даже если эти элементы делают документ HTML5-несовместимым.</dd><dt> Встроенные элементы и элементы уровня блока</dt><dd> HTML-элементы обычно являются «встроенными» или «блочными» элементами. Встроенный элемент занимает только пространство, ограниченное тегами, которые его определяют. Элемент уровня блока занимает все пространство своего родительского элемента (контейнера), создавая тем самым «блок».</dd><dt> Типы ссылок</dt><dd> В HTML различные типы ссылок могут использоваться для установления и определения отношений между двумя документами. Элементы ссылок, на которые можно установить типы, включают <code> <a> </code>, <code> <область> </code> и <code> <ссылка> </code>.</dd><dt> Руководство по типам и форматам мультимедиа в сети</dt><dd> Элементы <code> <audio> </code> и <code><video> </code> позволяют воспроизводить аудио- и видеоматериалы непосредственно в вашем контенте без необходимости внешней поддержки программного обеспечения.</dd><dt> Категории контента HTML</dt><dd> HTML состоит из нескольких видов контента, каждый из которых разрешено использовать в определенных контекстах и запрещен в других. Аналогично, у каждого есть набор других категорий контента, которые они могут содержать, и элементы, которые могут или не могут использоваться в них.Это руководство по этим категориям.</dd><dt> Причудливый режим и стандартный режим</dt><dd> Историческая информация о режиме причуд и режиме стандартов.</dd></dl><h3><span class="ez-toc-section" id="i-64"> Похожие темы </span></h3><dl><dt> Применение цвета к элементам HTML с использованием CSS</dt><dd> В этой статье описывается большинство способов использования CSS для добавления цвета к содержимому HTML, перечисляются какие части документов HTML могут быть окрашены и какие свойства CSS следует использовать при этом. Включает примеры, ссылки на инструменты для создания палитры и многое другое.</dd></dl> Посмотреть все... .<h2><span class="ez-toc-section" id="HTML-3"> HTML-разметка </span></h2> HTML-разметка<pre> От klep@cs.stanford.edu Вт, 20 августа 11:20:02 1996 Статья: 89549 comp.infosystems.www.authoring.html От: klep@cs.stanford.edu (Скотт Дж. Клепер) Тема: ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ: HTML-разметка 2.2 для Macintosh Дата: понедельник, 19 августа 96 03:32:15 GMT-1: 00 Организация: Стэнфордский университет KlepHacks объявляет HTML-разметку 2.2 18.08.96 - Shareware KlepHacks объявил сегодня о доступности HTML Разметка 2.2, последняя версия окончательного текста в HTML.Среди других новых функций и исправлений, новая версия предлагает AppleScript поддержка, приносящая новое измерение силы в гибкое преобразование HTML инструмент. HTML-разметка была одной из ведущих утилит преобразования HTML для Macintosh больше года. Каждая последующая версия была результатом обратная связь с пользователем. HTML-разметка развивалась вместе с сетью и теперь предлагает такие функции, как пакетное преобразование, раскраска документов, верхние и нижние колонтитулы, комментарии, автоматическое преобразование списков и многое другое. Версия 2Поддержка AppleScript 2 обеспечивает новую гибкость программа. Примеры скриптов, включенных в программу, показывают, как HTML-разметка может использоваться из текстового редактора, такого как BBEdit 4.0, для оптимизации HTML авторский процесс. Другие примеры сценариев показывают HTML-разметку, используемую с CGI скрипт для обслуживания текстовых файлов на лету. Сценарии HTML-разметки словарь предоставляет полный интерфейс для сценариев, чтобы расширить программа. Пользователи могут настроить, как файлы конвертируются с помощью пост-обработки их файлы с AppleScript.С выходом новой версии, KlepHacks Shareware также анонс программы «Сделано с HTML-разметкой». Эта программа, предназначенная для выделить различные сайты с помощью HTML-разметки, поощряет веб-мастеров разместить небольшой логотип «Сделано с HTML-разметкой» на своих сайтах. Страницы с этот логотип добавляется в индекс страниц разметки HTML. Каждый логотип является ссылкой на эту страницу, таким образом, все, кто участвует в программе помогать всем остальным привлекать людей на свои сайты. Кроме того, один сайт или страница будут выбираться каждый месяц (в зависимости от контента) для показа на домашней странице HTML-разметки, которая получает тысячи просмотров в неделю! Больше информация об этой программе доступна от WWW.printerport.com/klephacks/markup/madewith.html HTML Markup 2.2 является условно-бесплатной. Лицензия на одного пользователя составляет 20 долларов США и может быть приобретено с помощью включенной программы «KlepHacks Register». Пользователи HTML Markup 1.0 и более поздние версии можно обновить за 5 долларов. Пользователи версий 2.0 и позже имеют право на бесплатные обновления по электронной почте. Вопросы и комментарии добро пожаловать на klephacks@kagi.com HTML-разметка 2.2 доступна для немедленной загрузки с: ftp://htc.rit.edu/pub/HTML-Markup-current.hqx Поддержка и дополнительная информация может быть найдена на: HTTP: // WWW.printerport.com/klephacks/markup.html Скотт Дж. Клепер Президент, KlepHacks Shareware Примечание: KlepHacks Shareware также предлагает список рассылки, чтобы держать пользователей в курсе на новые программы и предложения. Чтобы подписаться, отправьте письмо на "list-request@printerport.com" с "подписаться на список klephacks" в теле сообщения. От klep@pobox1.Stanford.EDU Пт 8 марта 04:30:55 1996 Тема: HTML-разметка Дата: чт, 7 марта 96 19:30:59 -0000 От: Программное обеспечение KlepHacks ... HTML 2.0 версия 2.0 была недавно выпущена.Пожалуйста, обновите ссылку на следующий URL: ftp://htc.rit.edu/pub/HTML-Markup-current.hqx Эта ссылка всегда будет указывать на текущую версию HTML-разметки, поэтому ссылка не истекает снова. Также есть домашняя страница для разметки HTML по адресу: http://htc.rit.edu/klephacks/markup.html Скотт Дж. Клепер ------ Скотт Дж. Клепер Не паникуйте! klephacks@kagi.com http://htc.rit.edu/scott.html Автор HTML-разметки, полный опыт преобразования текста в HTML: <Http: // HTC.rit.edu/klephacks/markup.html> <Ftp://htc.rit.edu/pub/HTML-Markup-current.hqx> От sjked@rit.edu Пн 22 мая 15:11:53 1995 Статья: 3859 из comp.infosystems.www.announce От: sjked@rit.edu (Скотт Дж. Клепер) Тема: ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ: Mac text-> html (HTML Markup 1.0) Дата: 15 мая 1995 года 22:11:05 -0700 Организация: Рочестерский технологический институт Недавно мне дали задание конвертировать около десятка текстовых статей в HTML. Я использовал программу для Mac под названием TextToHTML. Он служил цели довольно хорошо, но мне все равно пришлось редактировать HTML.Сделал некоторые раздражающие вещи, такие как поставить <BR> после каждой строки и всегда использовать первая строка как <title>. Чтобы помочь с будущими проектами, я написал HTML Markup 1.0. Работает немного в отличие от других конвертеров HTML. Когда вы перетаскиваете файлы в HTML Значок разметки, вы получите «билет на работу», где вы можете проверить, какие фильтры, которые вы хотите применить. Вы можете сделать все, используя первую строку в центре <h2> для автоматического преобразования списков в вашем текстовом файле в HTML <UL>.В данный момент HTML-разметка находится на стадии бета-тестирования. Я все еще ищу функции добавлять и сообщать об ошибках. Бета доступна публично с моего ftp сайта. Чтобы загрузить версию 1.0b1 (самая последняя на момент публикации), пытаться: ftp://htc.rit.edu/pub/HTML-Markup-10b1.hqx Вы также должны проверить домашнюю страницу HTML-разметки для позднего взлома Информация. Там может быть более новая версия для загрузки. Там также необязательно Заполните форму для бета-тестирования. Это в основном так, что я могу держать отслеживать, сколько людей используют HTML-разметку и что они используют для.Это совершенно необязательно, поэтому не стесняйтесь загружать разметку без заполнив форму. Страница веб-поддержки здесь. Я также являюсь автором программы, которая делает прямо противоположное - преобразование HTML вернуться к тексту. Эта программа называется HTML Markdown, а информация доступны с того же FTP и веб-сайтов. Скотт Дж. Клепер - Скотт Дж. Клепер НЕ ПАНИКА! sjked@rit.edu http://htc.rit.edu/scott.html </pre>,</div><div class="post-meta"></div></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://xn--80aahvkuapc1be.xn--p1ai/tem/aktualnye-temy-dlya-sajta-na-kakuyu-temu-sozdat-sajt-kakie-tematiki-samye-pribylnye-kakoj-sajt-mozhno-sdelat-samomu.html" rel="prev"><span class="meta-nav">Предыдущая запись</span> Актуальные темы для сайта – На какую тему создать сайт, какие тематики самые прибыльные, какой сайт можно сделать самому?</a></div><div class="nav-next"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/html-vybor-iz-spiska-pole-so-spiskom-htmlbook-ru.html" rel="next"><span class="meta-nav">Следующая запись</span> Html выбор из списка – Поле со списком | htmlbook.ru</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/html-razmetka-stranicy-razmetka-stranicy-html-s-primerami.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--80aahvkuapc1be.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='4195' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div></div><div class="col-md-4"><div id="sidebar" class="sidebar"><div id="search-9" class="widget widget_search"><form role="search" method="get" class="form-search" action="https://xn--80aahvkuapc1be.xn--p1ai/"><div class="input-group"> <label class="screen-reader-text" for="s">Поиск:</label> <input type="text" class="form-control search-query" placeholder="Поиск и помощь" value="" name="s" title="Поиск:" /> <span class="input-group-btn"> <button type="submit" class="btn btn-default" name="submit" id="searchsubmit" value="Найти"><i class="fa fa-search"></i></button> </span></div></form></div><div id="categories-10" class="widget widget_categories"><div class="widget-title"><span>Рубрики</span></div><ul><li class="cat-item cat-item-8"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/seo">Seo</a></li><li class="cat-item cat-item-4"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/wordpress">Wordpress</a></li><li class="cat-item cat-item-6"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/dizajn">Дизайн</a></li><li class="cat-item cat-item-7"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/zarabotok">Заработок</a></li><li class="cat-item cat-item-9"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/plagin">Плагин</a></li><li class="cat-item cat-item-3"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/raznoe">Разное</a></li><li class="cat-item cat-item-15"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/rekomendac">Рекомендац</a></li><li class="cat-item cat-item-5"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sajt">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sovety">Совет</a></li><li class="cat-item cat-item-12"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sovet">Советы</a></li><li class="cat-item cat-item-13"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/tem-2">Тем</a></li><li class="cat-item cat-item-10"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/tem">Темы</a></li><li class="cat-item cat-item-14"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/urok-2">Урок</a></li><li class="cat-item cat-item-11"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/urok">Уроки</a></li></ul></div></div></div></div></div></div><footer class="mz-footer" id="footer"><div class="container footer-inner"><div class="row row-gutter"></div></div><div class="footer-wide"></div><div class="footer-bottom"><div class="site-info"> © Орфографика.рф, 2010 - 2019</div> Расшифровки, размещенные на сайте, предназначены только для личного, некоммерческого использования.<br> При перепосте материалов обязательна активная ссылка: «Текст подготовлен компанией Орфографика.рф». <br>Вопросы и предложения: info@орфографика.рф.</div></footer></div><p id="back-top"> <a href="#top"><i class="fa fa-angle-up"></i></a></p> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script>  <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script>  <script defer src="https://xn--80aahvkuapc1be.xn--p1ai/wp-content/cache/autoptimize/js/autoptimize_13058247d3082f39f5d009ed1b806645.js"></script></body></html>