StandUp «Путь в IT» с Павлом Волей
Кнопка закрыть топ-бар
ГлавнаяБлогЧто такое html: где используется, для чего нужен
Язык HTML
1 892
Время чтения: 14 минут

Что такое html: где используется, для чего нужен

Сохранить статью:
Сохранить статью:
В статье рассказывается:     
  1. Что такое HTML простыми словами
  2. История развития HTML кода
  3. Основные элементы HTML
  4. Пример использования HTML
  5. Ограничения HTML
  6. Интеграция HTML с другими инструментами

HTML – это язык гипертекстовой разметки документов. Такое определение не вносит ясности и не отвечает на вопрос, что же это такое. Если говорить простыми словами, то это язык программирования, с помощью которого пишутся сайты. Открывая любую страничку в браузере, вы ее видите такой именно благодаря HTML.

У HTML есть структура, элементы и «правила» взаимодействия. Зная этот язык, можно легко написать сайт даже в простом блокноте. Подробнее о том, что такое HTML, как он появился, развивался, вы узнаете из нашего материала.

Что такое HTML простыми словами

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

Что такое HTML
Что такое HTML

HyperText Markup Language – язык гипертекстовой разметки. Это набор команд, следуя которым, браузеры выводят на монитор различные документы и странички сайтов. Покажем на примере, что такое язык разметки HTML:

К примеру:

  • <h1>Это заголовок</h1>
  • <p>Это текстовый абзац <a href=»…»>с гиперссылкой</a>.</p>
  • <ul>
  • <li>Это элемент ненумерованного перечисления</li>
  • <li>И ещё один</li>
  • </ul>
Здесь мы видим разные символы и слова, которые вписаны внутри угловых скобок (<h1>, <p> и др.). Их называют тегами. Здесь стоит объяснить, что такое теги в HTML. Это указания браузеру, как следует отображать текстовые фрагменты, где расположить картинку, кнопу и т.д.

Давайте сохраним представленный выше фрагмент в виде текстового файла, а затем откроем его в браузере. В результате будут прочитаны все теги (специальные команды), а перед нами откроется страница уже без них. При этом браузер запомнит значение всех тегов. Отметим, что браузеры ПК, смартфонов и других устройств одинаково воспринимают такие команды, поэтому в большинстве случаев страницы будут одинаковыми. К примеру, записанный нами код отобразится следующим образом:

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

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

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

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

История развития HTML-кода

К сожалению, точной даты назвать не получится. Разработка формата HTML происходила, начиная с 1986 и по 1991 годы. Он был ориентирован на людей, не имеющих глубоких знаний в области программирования и верстки. В результате сложная система разметки (Standard Generalized Markup Language) свелась к небольшому списку дескрипторов (тегов).

Перечислим некоторые особенности HTML-кода:

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

Версии HTML:

  • 2.0 — была опубликована IETF, как RFC 1866 в статусе Proposed Standard (24.11.1995 г.);
  • 3.0 — появилась 28.03.1995: IETF Internet Draft (до 28.09.1995 г.);
  • 3.2 — опубликована 14.01.1997 года;
  • 4.0 — представлена 18.12.1997 года;
  • 4.01 — разработана 24.12.1999 года;
  • ISO/IEC 15445:2000 (своеобразный ISO HTML, базирующийся на HTML 4.01 Strict) — 15.05.2000 года;
  • Версия 5— 28.10.2014 года;
  • Версия 5.1 стартовала в разработке 17.12.2012 года. Рекомендована к использованию с 1.11.2016 года.
  • 5.2 появилась 14.12.2017 года.
  • 5.3 опубликована 24.12.2018 года.
Актуальным сейчас является HTML 5, который дорос до релиза 5.3. Эта версию поддерживают большинство современных браузеров.

Основные изменения в более новых версиях HTML связаны с отображением новых функций. Так, была внедрена поддержка ввода дополнительных типов данных: дата/время, адрес электронной почты, доменного имени. Кроме того, появились вспомогательные элементы для добавления на онлайн страницы аудио- и видеоконтента, рисования в определенном месте с применением скриптов JavaScript.

Основные элементы HTML

Раскрыть, что такое язык разметки HTML можно, представив его в качестве инструмента для преобразования простых команд (тегов), в визуальные объекты. К примеру, тег <img> применяется для вывода в браузере картинок. Обязательным атрибутом выступает ссылка на файл. Как правило, для хранения картинок используются ресурсы удаленного сервера, где расположены все файлы сайта, или специальные внешние сервисы.

