16 Апр 2022
6 мин
320

Что такое HTML: основные теги

С помощью HTML структурируют страницу на сайте, добавляют картинки, таблицы, списки.

Как использовать HTML

Содержание

HTML (HyperText Markup Language) — язык гипертекстовой разметки. Этот стандарт применяют, когда разрабатывают веб-страницы. Он не относится к языкам программирования, на которых пишут программы и приложения. В нём есть только теги — они говорят браузеру, как отображать сайт. HTML — это старт в профессиях верстальщика и веб-программиста.

Зачем нужен HTML

Когда пользователь открывает сайт в браузере, в ответ он получает HTML-страницу, файлы стилей CSS и скрипты JS, если они есть на странице. Браузер обрабатывает полученные данные и отрисовывает страницу по заданным правилам.

С помощью HTML определяют структуру: блоки с контентом и их порядок. Блок содержит текст и различные атрибуты. Например, так создают заголовок:

 <h2>Это заголовок второго уровня</h2>.

А так делают параграф:

 <p>Абзацы начинаются с новой строки и отделяются отступами сверху и снизу</p>.

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

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

Любая современная HTML-страница начинается с тега <!DOCTYPE html>. Это указывает браузеру на последнюю версию HTML5. Без этого тега страница отобразится некорректно.

Структура HTML довольно проста: весь код находится внутри тега <html></html>. В блоке <head></head> подключают стили, указывают метатеги и метаописание. Устанавливают тайтл <title></title> — название, которое отобразится на вкладке в браузере. В блоке <body></body> располагают контент страницы, ее видимую часть: текст, картинки, видео, ссылки.

Пример простой страницы:

</p>
<p>&lt;!DOCTYPE html&gt;</p>
<p>&lt;html&gt;</p>
<p>&lt;head&gt;</p>
<p>&lt;meta charset="utf-8"&gt;</p>
<p>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</p>
<p>&lt;title&gt;Это название страницы&lt;/title&gt;</p>
<p>&lt;/head&gt;</p>
<p>&lt;body&gt;</p>
<p>&lt;h1&gt;Это заголовок первого уровня&lt;/h1&gt;</p>
<p>&lt;p&gt;Размещаем текст, а далее изображение&lt;/p&gt;</p>
<p>&lt;img src="/media/image.png"&gt;</p>
<p>&lt;p&gt;Таких тегов может быть сколько угодно&lt;/p&gt;</p>
<p>&lt;/body&gt;</p>
<p>&lt;/html&gt;</p>
<p>

К основным тегам, с помощью которых структурируют документ, относят теги для отображения медиа, работы с текстом, гиперссылками. А еще теги, чтобы создавать списки, заголовки, кнопки, формы и пользовательские блоки — div-контейнеры.

🚀 Для текста

Кроме тега параграфа <p> чаще используют <span>. Это специальный строчный тег, с помощью которого у части текста меняют форматирование. То есть выделяют часть информации внутри других тегов и устанавливают стиль. Внутри абзаца меняют цвет и размер первой буквы: добавляют начальный и конечный тег <span> и определяют для него стиль текста. Например, делают его жирным, курсивным или цветным.

</p>
<p>&lt;p&gt;&lt;b&gt;<strong>Этот текст будет написан жирным</strong>&lt;/b&gt;&lt;/p&gt; — благодаря тегу форматирования &lt;/b&gt;.</p>
<p>&lt;p&gt;Часть текста &lt;i&gt;<em>будет курсивной</em>&lt;/i&gt;&lt;/p&gt; — этого добиваемся с помощью тега &lt;i&gt;.</p>
<p>&lt;p&gt;Пример с &lt;span style="color: red;"&gt;&lt;i&gt;<span style="color: #ff0000;"><em>красным курсивом</em></span>&lt;/i&gt;&lt;/span&gt;&lt;br&gt;и переносом строки&lt;/p&gt;</p>
<p>

🚀 Для изображений

Тег <img> используют, чтобы добавить картинку. Его атрибуту src устанавливают значение, в котором — путь до нужного файла. Например, чтобы отобразить изображение 200 на 200 пикселей, напишите:

</p>
<p>&lt;img src="путь_к_картинке.png" width=200 height=200&gt; — width и height — атрибуты тега &lt;img&gt;.</p>
<p>

🚀 Для сложной структуры данных

К такой структуре относят маркированные и нумерованные списки. Для каждого есть свой тег: <ul> — для маркированного, <ol> — для нумерованного. А чтобы обозначить элемент списка, используют тег <li>. Для таких списков есть правило: внутри <ul> и <ol> не должно находиться ничего, кроме <li>.

</p>
<p>&lt;h2&gt;Маркированный список&lt;/h2&gt;</p>
<p>&lt;ul&gt;</p>
<p>&lt;li&gt;Элемент 1&lt;/li&gt;</p>
<p>&lt;li&gt;Элемент 2&lt;/li&gt;</p>
<p>&lt;li&gt;Элемент 3&lt;/li&gt;</p>
<p>&lt;/ul&gt;</p>
<p>

