Если HTML — это скелет страницы, то теги — это отдельные кости этого скелета. Каждая кость имеет своё назначение. Позвоночник держит спину, рёбра защищают сердце, череп защищает мозг. В HTML точно так же. Каждый тег служит своей цели.
Думайте о тегах как о командах. Вы командуете браузеру: «Это заголовок, покажи его большим шрифтом». Или: «Это ссылка, при клике переходи по адресу». Браузер слушается и выполняет команды. Как дрессированная собака, только быстрее и точнее.
Каждый тег пишется в угловых скобках. Открывающий тег выглядит как <тег>. Закрывающий как </тег>. Между ними живёт содержимое. Представьте матрёшку. Открываете верхнюю половинку, внутри лежит что-то, закрываете. Браузер видит открывающий тег и понимает: «Сейчас начнётся содержимое определённого типа». Видит закрывающий и думает: «Всё, содержимое закончилось, можно переходить дальше».
Начнём с самых важных тегов, которые встречаются на каждом втором сайте.
Тег <h1> — это главный заголовок страницы. Как название книги на обложке. Крупное, заметное, читаете первым делом. На странице должен быть только один <h1>, потому что главный заголовок один. Браузер показывает его самым большим шрифтом. Пишете: <h1>Добро пожаловать на мой сайт</h1>. Браузер выводит эту строку огромными буквами, как вывеску над магазином.
Теги <h2>, <h3>, <h4> — это подзаголовки. От <h1> к <h6> размер постепенно уменьшается. Как главы в книге. Сначала название книги, потом название главы, потом название параграфа. <h2> используйте для основных разделов, <h3> для подразделов внутри <h2>. Это помогает организовать информацию, как полки в шкафу. На верхней полке важное, на нижних менее важное.
Тег <p> — это параграф. Обычный текст, как в книге или газете. Всё, что пишете внутри <p>, браузер показывает как обычный текст с отступами сверху и снизу. <p>Это простой текст, ничего сложного</p>. Когда напишете второй параграф, браузер автоматически добавит между ними воздух, чтобы не слипались. Как абзацы в сочинении.
ДОБАВИТЬ
Тег <a> — это ссылка. Гиперссылка, которая переводит вас с одной страницы на другую. Без ссылок интернет был бы как город без дорог. Каждый дом стоит отдельно, а дойти от одного к другому невозможно. Браузер показывает ссылки синим цветом и подчёркивает. Пишете: <a href="https://example. com«> Кликните сюда</a>. Атрибут href — это адрес, куда идти. Как указатель на дороге: «Москва 100 км, направо».
Тег <img> — это изображение. Картинки, фотографии, иконки, мемы. Всё визуальное. Пишете: <img src="foto. jpg" alt="Описание фото">. Атрибут src — это адрес файла с картинкой. Атрибут alt — это текст на случай, если картинка не загрузилась. Или для людей с плохим зрением, которые используют программы чтения с экрана. Этот тег не имеет закрывающей части, потому что внутри него ничего нет. Как дорожный знак, он самодостаточен.
Теги <ul>, <ol> и <li> — это списки. <ul> — это неупорядоченный список, как список покупок. Перед каждым пунктом точка. <ol> — это упорядоченный список, как инструкция по сборке мебели. Перед каждым пунктом номер. <li> — это элемент списка. Выглядит так:
Браузер покажет три строки с точками. Если нужны номера, меняете <ul> на <ol>. Списки — это способ структурировать перечисления, чтобы не превращалось в сплошной текст.
Теги <strong> и <em> — это акценты в тексте. <strong> делает текст жирным и говорит браузеру: «Это важно, обратите внимание». <em> делает текст наклонным и говорит: «Это акцент, интонация». Используйте: <strong>Срочно!</strong> и <em>Может быть</em>. Раньше программисты использовали <b> для жирного и <i> для наклонного. Но это неправильно. <b> и <i> просто меняют вид, а <strong> и <em> несут смысл. Как разница между криком и просто громкой речью.
Теги <div> и <span> — это контейнеры. Они не имеют своего смысла, но нужны для группировки. Как коробки для вещей. <div> — это большая коробка, занимает всю ширину. <span> — это маленькая коробка, занимает только место для содержимого. Используете их, когда хотите применить стиль к группе элементов. Например, обернуть три параграфа в <div> и покрасить их все в синий.
Теги <header>, <main>, <footer> — это семантические блоки. <header> — это шапка сайта, где живут логотип и меню. <main> — это основное содержимое, то, ради чего человек пришёл. <footer> — это подвал, где прячутся контакты и копирайт. Это называется семантическая разметка. Вы не просто кидаете элементы на страницу, а говорите браузеру: «Это голова, это тело, это ноги». Как разметка анатомии в учебнике биологии.
Теперь главное правило. Когда выбираете тег, задайте себе вопрос: «Что это за содержимое?» Это заголовок? Используйте <h1> или <h2>. Это обычный текст? Используйте <p>. Это картинка? Используйте <img>. Правильный тег для нужного содержимого. Когда пишете семантически правильно, сайт становится понятен браузеру, поисковым роботам и людям с ограничениями. Как хорошая речь понятна всем.
ДОБАВИТЬ
Это называется семантическая разметка. Звучит научно, но смысл простой: используйте теги по назначению. Не пишите всё в <div>. Не форматируйте с помощью <b> и <i>. Используйте правильные теги. Как писать грамотно на русском. Можете писать всё прописными буквами, ставить восклицательные знаки везде. Люди поймут. Но с грамматикой читать приятнее и понятнее.
На практике часто встречаются ошибки. Начинающие пишут пять <h1> на одной странице. Или забывают закрывать теги. Или используют <b> вместо <strong>. Браузер обычно прощает и показывает что-то похожее на задуманное. Но это создаёт технический долг. Потом придётся переписывать. Лучше сразу делать правильно. Как в жизни: можете наспех собрать шкаф без инструкции, но лучше потратить лишние полчаса и собрать по правилам.
Создайте новый файл в VS Code. Назовите tags.html. Напишите туда:
Сохраните файл. Откройте в браузере. Видите? Браузер автоматически сделал заголовок большим, параграфы с отступами, ссылку синей. Вы просто сказали, что это такое, а браузер сам решил, как показать. Это и есть сила семантики.
С этими тегами вы уже можете создавать полноценные страницы. Остальные теги — это специальные случаи для конкретных задач. Но основа — это заголовки, параграфы, ссылки, картинки и списки. Запомните их, используйте правильно, и ваш код будет чистым и понятным. Если пока что трудно всё это запомнить, это нормально. В следующих уроках разберём все теги на практике более подробно.
Теперь есть всё, чтобы уже начать вёрстку. Откройте файл в фигме. Давайте присмотримся, что в первую очередь бросается в глаза. Видите большую надпись «ADC Community» вверху страницы? Это главный заголовок, заголовок страницы. Крупный, чёрный, невозможно не заметить.
Главный заголовок на странице должен быть один. Как название статьи в газете. То же самое с <h1>. Один на страницу. Он говорит поисковым роботам и читателям: "Вот о чём эта страница«.
Давайте посмотрим ниже. Видите текст помельче? «Добро пожаловать в ADC — уникальное пространство Школы дизайна НИУ ВШЭ...» Это обычный параграф, тег <p>. Он идёт после заголовка и объясняет суть. Как первый абзац в статье, который вводит читателя в тему.
Создадим на рабоче столе новую папку и назовём её «ADC». Переместим её в VS Code. Наше рабочее пространство готово к работе.
Теперь создадим в этой папке новый файл. Назовите его about.html. Напишите базовую структуру, пишем! и нажимает Enter у нас создасться html разметка. Внутри тега <body> поместим:
Сохраните файл. Откройте в браузере. Видите? Заголовок автоматически стал большим. Параграф поменьше, с отступом снизу. Браузер сам применил стили по умолчанию.
Вся информация, написанная внутри тега <body>, будет видна на странице браузера.
Теперь также давайте поступим со следующими текстами. Когда пишете несколько параграфов подряд, каждый оборачиваете в свой <p>.
Вот так должен у вас выглядеть итоговый файл:
Обновите браузер. Видите? Появились остальные абзацы. Между ними есть воздух, отступ. Браузер автоматически добавляет его, чтобы текст не слипался в одну кашу.
Также у нас есть другие заголовки: «Наш ADC», «Что изучают студенты ADC», «Контакты». Помните, что заголовок первого уровня может быть на странице только один, поэтому все последующие будут второго уровня и ниже. Давайте добавим их:
А также есть и третьего уровня заголовки: «Наша история», «Веб-вёрстка и веб-программирование», «UX/UI дизайн и прототипирование», «Креативное программирование, генеративная графика», «Системный дизайн и дизайн-системы». Добавим и их:
Давайте приглядимся внимательнее. Нашу страницу можно разделить на три смысловые части: хедер (верхняя часть с логотипом и ссылкой на раздел со статьёй об истории ADC), основная часть с текстами и картинками и футер (нижний блок с логотипом, ссылкой на раздел со статьёй и социальные сети). Cоздададим такую структуру в нашем проекте:
Наши тексты помещаем между открывающим и закрывающим тегом <main>, так как тексты — это основная информация на странице.
Теперь наша базовая структура полностью готова. В следующем уроке рассмотрим, как добавить к нашему проекту картинки и ссылки. В качестве домашнего задания вам нужно добавить все заголовки и тексты на страницу статьи («Наша история»).
Посмотрите на хедер сайта ADC. Видите текст «Наша история»? Это ссылка. Без ссылок интернет был бы набором изолированных страниц. Как книги в библиотеке без каталога. Нашли одну книгу, прочитали, но не знаете, где искать следующую.
Ссылки — это тропинки между страницами. Они превращают разрозненные документы в единую сеть. Именно поэтому интернет называют Всемирной паутиной. Страницы связаны между собой ссылками, как нити в паутине.
Давайте посмотрим внимательнее на любую страницу. В хедере есть ссылка, давайте сделаем её кликабельной:
Тег <a> — это ссылка. Атрибут href указывает, куда ведёт ссылка. Это как адрес на конверте. Текст между <a> и </a> — это то, что видит пользователь. Кликабельный текст.
Сохраните файл. Откройте в браузере. Видите синий подчёркнутый текст «Наша история»? Это браузер показал ссылку. Наведите курсор. Курсор превратился в руку с указательным пальцем. Это значит, элемент кликабельный. Кликните. Браузер попытается открыть ссылку на одину из наших страниц.
Если файла нет, увидите ошибку. Это нормально. Важно понять: атрибут href указывает путь. Если файл лежит в той же папке, пишете просто имя файла, если в другой папке, указываете путь: pages/about.html. Если это внешний сайт, пишете полный адрес: https://example.com. Чтобы у нас заработала сслыку на историю, давайте создадим еще один html файл рядом с первым и назовем history.html. Сохраним, обновим страницу в браузере. Видите? Ссылка заработала.
Также у нас есть ссылки на внешние источники. Например, сайт Школы дизайна. Давайте добавим и их.
Для чего мы создали такую странную структуру? Она нам нужна чтобы чуть дальше добавить изображение стрелки. <div> нам нужен для «обёртки» текста и картинки. Так мы говорим, что они вместе являются ссылкой.
Перейдём к картинкам. Чтобы добавить их на страницу используется тег <img>. Изображение. Но здесь есть особенность. У этого тега нет закрывающей части. Пишется так:
Атрибут src — это путь к файлу с картинкой. Атрибут alt — это альтернативный текст. Он показывается, если картинка не загрузилась. Или озвучивается программами чтения с экрана для людей с плохим зрением.
Добавим все картинки к нам на страницу. Предварительно скачайте все изображения, создайте внутри основной папки еще одну и назовите images, поместите туда все картинки.
