HTML – это язык гипертекстовой разметки документов. Такое определение не вносит ясности и не отвечает на вопрос, что же это такое. Если говорить простыми словами, то это язык программирования, с помощью которого пишутся сайты. Открывая любую страничку в браузере, вы ее видите такой именно благодаря HTML.
У HTML есть структура, элементы и «правила» взаимодействия. Зная этот язык, можно легко написать сайт даже в простом блокноте. Подробнее о том, что такое HTML, как он появился, развивался, вы узнаете из нашего материала.
Что такое HTML простыми словами
Что такое HTML? Речь идет о языке разметки, который позволяет браузеру понимать, как следует отображать пользователю ту или иную информацию. Изучив этот язык, можно заниматься веб-разработкой, а это достаточно востребованная и хорошо оплачиваемая специальность.
HyperText Markup Language – язык гипертекстовой разметки. Это набор команд, следуя которым, браузеры выводят на монитор различные документы и странички сайтов. Покажем на примере, что такое язык разметки HTML:
Что такое HTML?
-
Это заголовок
-
Это текстовый абзац с гиперссылкой.
- Это элемент ненумерованного перечисления
- И ещё один
Здесь мы видим разные символы и слова, которые вписаны внутри угловых скобок (
,
и др.). Их называют тегами. Здесь стоит объяснить, что такое теги в HTML. Это указания браузеру, как следует отображать текстовые фрагменты, где расположить картинку, кнопу и т.д.
Давайте сохраним представленный выше фрагмент в виде текстового файла, а затем откроем его в браузере. В результате будут прочитаны все теги (специальные команды), а перед нами откроется страница уже без них. При этом браузер запомнит значение всех тегов. Отметим, что браузеры ПК, смартфонов и других устройств одинаково воспринимают такие команды, поэтому в большинстве случаев страницы будут одинаковыми. К примеру, записанный нами код отобразится следующим образом:
Это заголовок
- Это элемент ненумерованного перечисления
- И ещё один
Для вас подарок! В свободном доступе до 02.07 —>
Скачайте ТОП-10
бесплатных нейросетей
для программирования
Помогут писать код быстрее на 25%
Чтобы получить подарок, заполните информацию в открывшемся окне
К языкам, имеющим свои варианты разметки, относятся и такие текстовые редакторы, как Microsoft Word или Apple Pages. Здесь также присутствует информация об особенностях оформления документа. Когда мы набираем любой текс с помощью таких редакторов в него автоматически добавляются невидимые для нас сведения о том, как выглядит этот документ. Затем эта информация позволяет нам открывать свой текс именно в том виде, в каком он был сохранен.
История развития HTML-кода
К сожалению, точной даты назвать не получится. Разработка формата HTML происходила, начиная с 1986 и по 1991 годы. Он был ориентирован на людей, не имеющих глубоких знаний в области программирования и верстки. В результате сложная система разметки (Standard Generalized Markup Language) свелась к небольшому списку дескрипторов (тегов).
ВЕРСТКА САЙТА ⚠️ Стоит ли учить HTML верстку в 2023?
Перечислим некоторые особенности HTML-кода:
- Начальный список дескрипторов для текстового оформления состоял лишь из 18 тэгов. 11 из них присутствуют и в новейших версиях.
- С использованием формата 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 можно, представив его в качестве инструмента для преобразования простых команд (тегов), в визуальные объекты. К примеру, тег
Узнай, какие ИТ — профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.
Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!
Скачивайте и используйте уже сегодня:
Александр Сагун
Исполнительный директор Geekbrains
Топ-30 самых востребованных и высокооплачиваемых профессий 2023
Поможет разобраться в актуальной ситуации на рынке труда
Подборка 50+ ресурсов об IT-сфере
Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT
ТОП 50+ сервисов и приложений от Geekbrains
Безопасные и надежные программы для работы в наши дни
Получить подборку бесплатно
Уже скачали 21533
Основные группы элементов HTML используются для решения следующих задач:
- Текстовое форматирование – жирный шрифт, курсив, подчеркивание, размер кегля, списки (нумерованные или маркированные).
- Текстовые блоки – разные уровни заголовков от H1 до H6, абзацы, написание с новой строки.
- Табличные формы – неограниченное число строчек, столбцов, указание фиксированных параметров высоты/ширины, заголовки.
- Вставка картинок, аудио, текстовых и видеофайлов.
- Гиперссылки, обеспечивающие переход на файл картинки, прайса и на отдельную страницу с определенного пункта меню или анкора в тексте. Кроме того, существуют атрибуты, обеспечивающие открытия документа в текущем/новом окне.
В языке HTML есть возможность для разработки простых форм для ввода текста, выбора пункта из списка. При необходимости создать более сложные конструкции следует использовать более функциональные языки — JavaScript или PHP.
Рассмотрим более подробно элементы HTML.
Элемент
Это корневой тег веб-страницы. Остальные HTML элементы могут располагаться исключительно внутри него. В противном случае браузер будет неадекватно обрабатывать документ.
Тегам присущи определенные свойства (атрибуты) со значениями. Их указывают за тегом.
| Атрибут | Описание | Возможные значения |
| manifest | Показывает путь к кешу манифеста. | URL. |
Манифест (manifest) – имеет вид текстового файла с перечнем ресурсов для хранения необходимых данных (кеширования). Пока все может показаться сложным для понимания. Забудем о манифесте и приведем более простой пример, как указываются атрибуты:
- html — тег;
- manifest — свойство (атрибут);
- URL — значение атрибута.
Только до 6.07
Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней
Список документов:
ТОП-100 площадок для поиска работы от GeekBrains
20 профессий 2023 года, с доходом от 150 000 рублей
Чек-лист «Как успешно пройти собеседование»
Чтобы зарегистрироваться на бесплатный интенсив и получить в подарок подборку файлов от GeekBrains, заполните информацию в открывшемся окне
Элемент
Теги обрамляют информацию, которая не видима пользователю при открытии браузера. Другими словами, она носит технический характер и предназначена для служебного пользования. Эта информация прописана для:
- Поисковых роботов.
- Стилизации и расширения функциональности веб ресурса.
- Указания заголовка файла в браузере с применением тега .
Элемент
Тег применяют для указания название web-страницы (оно будет отображено в закладке браузера).
Элемент
Теги и обрамляют всю видимую пользователю информацию web-страницы.
Пример использования HTML
Для более полного понимания, что такое HTML-страница, можно посмотреть, как она выглядит на различных веб-ресурсах. Для этого следует кликнуть на нее правой кнопкой мыши и в открывшемся меню выбрать пункт «Посмотреть код».
Обзор языка разметки HTML для новичков
С аббревиатурой HTML сталкиваются специалисты, которым по роду деятельности приходится делать сайты, наполнять их контентом и продвигать в поисковых системах. Копирайтеры используют этот язык для форматирования текстов и таблиц, а SEO-специалисты с его помощью подключают виджеты и системы аналитики.
Что представляет собой HTML
Формально HTML (Hypertext Markup Language) считается языком разметки веб-страниц. Результат интерпретируется браузером, и пользователь видит текст на экране компьютера или смартфона в заданном разработчиком виде. Первые сайты создавались практически на «чистом» коде HTML при незначительном включении скриптов на JavaScript.
Базовое знание HTML требуется для большинства вакансий, касающихся работы с сайтами, их наполнением и продвижением.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
История развития HTML
Точной даты создания языка HTML нет, его появление соотносится с периодом между 1986 и 1991 годами. Он изначально создавался для использования людьми без специальных знаний в верстке и программировании. Сложная система разметки SGML (Standard Generalized Markup Language) была сведена к небольшому набору дескрипторов. Они чаще называются тегами.
- Изначально перечень команд оформления текстов включал всего 18 элементов, 11 из которых используются даже в последних релизах.
- Основная задача языка заключалась в воспроизведении контента без искажений независимо от технического оснащения устройства.
- Современные версии HTML стали более зависимыми от платформы из-за появления тегов для мультимедийного и графического оформления.
К актуальной относится версия HTML 5-го поколения. Она появилась в декабре 2012 года и выросла до релиза 5.3. Именно это поколение языка разметки поддерживается большинством браузеров. При использовании устаревших версий вероятно искаженное отображение. Существует понятие кроссбраузерной несовместимости сайта, когда он по-разному выглядит на разных устройствах.
Изменения преимущественно касались внедрения новых функций. Например, появилась поддержка ввода типов данных – даты и времени, адреса электронной почты, домена сайта. Также в новые релизы включили дополнительные элементы вроде добавления видео и звука на веб-страницу, рисования в указанной области при помощи скрипта JavaScript.
Возможности HTML
Особенность языка разметки HTML заключается в преобразовании простых команд в визуальные объекты. Например, тег используется для отображения картинок. В перечне атрибутов есть обязательный – ссылка на файл. Изображение же обычно хранится на накопителе удаленного сервера, где располагается сам ресурс или внешний сервис.
Основные элементы HTML:
- Форматирование текста – выделение курсивом, жирным шрифтом, подчеркивание, размер кегля, нумерованные/маркированные списки.
- Текстовые блоки – заголовки уровней H1-H6, абзацы, перенос на новую строку.
- Таблицы – любое количество строк, столбцов, фиксированная высота, ширина, заголовки.
- Вставка объектов – изображения, звуковые, текстовые, видеофайлы и т.д.
- Гиперссылки – на файл изображения, прайс-листа, страницу, на которую ссылается пункт меню или анкор в тексте. Есть атрибуты открытия документа в текущем или новом окне.
Также есть простейшее понятие создания форм – ввод текстовой информации, выбор пункта списка. Более сложные объекты принято создавать на JavaScript или PHP, так как эти языки более функциональны. В рамках практического применения HTML интересен копирайтеру или контент-менеджеру при публикации контента.
Что не получится сделать на HTML
Несмотря на относительно обширный список возможностей по форматированию страниц, в HTML нет целого перечня функций. Например, теги позволяют оперировать стандартным шрифтом, а вот заменить его не получится. Компенсируют функционал подключением таблицы стилей CSS – это отдельный язык описания внешнего вида HTML-документов.
Стили компенсируют недостатки технологии:
- Заметно упрощают адаптивную верстку.
- Экономят время при оформлении страниц сайта.
- Расширяют стандартные возможности.
В итоге дизайн ресурса становится более интересным, скорость загрузки возрастает за счет меньшей нагрузки на сервер. Вместо дублирования кода на каждой странице при использовании HTML есть возможность вставлять небольшую ссылку на нужный участок кода. При изменении шаблона файл CSS остается неизменным, что упрощает редактирование сайта.
Сам по себе HTML работает довольно «топорно», требует дублирования команд на каждой странице. Это нерационально, например, при формировании общих элементов типа шапки, подвала, общего меню. Технология CSS позволила создавать фирменное оформление независимо от шаблона. Стоит подключить нужный участок кода, и страница преображается.
Интеграции других инструментов в HTML
Удобство языка разметки упростило интеграцию сторонних сервисов. Например, на сайт легко встроить системы аналитики Яндекс.Метрика и Google Analytics. То же относится и к функциональным блокам – форме захвата контактов, подписки на новости, заказу обратного звонка. Пользователи не замечают какой-либо разницы, они видят результат.
Наиболее востребованные интеграции:
- PHP. В тело HTML страницы включается ссылка на исполняемый файл.
- JavaScript. Скрипт вставляется целиком или в виде ссылки на файл.
- Ajax. Представляет собой «смесь» асинхронного JS и XML.
- Iframes. Технология встраивания в документ интерактивных элементов.
Такие возможности и приводят к мнению, что HTML – это язык программирования. Спецификация предполагает только управление отображением содержания сайта, а остальные функции зависят от подключаемых программных модулей. Изучается язык разметки буквально за пару дней, но приходится учитывать его ограничения.
Источник: timeweb.com
Что такое HTML (и почему это важно)
HTML — основа всего, что происходит внутри вашего браузера. Если вы знаете HTML, то можете сами создавать сайты, красиво оформлять статьи и документы в интернете и даже устроиться на работу веб-разработчиком. Давайте копнём.
Как это работает
HTML — это язык гипертекстовой разметки документов (HyperText Markup Language). По-русски: это набор команд, которые говорят нашим браузерам, как рисовать сайты. Например:
- Это элемент ненумерованного списка
- И ещё один
Слова внутри угловых скобок называются тегами: ,
и т. д. Теги говорят браузеру, как именно нужно отобразить тот или иной текст, где разместить картинку или какую сделать кнопку.
Сохраним наш фрагмент как текстовый файл и откроем его в браузере. Браузер прочитает каждый тег и покажет нам страницу уже без них, но будет помнить, что они означают. Браузеры на компьютерах и смартфонах понимают эти команды примерно одинаково, поэтому в большинстве браузеров страница тоже будет смотреться одинаково. Например, написанный выше код будет выглядеть как-то так:
Это заголовок
Это абзац текста с гиперссылкой.
- Это элемент ненумерованного списка
- И ещё один
В мире есть много подобных языков: текстовые редакторы Microsoft Word и Apple Pages тоже используют собственные языки разметки, чтобы сохранить информацию об оформлении документа. Даже когда вы в них пишете простой текст, эти редакторы добавляют в документ невидимую информацию о внешнем виде текста.
Зачем нужен HTML
HTML — главный язык в интернете, на котором написано большинство документов. Каждый абзац текста в интернете, скорее всего, завёрнут в теги
.
и каждая ссылка, на которую вы нажимали, точно была завёрнута в теги . . Короче: это язык, на котором написан весь интернет.
Если бы не было HTML, нам бы пришлось придумать какой-то другой формат для обмена документами в Сети, поэтому в любом случае мы бы получили тот же HTML.
— Но я не обмениваюсь документами!
Тут есть терминологическая тонкость. Каждый раз, когда вы ходите по интернету через Chrome, может показаться, что вы переходите с одной страницы на другую. Но на самом деле вы их скачиваете. Вот как это работает:
- Вы набираете yandex.ru в адресной строке браузера или печатаете прямо там свой поисковый запрос.
- Какие-то серверы, принадлежащие Яндексу, создают для вас новый документ — главную страницу yandex.ru или страницу с результатами поиска. Этот документ отправляется на ваш компьютер.
- Ваш браузер получает этот документ, он написан на языке HTML. Браузер читает все теги и инструкции и показывает результат на экране в виде пикселей. Вам может показаться, что это вы пришли в Яндекс, но на самом деле это Яндекс отправил вам документ с результатами поиска.
- Вы нажимаете на ссылку в этом документе, и ваш браузер запрашивает новый документ с другого сервера. В ответ вам снова приходит HTML-документ.
- Браузер открывает полученный документ в новой вкладке.
- Кажется, что вы перешли на новый сайт, но на самом деле вы скачали с этого сайта документ, который выглядит как страница.
По-простому, в интернете вы никуда не «ходите». Скорее вы скачиваете документы, которые для вас формируют серверы разных компаний. Эти документы написаны на HTML.
Зачем знать HTML
Если вы знаете основные HTML-теги, то вы можете:
- создавать свои и редактировать чужие страницы и целые сайты; настраивать готовые сайты и шаблоны;
- контролировать внешний вид своих материалов при их публикации на разных сайтах;
- стащить чей-то макет или фрагменты кода и использовать их в своих сайтах;
- обходить некоторые пейволы и блокировки доступа к закрытому контенту.
Основные теги
Вот основные теги, которые используются в HTML:
. — служебная область на странице, которая не показывается в браузере, но влияет на страницу в целом.
. — находится внутри . Текст, который написан внутри этого тега, отображается в названии вкладки и в закладках браузера.
. — видимая часть страницы. Всё, что вы видите, происходит внутри этих тегов.
.
,
.
и так далее — заголовки разного уровня.
. — гиперссылка. Свойство «href» отвечает за адрес ссылки.
— картинка. Свойство «src» отвечает за адрес, по которому лежит изображение, чтобы браузер мог запросить её оттуда, скачать и показать на экране.
- .
-
.
. — универсальный блок внутри страницы. Его можно настроить, чтобы содержимое выглядело и работало как угодно, от назойливой всплывашки до кнопки подтверждения.
. — с помощью этого тега можно менять внешний вид выбранного текста. Например, выделить его жёлтым, как маркером на бумаге.
| . | . |
— минимальный набор тегов, чтобы сделать таблицу. TR отвечает за строки в таблице (table row), а TD — за ячейки в этой строке (table division). Мы вкладываем один тег в другой: ячейки живут внутри строк, строки — внутри , и всё это живёт внутри тега
Ещё есть , который отвечает за первую строку таблицы (её называют головкой), но мы туда сейчас не полезем.
Нужно ли это учить?
В интернете полно информации про HTML, поэтому нет необходимости что-то заучивать специально. Но если вы будете регулярно что-то верстать в HTML, вы и сами всё выучите. Это как ходьба или езда на велосипеде.
Если подумать, то привычные веб-страницы в каком-то смысле умирают, и HTML медленно теряет свою актуальность. 20 лет назад веб-страницы были единственным способом разместить что-то в Сети, а для этого абсолютно точно нужно было знать HTML. Теперь у нас есть социальные сети и платформы для публикаций, которые не требуют знания HTML. А у тех платформ, которые требуют, есть WYSIWYG-редакторы — они сразу позволяют форматировать текст как в Microsoft Word. Поэтому в будущем может появиться поколение интернет-пользователей, которые ни разу в жизни не столкнутся с HTML-кодом в своих проектах.
С другой стороны, HTML очень легко выучить и начать использовать, а польза от него огромная и прямо сейчас. В будущем, может быть, исчезнут велосипеды, но кататься прямо сегодня никто не запрещает.
Скоро всё покажем!
Веб-разработка — это новый чёрный
На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.
Источник: thecode.media