ТОП IT-профессий
2022 года с доходом
от 170 000 ₽
Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.
Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Александр Сагун
Александр Сагун
Исполнительный директор Geekbrains
pdf иконка

Топ-30 самых востребованных и высокооплачиваемых профессий 2022

pdf иконка

Подборка 50+ ресурсов об IT-сфере

pdf иконка

ТОП сервисов и приложений, на которые следует перейти уже сегодня

pdf иконка 3,7 MB
Уже скачали 11794 pdf иконка

Основные группы элементов HTML используются для решения следующих задач:

  • Текстовое форматирование – жирный шрифт, курсив, подчеркивание, размер кегля, списки (нумерованные или маркированные).
  • Текстовые блоки – разные уровни заголовков от H1 до H6, абзацы, написание с новой строки.
  • Табличные формы – неограниченное число строчек, столбцов, указание фиксированных параметров высоты/ширины, заголовки.
  • Вставка картинок, аудио, текстовых и видеофайлов.
  • Гиперссылки, обеспечивающие переход на файл картинки, прайса и на отдельную страницу с определенного пункта меню или анкора в тексте. Кроме того, существуют атрибуты, обеспечивающие открытия документа в текущем/новом окне.

В языке HTML есть возможность для разработки простых форм для ввода текста, выбора пункта из списка. При необходимости создать более сложные конструкции следует использовать более функциональные языки — JavaScript или PHP.

Основные элементы HTML
Основные элементы HTML

Рассмотрим более подробно элементы HTML.

Элемент <html>

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

Тегам присущи определенные свойства (атрибуты) со значениями. Их указывают за тегом.

Атрибуты элемента <html>.

Атрибут Описание Возможные значения
manifest Показывает путь к кешу манифеста. URL.

Манифест (manifest) – имеет вид текстового файла с перечнем ресурсов для хранения необходимых данных (кеширования). Пока все может показаться сложным для понимания. Забудем о манифесте и приведем более простой пример, как указываются атрибуты:

  • <html manifest = «URL»>

, где:

  • html — тег;
  • manifest — свойство (атрибут);
  • URL — значение атрибута.
Зарегистрируйся на интенсив StandUp «Путь в IT»
с Павлом Волей
и получи подборку
полезных документов от Geekbrains
Павел Воля Павел Воля
Только до 26 мая
Бесплатно
Павел Воля
Tелеведущий и гуманитарий

Мы вместе с экспертами по построению карьеры подготовили документы, которые помогут не ошибиться с выбором и определить, какая профессия в IT подходит именно вам.

Благодаря этим гайдам 76% наших студентов смогли найти востребованную профессию своей мечты!

Скоро мы уберем их из открытого доступа, успейте скачать бесплатно:

pdf иконка

Женщины в IT: мифы и перспективы в карьере

pdf иконка

Как прокачать свою технику речи

pdf иконка

100 тыс. руб за 100 дней с новой профессией

Список из 6 востребованных профессий с заработком от 100 тыс. руб

pdf иконка

Критические ошибки, которые могут разрушить карьеру

Собрали 7 типичных ошибок, четвертую должен знать каждый!

pdf иконка

Гайд по профессиям в IT

5 профессий с данными о навыках и средней заработной плате

pdf иконка 4,7 MB
pdf иконка 107 MB
Уже скачали 12677 pdf иконка

Элемент <head>

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

  • Поисковых роботов.
  • Стилизации и расширения функциональности веб ресурса.
  • Указания заголовка файла в браузере с применением тега <title>.

Элемент <title>

Тег <title> применяют для указания название web-страницы (оно будет отображено в закладке браузера).

Элемент <body>

Теги <body> и </body> обрамляют всю видимую пользователю информацию web-страницы.

Пример использования HTML

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

Пример использования HTML
Пример использования HTML

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

После этого тега указывается сам документ страницы, который имеет начало и конец. Они обозначены открывающим (<html>) и закрывающим (</html>) тегами (своеобразный контейнер, хранящий всю информацию веб страницы). Внутри таких элементов содержится весь полезный для пользователя контент.

Непосредственно внутри HTML-документа видим теги <head> и <body>. Выглядит это следующим образом:

Код:

  • <html>
  • <head></head>
  • <body></body>
  • </html>

