16 Апр 2022
6 мин
7595

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

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

Содержание

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

Зачем нужен HTML

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

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

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

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

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

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

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

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

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

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

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

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

🚀 Для текста

Кроме тега параграфа

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

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

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

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

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

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

 

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

&lt;h2&gt;Маркированный список&lt;/h2&gt;
<h2>Маркированный список</h2>

<ul>
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
</ul>


<h2>Нумерованный список</h2>

<ol>
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
</ol>

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

Результат

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

<!-- Здесь описывают столбцы таблицы -->

<table border="1">
<caption>Теги html</caption>
<tr>
  <th>ТЕГ</th>
  <th>ДЛЯ ЧЕГО НУЖЕН</th>
  <th>ОПИСАНИЕ</th>
</tr>


<!-- Далее идут значения -->

<tr>
  <td>caption</td>
  <td>Таблицы</td>
  <td>Создает заголовок таблицы</td>
</tr>

<tr>
  <td>a</td>
  <td>Гиперссылки</td>
  <td>Создают ссылки на другие документы</td>
</tr>


<tr>
  <td>br</td>
  <td>Перенос</td>
  <td>Переносит текст на новую строку</td>
</tr>

<tr>
  <td>img</td>
  <td>Изображение</td>
  <td>Содержит ссылку на изображение</td>
</tr>

</table>


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

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

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

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

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

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

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

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

Главное об HTML

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

Содержание

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

Получить iPhone 15
Пройдите тест, узнайте какой профессии подходитеНачать тест
+