Шаргалка html тегов

Терминология

Парный тег - Тег, который открывается, внутри него идет содержимое, после он закрывается.

Как пример из жизни: когда мы едем по тассе и начинается населенный пункт, мы видим знак с его названием (это тег открывается), далее мы въезжаем в сам населенный пункт (это содержимое), и по окончанию населенного пункта, мы видим знак, с зачеркнутым названием (это тег закрылся).

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

Не парные теги: <img>, <hr>, <br>

Сами теги разберем позже.

Строчный тег - Тег, который можно вкладывать в блочный тег.

Блочный тег - Блочный можно вкладыать в блочный, но в строчный нельзя.

Семантический тег - блочный тег, определенный для особых частей сайта (шапка, подвал, секция и т.д.)

Теги имеют разные названия, но у них есть общее.

1. Все теги пишутся между двумя угловыми скобками (<>)

2. В закрывающем теге ставится знак слэш (/) перед названием тега

Примеры парных тегов:
<названиеТега>содержимое</названиеТега>, <div>содержимое</div>, <p>содержимое</p>, <main>содержимое</main>

Структура HTML страницы


<!DOCTYPE html>
<html lang="ru">
<head> </head> - сюда помещаются служебные теги
<body> </body> - сюда содержание страницы для пользователя
</html>

Комментарии в коде


Комментариями называется тот фрагмент кода или текста, который присутствует в коде, но полностью игнорируется компьютером.
Комментарии нужны для программиста, чтобы помечать части какого-то кода себе для напоминаний и подсказок.
Комментарий открывается <!-- и закрывается -->, все что внутри этих элементов, будет закомментировано.
<!-- ВОТ ЭТО ЗАКОМЕНТИРОВАНО -->

Стандартное содержание тега HEAD


В суть служебных тегов можно не вдаваться, главное их добавить.
При установке копировании этих тегов на свою страницу, комментарии УДАЛИТЕ.


<meta charset="utf-8">  -  <!-- служебный тег кодировки для русских букв -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">  - <!-- служебный тег для применения стандартов в браузере Internet Expolorer и Edge -->
<meta name="robots" content="index, follow">  -  <!-- служебный тег для индексации файла robots -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">  -  <!-- Служебный, но важный тег, отвечает за область просмотра экрана, критично важно для наличия мобильной версии -->
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">  -  <!-- важый тег, отвечает за вывод иконки сайта, которая находится в закладках в браузере -->
<link href="style.css" rel="stylesheet"> - выжный тег, указывает путь к css файлу стилей. Важно, что если название файла у Вас отличное от style.css, то прописать нужно название ВАШЕГО файла.


Теги для поисковых роботов (Яндекс, Гугл, Маил и прочие)
<title>Заголовок</title>  -  <!-- Очень важный тег. Используется впревую очередь поисковиками для анализа того, на какие запросы отвечает Ваш сайт.-->
<meta name="description" content="Описание">  -  <!-- Важный тег. Описание страницы, используется поисковиками для описания страницы в результатах поиска -->
<meta name="keywords" content="Ключевые слова">  -  <!-- Тег низкой важности. Ключевые слова для поискового робота, но поисковики почти не обращают на него внимания -->


Теги OpenGraf - для контроля превью (картинка, заголовок, описание) при отправке ссылки на сайт в соц.сетях и мессенджерах
<meta property="og:title" content="OpenGraf заголовок">  -  <!-- Важный тег. Для описания сайта, при отправке его в соц сетях и мессенджерах, отвечает за заголовок -->
<meta property="og:description" content="OpenGraf описание">  -  <!-- Важный тег. Отвечает за описание под заголовком тега выше -->
<meta property="og:image" content="images/design/head_mobile.jpg">  -  <!-- Важный тег. Для сопровождающей картинки к заголовку и описанию -->
<meta property="og:type" content="website">  -  <!-- Служебный тег. Обозначает тип страницы. -->
<meta property="og:url" content="https://АдресCайта.ru">  -  <!-- Адрес ссылки, которая будет открываться при нажатии на сообщение -->
<meta property="og:site_name" content="наименованиеКомпании">  -  <!-- служебные тег названия компании, если названия компании нет, можно удалить этот тег -->

Стандартное содержание тега BODY


<header></header> - сюда помещается шапка сайта (логотип, главная картинка, меню сайта)
<main></main> - блок для основной и уникальной информации на сайте, т.е. информация внутри этого блока не должна дублироваться на других страницах сайта.
<footer></footer> - подвал сайта, т.е. самая нижняя часть


Внутри тега main лежат такие блоки как: <div></div>, <section></section>, <article></article>, <figure> </figure>
Но об этом ниже.

ОСНОВНЫЕ ТЕГИ ВЕРСТКИ САЙТА


Самый основной тег это DIV - используется почти везде, но в некоторых местах заменяется на семантические теги.
Тег DIV - это тег блока, т.к. современная верстка сайта называется блочной, то все элементы мы будем оборачивать в него (почти все).
<div></div>


Семантические теги
<header></header> - ШАПКА САЙТА. В этот тег помещается шапка сайта
<nav></nav> - МЕНЮ САЙТА. В этот тег навигационное меню и пагинация


<main></main> - СОДЕРЖИМОЕ СТРАНИЦЫ. Самая важная и уникальная информация на странице
  <section></section> - СЕКЦИЯ. Этот тег используется внутри тега MAIN и используется для информационных блоков
  <article></article> - СТАТЬЯ. Если внутри тега section нам нужно разделить еще на блоки, то используется этот тег