</p>
<p>&lt;h2&gt;Нумерованный список&lt;/h2&gt;</p>
<p>&lt;ol&gt;</p>
<p>&lt;li&gt;Элемент 1&lt;/li&gt;</p>
<p>&lt;li&gt;Элемент 2&lt;/li&gt;</p>
<p>&lt;li&gt;Элемент 3&lt;/li&gt;</p>
<p>&lt;/ol&gt;</p>
<p>

Как сделать маркированный и нумерованный список в HTML

Результат

Еще более сложная структура — таблица. Ее описывают внутри тега <table>. Чтобы определить названия столбцов, создайте элемент <tr> и поместите теги табличного заголовка <th> с названием столбцов. Значения добавляйте с тегом табличных данных <td>.

</p>
<p>&lt;!-- Здесь описывают столбцы таблицы --&gt;</p>
<p>&lt;table border="1"&gt;</p>
<p>&lt;caption&gt;Теги html&lt;/caption&gt;</p>
<p>&lt;tr&gt;</p>
<p>&lt;th&gt;ТЕГ&lt;/th&gt;</p>
<p>&lt;th&gt;ДЛЯ ЧЕГО НУЖЕН&lt;/th&gt;</p>
<p>&lt;th&gt;ОПИСАНИЕ&lt;/th&gt;</p>
<p>&lt;/tr&gt;</p>
<p>&lt;!-- Далее идут значения --&gt;</p>
<p>&lt;tr&gt;</p>
<p>&lt;td&gt;caption&lt;/td&gt;</p>
<p>&lt;td&gt;Таблицы&lt;/td&gt;</p>
<p>&lt;td&gt;Создает заголовок таблицы&lt;/td&gt;</p>
<p>&lt;/tr&gt;</p>
<p>&lt;tr&gt;</p>
<p>&lt;td&gt;a&lt;/td&gt;</p>
<p>&lt;td&gt;Гиперссылки&lt;/td&gt;</p>
<p>&lt;td&gt;Создают ссылки на другие документы&lt;/td&gt;</p>
<p>&lt;/tr&gt;</p>
<p>&lt;tr&gt;</p>
<p>&lt;td&gt;br&lt;/td&gt;</p>
<p>&lt;td&gt;Перенос&lt;/td&gt;</p>
<p>&lt;td&gt;Переносит текст на новую строку&lt;/td&gt;</p>
<p>&lt;/tr&gt;</p>
<p>&lt;tr&gt;</p>
<p>&lt;td&gt;img&lt;/td&gt;</p>
<p>&lt;td&gt;Изображение&lt;/td&gt;</p>
<p>&lt;td&gt;Содержит ссылку на изображение&lt;/td&gt;</p>
<p>&lt;/tr&gt;</p>
<p>&lt;/table&gt;</p>
<p>

Как сделать таблицу в HTML

Результат кода

HTML и другие технологии

HTML — фундаментальная технология, но для разработки сайтов используют не только ее. С помощью CSS описывают внешний вид элементов страницы, адаптируют сайт под просмотр с компьютера и смартфона. А с JavaScript делают страницу динамической: то есть оживляют кнопки, изображения, карточки товаров.

Страница Яндекса без разметки

Так выглядит страница яндекса, если из нее убрать CSS

Изучите HTML, CSS и JavaScript на курсе «Веб-разработчик» онлайн-университета профессий Skypro. Познакомитесь и поработаете с GIT, GitHub, линтерами, форматтерами, пакетными менеджерами, фреймворком React, backend-разработкой.

Осваивать теорию будете по видеоурокам, вебинарам и конспектам. Отрабатывать — с помощью домашек: проверяют их только практикующие разработчики. Сложные темы разберете онлайн, за 12 месяцев учебы сделаете 7 проектов в портфолио.

Главное об HTML

  • HTML — это язык гипертекстовой разметки страницы. Он состоит из тегов — команд браузеру, как отображать страницу.
  • С помощью HTML делают текст жирным, курсивным, подчеркнутым, меняют его цвет. Ставят абзацы, обозначают заголовки, таблицы, списки. Размещают не только текст, но и ссылки или изображения.
  • Полный список тегов — на сайте HTML5Book. А закрепить навыки можно в онлайн-редакторе Сodesandbox.
  • HTML отвечает за структуру и контент — не за форматирование элементов страницы или динамику сайта. Поэтому разработчику нужно знать и другие технологии: CSS и JavaScript.

Получите пошаговый план развития в карьере после записи на курс






    Оставляя заявку, вы принимаете условия соглашения

    Учёба ради учёбы — это не прикольно. На наших курсах вы ставите конкретные цели и достигаете
    их
    в заданные сроки. Начинайте карьеру с первых достижений!

    Добавить комментарий

    Вставить формулу как
    Блок
    Строка
    Дополнительные настройки
    Цвет формулы
    Цвет текста
    #333333
    Используйте LaTeX для набора формулы
    Предпросмотр
    \({}\)
    Формула не набрана
    Вставить