Что такое HTML и почему его должен знать каждый веб-разработчик

Что такое HTML и для чего он используется? Это язык программирования? Как долго его учить?

HTML (от английского HyperText Markup Language) — это язык гипертекстовой разметки страницы. Он используется для того, чтобы дать браузеру понять, как нужно отображать загруженный сайт.

Возможности HTML

Язык состоит из тегов — это своеобразные команды, которые преобразовываются в визуальные объекты в браузере пользователя. Например, тег <img> используется для размещения изображений на странице. У него есть обязательный атрибут src, в котором указывается ссылка на файл.

Вот как будет выглядеть код:

<p>Какой-нибудь сопроводительный текст. Обычно в примерах используют lorem ipsum, но мы пишем всё сами — хардкор!</p>

<img src=’image.png’>

<p>А тут еще один абзац, чтобы заполнить пустоту.</p>

А вот как этот код выглядит в браузере:

Еще вы могли заметить тег <p>. Он используется для создания абзацев. Этот тег парный, то есть на конце абзаца должен стоять закрывающий </p>. Парные теги применяются для разметки блоков:

  • контейнеров;
  • абзацев;
  • заголовков;
  • списков;
  • таблиц и так далее.

В них могут находиться другие блоки или отдельные элементы, такие как изображения.

Вот, например, что будет, если поместить код в блок <center>:

Принцип работы разметки следующий:

  1. Вы вводите в адресную строку адрес сайта или страницы.
  2. Браузер делает запрос по этому адресу и получает файл в формате .html.
  3. Код из полученного файла преобразуется в визуальные объекты.

При этом браузер следует правилам преобразования, которые немного отличаются в зависимости от системы, версии и типа обозревателя. Если в коде допущена ошибка, то на странице может появиться что-то неожиданное. Допустим, мы написали таблицу:

<table border='1'>

<tr><th>№</th><th>Позиция</th><th>Цена за единицу(руб.)</th></tr>

<tr><td>1</td><td>Ручка синяя</td><td>8</td></tr>

<tr><td>2</td><td>Карандаш с ластиком</td><td>10</td></tr>

<tr><td>3</td><td>Линейка (30 см)</td><td>30</td></tr>

<tr><td>4</td><td>Галстук</td><td></td>250</tr>

<tr><td>5</td><td>Дырокол</td><td>100</td></tr>

</table>

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

Стоимость галстука вышла за пределы таблицы, потому что браузер не смог определить, где она должна находиться.

Что нельзя сделать на HTML

Простыми словами, HTML — это каркас сайта. В нем могут быть прописаны:

  • ссылки;
  • таблицы;
  • изображения;
  • блоки;
  • абзацы;
  • формы;
  • заголовки и так далее.

Также есть ограниченные возможности по изменению внешнего вида:

  • поменять цвет;
  • указать фоновое изображение;
  • изменить шрифт;
  • сделать текст жирным, курсивным, подчеркнутым, зачеркнутым и так далее.

На данный момент выпущено пять версий языка. Первая версия была разработана между1986 и 1991 годами, а последняя (5.2) — в 2017. Изначально он должен был стать независимым от каких-либо платформ — отображаться везде одинаково. Но этого не случилось, потому что у пользователей росли требования к мультимедиа.

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

В пятой редакции HTML стал чуть независимее от других языков. Раньше проверка правильного заполнения форм была исключительно на JS, а теперь часть задач можно переложить на HTML.

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

Появился встроенный плеер — теперь не нужно подключать Adobe Flash Player или другие плагины. Визуальная часть перетаскивания элементов теперь реализуется на HTML и CSS, если добавить атрибут draggable.

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

Работа с действиями пользователей пока в основном реализуется на JS. Атрибут draggable хоть и создает видимость перетаскивания, но на самом деле событие должно обрабатываться на JavaScript. HTML позволяет обмениваться данными с другими страницами, но чтобы их обработать, пригодится PHP.

Пока HTML стремится к тому, чтобы ускорить разработку и снизить нагрузку на браузер, но без других языков ему пока не обойтись, как и им без него.

Является ли HTML языком программирования

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

При этом во многих источниках говорится, что HTML все-таки относится к языкам программирования. Часть из них сомнительные, но встречаются и вполне авторитетные:

Так написано даже в «Википедии», хоть технически это и неверно.

Как долго учить HTML

Основы, которых хватит на создание простых сайтов, можно изучить за час. То есть быстрее, чем была написана эта статья. Но, как и в любом деле, мастерство приходит с практикой. Мало просто создать каркас — нужно убедиться, что он правильно отображается везде.

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

Курс «Профессия frontend-разработчик»
С нуля до разработчика с зарплатой от60 000 рублей за6 месяцев. Научитесь верстать сайты и создавать интерфейсы, соберите два проекта в портфолио и получите современную профессию.
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы
Хочешь получать крутые статьи по программированию?
Подпишись на рассылку Skillbox
Посмотреть