<figure><figcaption>описание...</figcaption></figure> - ОБЪЕКТ или ФИГУРА. Используется для описания блока, где картинка непосредственная связана с описанием, например блок НАША КОМАНДА или СКАНЫ ДОКУМЕНТОВ


<details>
<summary>Текст, по которому жмем для открытия</summary>
Скрытый текст до нажатия
</details>
ДЕТАЛИ со скрытым текстом, появляющимся при нажатии.


<footer></footer> - ПОДВАЛ. Используется для подвала сайта (самая нижняя часть)

Аудио и видео


<audio autoplay controls loop>
<source src="media/sound.mp3" type="audio/mpeg">
</audio>


<video controls preload="none" poster="images/svg/play.svg">
<source src="video/video1.mp4" type="video/mp4">
</video>

Текстовые теги


<p></p> - Тег для текста (один тег для одного абзаца). Весь текст помещается внутри этого тега, за исключением заголовов.
<h1></h1> - самый главный заголовок. Может использоваться только один раз на странице
<h2></h2> - заголовок второго уровня
<h3></h3> - заголовок третьего уровня, используется внутри блоков с заголовком H2
<h4></h4> - на практике используется крайне редко
<h5></h5> - на практике не используется 
<h6></h6> - на практике не используется 


Не нумерованный список
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ul>
  
Пример

Пункт 1
Пункт 2
Пункт 3
Пункт 4



Нумерованный список
<ol>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ol>
 
Пример

Пункт 1
Пункт 2
Пункт 3
Пункт 4



<b></b> - задает жирность фрагменту текста внутри тега
<strong></strong> - задает жирность и важность фрагменту текста внутри тега
<i></i> - курсивное (наклонное) написание
<u></u> - подчеркнутое снизу написание
<s></s> - зачеркнутый написание
<span></span> - пустой тег, помещенный в него текст ни как не отличается, используется для того, чтобы можно было стилизовать отдельные участки текста
<hr> - горизонтальная полоса во всю ширину
<br> - переход текста на следующую строку, но использовать для создания абзацев не правильно, подходит в редких случаях, где нужно перекинуть на следующую строку текст, без создания абзаца

Изображение


Изображение - это непарный тег IMG, его не нужно закрывать после окончания
<img src="images/photo.jpg" alt="Альтернативное описание" title="Название при наведение">


  Атрибуты
alt="Альтернативное описание" - альтернативный текст. Обязательный атрибут, его отсуствие является семантичской ошибкой. Этот текст будет отображаться в случае, если картинка у пользователя по каким-то причинам не прогрузится.
title="Название при наведение" - не обязательный атрибут, но желательный. Этот текст будет отображаться при наведении на картинку.

Ссылки


<a href="адресСсылки">ЭТОТ ТЕКСТ БУДЕТ ССЫЛКОЙ</a> - ссылка, которая открывается в этом же окне
<a href="адресСсылки" target="_blank">ЭТОТ ТЕКСТ БУДЕТ ССЫЛКОЙ</a> - открывающаяся в новом окне


Внутри ссылки может быть что угодно:
1. Текст. Пример <a href="адрес ссылки">ЭТОТ ТЕКСТ БУДЕТ ССЫЛКОЙ</a>
2. Изображение. Пример <a href="адрес ссылки"><img src="images/photo.jpg" alt="Альтернативное описание"></a>
3. Любой блок DIV целиком. Но это не сильно хорошая практика, хотя и возможно.



Якорная ссылка
<a id="top"></a> - Сначала этот код ставим в месте, к которому нужно будет вернуться
<a href="#top">ТЕКСТ или КАРТИНКА</a> - Потом ставим этот элемент, и при нажатии он отправит нас на вышеуказанный якорь



Ссылки на приложения
whatsapp://send?phone=79999999999
viber://chat?number=79999999999
https://t.me/login_telega
tel:+79999999999
https://vk.com/login_vk
mailto:xxxxxxxxx@x.ru
yandexnavi://build_route_on_map?lat_to=56.309043&lon_to=44.051296

Подключение стилей CSS


<style>сюда пишем стили</style> - Не хороший вариант!!! Прописываем этот тег в блоке HEAD и внутри него прям в файле HTML пишем стили
<div class=""></div> - Отличный вариант!!! Указываем класс для любого элемента, а сам класс прописываем в файле стилей
<div style=""></div> - Можно прописывать прям здесь, без айла стилей. Вариант иногда удобен, но без фанатизма.
Пример: <div style="margin: 5px 10px; width: 150px; background: #f5f5f5;"></div>
<div id=""></div> - для стилизации дизайна не используется

Спецсимволы


<sup></sup> - метр квадратный². Текст внутри тега будет чуть мельче и выше рядом стоящего.
<sub></sub> - противоположность верхнему₂ . т.е. текст в нем будет чуть ниже рядомстоящего.


&laquo; &raquo;  - « » кавычки угловые (первая левая, вторая правая)
&quot; - " кавычки обычные
&nbsp; - неразрывный пробел


&#10003; - ✓ галочка
&#183; - · точка по центру


&#8381; - ₽ Рубль
&#8364; - € Евро

Таблица

В современной верстке таблица почти не используется, исключение табличные данные, типо прайс-листа


<table border="1" width="100%">
<tr>
<th>Ячейка 1</th>
<th>Ячейка 2</th>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>