Теги

Теги

Coursme
12-15 мин
30 янв. 2024

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

В этом уроке мы рассмотрим все основные html теги, которые пригодятся при создании сайтов и веб-документов.

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

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

Пример структуры парного html тега с атрибутом в начале

Все теги имеют одинаковый формат. Они начинаются с угловой скобки < и заканчиваются на обратную скобку >

Между угловыми скобками обязательно должны присутствовать кодовые слова.Но конечно же, здесь нельзя писать все подряд и выдавать это за теги. Есть определенный набор тегов по спецификации html.

Например, выделение текста жирным:

<b>Жирный текст</b>

У тега могут быть атрибуты. Это дополнительные детали, которые его описывают. Они всегда вставляются в открывающей части.

К примеру, в тег <а> (ссылка на документ) указываем путь к странице, к которой нужно перейти после клика. Записывается она в атрибут href.

<a href="https://site.ru">Текст ссылки</a>

Виды HTML тегов

Все html теги подразделяются на два вида:

  • Одиночные
  • Парные

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

К примеру, если вам нужно вставить абзац, то сначала ставим открывающий тег <p>. Это будет начало абзаца. Далее вставляем нужный текст (контент). После этого мы должны сообщить браузеру, где наш абзац заканчивается. Для этого вставляем закрывающий тег </p>.

<p>Пример небольшого текстового абзаца</p>

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

<p><b>Пример</b> небольшого текстового абзаца</p>

Одиночные состоят из одного тега. Например, <hr>. Представляют собой самостоятельные сущности, которым не нужен внутренний контент.

<br> <!-- перенос строки --> Coursme
<hr> <!-- разделитель -->
<input type="text"> <!-- поле ввода -->
<img src="logo.png"> <!-- вывод изображения -->

Основные html теги

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

Вот они:

Doctype предназначен для определения типа документа. То есть по нему браузер понимает, что это html-документ, а не что-либо еще.

Тег HTML — это контейнер, который имеет основное содержимое страницы. Контейнером называется потому что у него есть парный тег (открывающий и закрывающий). Абсолютно все элементы (кроме doctype) должны быть вложены в этот контейнер.

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

Body — это основное тело страницы. Она содержит рабочие элементы, которые видны пользователям. Как правило, это информационный контент.

Вот так выглядит скелет любой html-страницы:

<!doctype html>
<html>
    <head>
        
    </head>

    <body>
        
    </body>
</html>

Справочник HTML

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

Тег HTML

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

ИмяОписаниеЗначение свойства display
<html></html>корневой элемент html-документаblock

Служебные

Служебные теги предназначены для поисковых систем и браузеров.

Браузеры по ним определяют тип документа и его интерпретацию. А поисковым системам важно для четкого сканирования документа и его ранжирования в выдаче

ИмяОписаниеЗначение свойства display
<!—…—>комментарийnone
<!DOCTYPE>объявление типа документаnone
<head></head>контейнер для метаданных html-документаnone
<title></title>заголовок / имя html-документаnone
<meta>мета-данные веб-страницыnone
<link>подключает внешние таблицы стилейnone
<script></script>подключает сценарии к страницеnone
<style></style>подключает встраиваемые таблицы стилейnone
<base>базовый url-адрес, относительно которого вычисляются относительные адресаnone
<noscript></noscript>секция, не поддерживающая скриптblock

Заключение

Мы рассмотрели html теги и их значение, еще есть много разных тегов в тексте, таблицах, картинках, списках, ссылки, формах со всем этим мы столкнемся в дальнейшем нашем изучение в курсе.

Однако желательно, чтобы вы наизусть знали хотя бы основные команды. Если с кодом будете часто работать, то с этим проблем не будет. Запомнить можно быстро.

Назад
Следующий урок
Комментарии
Чтобы оставлять комментарии — надо авторизоваться
Комментариев еще нет
Будьте первым
Главная
Курсы
Блог
Меню