Теги как основа HTML-страницы

Привет! Ну что, сделали свою первую страничку? Молодцы! Теперь давайте поговорим о тегах: что это такое и зачем они нужны.

Тег представляет собой следующую последоветельность символов:

  1. Открывающая угловая скобка <
  2. Название тега
  3. Закрывающая угловая скобка >

Пример тега:

<html>

Браузер, когда читает HTML-страничку обрабатывает каждый тег и складывает их сочетание в общую картину, которую мы видим на экране, когда просматриваем сайты.

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

Парные же теги используются в паре. При этом есть открывающий тег и закрывающий. Закрывающий тег отличается от открывающего тем, что после открытой угловой скобки помещается ещё один символ - / (слэш). Между открывающим и закрывающим тегом помещаются какие-либо данные. К примеру - текст.

Пример парных тегов - тег для выделения абзацев <p>. Его использование выглядит следующим образом:

<p>Абзац первый</p>
<p>Абзац второй</p>

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

У некоторых тегов есть атрибуты, которые указываются следующим образом:

<имя_тега атрибут1="значение атрибута" атрибут2="значение атрибута">

Атрибуты могут быть как обязательными, так и необязательными. Пример тега с атрибутом - тег для вставки картинок <img>. В атрибуте src ему обязательно нужно указывать адрес картинки. Например:

<img src="https://php.zone/app/img/html-350x184.jpg">

Из каких тегов должна состоять любая HTML-страничка

Абсолютно любая страничка должна иметь следующую структуру:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    ...
</head>
<body>
Контент здесь...
</body>
</html>

О каждом из тегов:

  • <!DOCTYPE html> - Указывает браузеру, что этот документ использует последнюю пятую версию HTML.
  • <html> - Идет сразу после doctype-тега. Внутри него содержится вся остальная страничка, включая теги <head> и <body>. У него есть атрибут lang, которому мы задали значение ru, чтобы указать на то, что страничка на русском языке.
  • <head> - Здесь располагается служебная информация для браузера и для поисковиков.
    • <meta charset="UTF-8"> - Указание кодировки страницы, если её не указать явно, страничка может отображаться некорректно. Сейчас всегда используется UTF-8. И заметьте, кодировка файла должна ей соответствовать. Помните, мы задавали её в Notepad++ в прошлом уроке? Так вот не забывайте всегда это проверять.
  • <body> - Здесь у нас непосредственно контент странички, то, что отображается у пользователя в браузере.

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

loader
Домашнее задание

Посмотрите на созданную в прошлом уроке страничку и скажите, какие из этих тегов парные, а какие - нет:

  • <head>
  • <title>
  • <h1>
Комментарии
Этот урок набрал набрал достаточно большое количество комментариев и дальнейшее его комментирование отключено. Если вы хотели убедиться в правильности выполнения ДЗ или у вас возник вопрос по уроку, посмотрите ранее добавленные комментарии, кликнув по кнопке ниже. Скорее всего вы найдете там то, что искали. Если это не помогло - задайте вопрос в чате в телеграме - https://t.me/php_zone
Логические задачи с собеседований