В <head> прописаны служебные элементы для поисковых систем и браузеров:

  • заголовок <title>, является обязательным элементом документа, который отображается в поисковой выдаче и во вкладке браузера;
  • мета теги названия, описания и ключевых слов;
  • описание содержания файла;
  • ссылки на стили <link>;
  • ссылки на скрипты <script>.

Все атрибуты, указанные в этом теге, не видимы пользователю и не отображаются на странице. Видимыми будут только те данные, которые указаны между тегами <body>. Это может быть:

  • текст;
  • табличные формы;
  • графика;
  • рисунки;
  • аудио/видео файлы и другие варианты кода.

Для закрепления представленной выше информации, приведем простой пример HTML файла:

Код:

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <title>Я написал свой первый HTML документ</title>
  • </head>
  • <body>
  • <h1>Мой первый HTML документ</h1>
  • <p>Всем привет!</p>
  • </body>
  • </html>

Если записать это в каком-либо текстовом документе (к примеру, в «Блокноте»), а затем сохранить в расширении html и открыть в браузере, то на мониторе отобразится заголовок <h1> и описание документа <p>. Заголовок всегда выделяется жирным шрифтом, который по размеру будет больше, чем остальной текст.

Здесь еще стоит раскрыть, что такое div в HTML. Тег <div> используется, чтобы обеспечить выделение фрагмента документа, в котором будет изменен вид содержимого.

Ограничения HTML

Мы отметили довольно широкий набор возможностей для форматирования веб-страниц в HTML, но при этом в данном языке разметки нет довольно большого перечня функций. К примеру, теги дают возможность использовать стандартный шрифт, но его нельзя изменить. В этом контексте будет полезно разобраться, что такое HTML и CSS. Второй язык используется для описания внешнего вида разметки HTML-документов. Что дает подключение таблиц стилей CSS?

Такое решение позволяет преодолеть недостатки HTML:

  • Упрощается адаптивная верстка.
  • Сокращается время на оформление интернет-страниц.
  • Увеличивается стандартный перечень возможностей.

В результате мы получаем более привлекательный дизайн веб-ресурса, повышаем скорость загрузки страницы и снижаем нагрузку на сервер. При работе в HTML приходится дублировать код на каждой странице. С использованием CSS появляется возможность для вставки короткой ссылки на необходимый участок кода. Изменение шаблона оставляет неизменным файл CSS, поэтому существенно упрощается редактирование сайтов.

Язык HTML отличается достаточно «топорной» работой, и вебмастеру приходится дублировать команды на всех страницах. Это нерациональное решение для создания элементов, которые будут общими для всех страниц сайта («шапка», «подвал», общее меню).

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

Интеграция HTML с другими инструментами

Благодаря особенностям языка разметки значительно упростился вопрос интеграции сторонних сервисов. На страницы любого ресурса можно быстро и просто встроить системы аналитики Яндекс.Метрика или Google Analytics. Точно также несложно разметить функциональные блоки сайта: формы подписки, обратной связи, контактов и т.д. Интернет-пользователи не видят никакой разницы, им доступен готовый результат.

Интеграция HTML с другими инструментами
Интеграция HTML с другими инструментами

Примеры самых популярных интеграций:

  • PHP. В теле страницы HTML указывается ссылка на исполняемый файл.
  • JavaScript. Все скрипты можно становить целиком или в форме ссылки на документ.
  • Ajax – комбинация асинхронного JS и XML.
  • Iframes. Метод встраивания в документ интерактивных элементов.
Благодаря наличию таких возможностей может сложиться мнение, что HTML – это полноценный язык программирования. В реальности же он только обеспечивает управление тем, как отображается содержимое веб-страниц. Все остальное определяют подключаемые программные модули. Чтобы изучить язык разметки, потребуется буквально несколько дней, но следует помнить о наличии ограничений и понимать, что такое структура HTML.

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

Оцените статью
Рейтинг: 5
( голосов 2 )
Поделиться статьей
Добавить комментарий

Забрать
гарантированный
подарок
Забрать гарантированный
подарок
Скачать файл

Зарегистрируйся на интенсив StandUp «Путь в IT» с Павлом Волей и получи подборку полезных документов от Geekbrains

pdf-файл 302mb

Поздравляем!
Вы выиграли:

2-х дневный интенсив "Путь в IT"

Не пропустите сообщение!
Мы скоро свяжемся с вами!

Редирект для продолжения диалога