easy

Что такое HTML (и почему это важно)

Изучаем основы веба на простом примере.

HTML — основа всего, что происходит внутри вашего браузера. Если вы знаете HTML, то можете сами создавать сайты, красиво оформлять статьи и документы в интернете и даже устроиться на работу веб-разработчиком. Давайте копнём.

Как это работает

HTML — это язык гипертекстовой разметки документов (HyperText Markup Language). По-русски: это набор команд, которые говорят нашим браузерам, как рисовать сайты. Например:

<h1>Это заголовок</h1>
<p>Это абзац текста <a href="...">с гиперссылкой</a>.</p>
<ul>
  <li>Это элемент ненумерованного списка</li>
  <li>И ещё один</li>
</ul>

Слова внутри угловых скобок называются тегами: <h1>,<p> и т. д. Теги говорят браузеру, как именно нужно отобразить тот или иной текст, где разместить картинку или какую сделать кнопку.

Сохраним наш фрагмент как текстовый файл и откроем его в браузере. Браузер прочитает каждый тег и покажет нам страницу уже без них, но будет помнить, что они означают. Браузеры на компьютерах и смартфонах понимают эти команды примерно одинаково, поэтому в большинстве браузеров страница тоже будет смотреться одинаково. Например, написанный выше код будет выглядеть как-то так:

Это заголовок

Это абзац текста с гиперссылкой.

  • Это элемент ненумерованного списка
  • И ещё один


В мире есть много подобных языков: текстовые редакторы Microsoft Word и Apple Pages тоже используют собственные языки разметки, чтобы сохранить информацию об оформлении документа. Даже когда вы в них пишете простой текст, эти редакторы добавляют в документ невидимую информацию о внешнем виде текста.

Зачем нужен HTML

HTML — главный язык в интернете, на котором написано большинство документов. Каждый абзац текста в интернете, скорее всего, завёрнут в теги <p>...</p> и каждая ссылка, на которую вы нажимали, точно была завёрнута в теги <a>...</a>. Короче: это язык, на котором написан весь интернет.

Если бы не было HTML, нам бы пришлось придумать какой-то другой формат для обмена документами в Сети, поэтому в любом случае мы бы получили тот же HTML.

— Но я не обмениваюсь документами!

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

  1. Вы набираете yandex.ru в адресной строке браузера или печатаете прямо там свой поисковый запрос.
  2. Какие-то серверы, принадлежащие Яндексу, создают для вас новый документ — главную страницу yandex.ru или страницу с результатами поиска. Этот документ отправляется на ваш компьютер.
  3. Ваш браузер получает этот документ, он написан на языке HTML. Браузер читает все теги и инструкции и показывает результат на экране в виде пикселей. Вам может показаться, что это вы пришли в Яндекс, но на самом деле это Яндекс отправил вам документ с результатами поиска.
  4. Вы нажимаете на ссылку в этом документе, и ваш браузер запрашивает новый документ с другого сервера. В ответ вам снова приходит HTML-документ.
  5. Браузер открывает полученный документ в новой вкладке.
  6. Кажется, что вы перешли на новый сайт, но на самом деле вы скачали с этого сайта документ, который выглядит как страница.

По-простому, в интернете вы никуда не «ходите». Скорее вы скачиваете документы, которые для вас формируют серверы разных компаний. Эти документы написаны на HTML.

Зачем знать HTML

Если вы знаете основные HTML-теги, то вы можете:

  • создавать свои и редактировать чужие страницы и целые сайты; настраивать готовые сайты и шаблоны;
  • контролировать внешний вид своих материалов при их публикации на разных сайтах;
  • стащить чей-то макет или фрагменты кода и использовать их в своих сайтах;
  • обходить некоторые пейволы и блокировки доступа к закрытому контенту.

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

Вот основные теги, которые используются в HTML:

<head>...</head> — служебная область на странице, которая не показывается в браузере, но влияет на страницу в целом.

<title>...</title> — находится внутри <head>. Текст, который написан внутри этого тега, отображается в названии вкладки и в закладках браузера.

<body>...</body> — видимая часть страницы. Всё, что вы видите, происходит внутри этих тегов.

<h1>...</h1>, <h2>...</h2> и так далее — заголовки разного уровня.

<p>...</p> — абзац.

<a href="...">...</a> — гиперссылка. Свойство «href» отвечает за адрес ссылки.

<img src="..."> — картинка. Свойство «src» отвечает за адрес, по которому лежит изображение, чтобы браузер мог запросить её оттуда, скачать и показать на экране.

<ul><li>...</li></ul> — ненумерованный список с одним элементом внутри. Чтобы элементов было больше, добавьте <li>...</li> внутрь <ul>...</ul>.

<ol><li>...</li></ol> — нумерованный список.

<div>...</div> — универсальный блок внутри страницы. Его можно настроить, чтобы содержимое выглядело и работало как угодно, от назойливой всплывашки до кнопки подтверждения.

<span>...</span> — с помощью этого тега можно менять внешний вид выбранного текста. Например, выделить его жёлтым, как маркером на бумаге.

<table><tbody><tr><td>...</td><td>...</td></tr></tbody></table> — минимальный набор тегов, чтобы сделать таблицу. TR отвечает за строки в таблице (table row), а TD — за ячейки в этой строке (table division). Мы вкладываем один тег в другой: ячейки живут внутри строк, строки — внутри <tbody>, и всё это живёт внутри тега <table>.

Ещё есть <TH>, который отвечает за первую строку таблицы (её называют головкой), но мы туда сейчас не полезем. 

Нужно ли это учить?

В интернете полно информации про HTML, поэтому нет необходимости что-то заучивать специально. Но если вы будете регулярно что-то верстать в HTML, вы и сами всё выучите. Это как ходьба или езда на велосипеде.

Если подумать, то привычные веб-страницы в каком-то смысле умирают, и HTML медленно теряет свою актуальность. 20 лет назад веб-страницы были единственным способом разместить что-то в Сети, а для этого абсолютно точно нужно было знать HTML. Теперь у нас есть социальные сети и платформы для публикаций, которые не требуют знания HTML. А у тех платформ, которые требуют, есть WYSIWYG-редакторы — они сразу позволяют форматировать текст как в Microsoft Word. Поэтому в будущем может появиться поколение интернет-пользователей, которые ни разу в жизни не столкнутся с HTML-кодом в своих проектах.

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

Скоро всё покажем!

Веб-разработка — это новый чёрный
На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.
Начать бесплатно
Веб-разработка — это новый чёрный
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
easy