HTML-разметка

Шпаргалка по основам HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки»).

Основной принцип разметки — определить, где начинается определенный тип информации и где он заканчивается и как он вложен в другой! Для этого используется парные теги: <тег> и </тег> — они определяют структуру и вложенность информации. Открывающий тег пишется без дроби, закрывающий тег имеет дробь! Иногда в открывающем теге указывается параметр, равный какому-то значению: <ОткрывающийТег параметр="значение">.

Заголовок

<h1>Заголовок</h1> — Используется только один раз! Озаглавливает всю информацию. Заголовок 1-ого уровня.

<h2>Раздел</h2> — Раздел. Заголовок 2-ого уровня. Ограничений по количеству нет!

<h3>Подраздел</h3> — Подраздел. Аналогично предыдущему, только рангом ниже. Информация озаглавленная заголовком 3-ого уровня, в структуре информации, вложена глубже.

Всего 6 уровней вложенности заголовков — от h1 до h6.

Абзац

<p>Текст. Основной элемент подачи текстовой информации.</p>

<br> — разрыв строки (одинарный тег!). Он определяет в каком месте текста происходит перенос строки, внутри абзаца, на следующую.

Акцент

Смысловой акцент (ключ)

<strong>Ключевая фраза</strong> в предложении, создана для облегчения визуального поиска ключевых моментов в тексте. Как правило выделяется жирным.

Эмоциональный акцент (обращает внимание)

<em>Обращает внимание</em> на фрагмент текста, но не является ключом к поиску информации по тексту. Как правило выделяется курсивом.

Визуальный (маркер)

<mark>Выделяет текст</mark>, но ничего не говорит о важности выделенного фрагмента! Как правило окрашивает фон текста желтым.

Подчеркивание!

Подчеркивание не принято использовать в теске - так обозначены гиперссылки.

Список

Нумерованный список

<ol>
<li>Внутри расположены элементы списка обозначенные цифрой.</li>
</ol>

Маркированный список

<ul>
<li>Внутри расположены элементы списка имеющие маркер.</li>
</ul>

Элемент списка

<li>Элемент списка, один из многих подобных, расположенных рядом, внутри нумерованного или маркированного списка.</li>

Таблица

<table>
Внутри расположен заголовок таблицы и сама таблица имеющая строки с ячейками (столбцами).
</table>

Пример таблицы
Левая ячейка верхней строки	Средняя ячейка верхней строки	Правая ячейка верхней строки
Левая ячейка средней строки шириной 2 столбца		Правая ячейка средней строки высотой 2 строки
Левая ячейка нижней строки	Средняя ячейка нижней строки	Правая ячейка средней строки высотой 2 строки

<table>
<caption>Пример таблицы</caption>
<tr>
  <td>Левая ячейка верхней строки</td>
  <td>Средняя ячейка верхней строки</td>
  <td>Правая ячейка верхней строки</td>
</tr>
<tr>
  <td colspan="2">Левая ячейка средней строки шириной 2 столбца</td>
  <td rowspan="2">Правая ячейка средней строки высотой 2 строки</td>
  </tr>
<tr>
  <td>Левая ячейка нижней строки</td>
  <td>Средняя ячейка нижней строки</td>
</tr>
</table>

Заголовок таблицы

<caption>Заголовок таблицы</caption>

Строка таблицы

<tr>
Внутри находится строка в которой находятся ячейки (столбцы).
</tr>

Ячейка (столбец) таблицы

Количество <td>ячеек</td> в простой таблице равно количеству столбцов.

Но по необходимости одна ячейка может занимать несколько строк и столбцов! Для этого в открывающем теге указываем параметр colspan и/или rowspan:

<td colspan="2"> — ячейка шириной 2 столбца
<td rowspan="2"> — ячейка высотой 2 строки
<td colspan="2" rowspan="2"> — ячейка шириной 2 столбца и высотой 2 строки

Цитата

<blockquote>Текст цитаты отображается как выровненный блок с отступами.</blockquote>

Изображение

<img src="URL-адрес" alt="Подпись... Рис. такой-то..."> — это одинарный тег!

Ссылка

<a href="URL-адрес">Текст гиперссылки</a>