HTML
HTML (HyperText Markup Language — «язык гипертекстовой разметки») — самый базовый строительный блок Веба. Он определяет содержание и структуру веб-контента. Другие технологии, помимо HTML, обычно используются для описания внешнего вида/представления (CSS) или функциональности/поведения (JavaScript) веб-страницы.
Под гипертекстом («hypertext») понимаются ссылки, которые соединяют веб-страницы друг с другом либо в пределах одного веб-сайта, либо между веб-сайтами. Ссылки являются фундаментальным аспектом Веба. Загружая контент в Интернет и связывая его со страницами, созданными другими людьми, вы становитесь активным участником Всемирной паутины.
HTML использует разметку («markup») для отображения текста, изображений и другого контента в веб-браузере. HTML-разметка включает в себя специальные «элементы», такие как , , , , , , , , , , , , , , , , , , , , и многие другие.
HTML-элемент выделяется из прочего текста в документе с помощью «тегов», которые состоят из имени элемента окружённого » < " и " >«. Имя элемента внутри тега не чувствительно к регистру. То есть, оно может быть написано в верхнем или нижнем регистре, или смешано. Например, тег может быть записан как , , или любым другим способом.
Статьи, представленные ниже, могут помочь вам больше узнать о HTML.
- Введение в HTML Если вы новичок в веб-разработке, обязательно прочитайте нашу статью «Основы HTML», чтобы узнать, что такое HTML и как его использовать.
- Руководства по HTML Статьи о том, как использовать HTML, а также обучающие материалы и исчерпывающие примеры можно найти в разделе «Пространство изучения HTML».
- Справка по HTML В нашем обширном разделе «Справка по HTML» вы найдёте подробности о каждом элементе и атрибуте в HTML.
Руководства для начинающих
Наше Пространство изучения HTML содержит множество модулей, которые обучают HTML с нуля — начальные знания не требуются.
Этот модуль закладывает основу, знакомя вас с важными понятиями и синтаксисом, такими как применение HTML к тексту, создание гиперссылок и использование HTML для построения веб-страницы.
В этом модуле рассматривается, как использовать HTML для добавления мультимедиа на ваши веб-страницы, включая различные способы вставки изображений, а также для встраивания видео, аудио, и даже других веб-страниц целиком.
Представление табличных данных на веб-странице в понятной, доступной форме может быть проблемой. Этот модуль охватывает базовую разметку таблиц, а также более сложные особенности, такие как добавление заголовков и описаний.
Формы являются очень важной частью Веба — они предоставляют большую часть функциональности, необходимого для взаимодействия с веб-сайтами, например регистрация и вход в систему, отправка отзывов, покупка товаров, и многое другое. Этот модуль познакомит вас с созданием клиентских (client-side/front-end) частей форм.
Содержит ссылки на разделы, объясняющие как использовать HTML для решения самых распространённых задач при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение контента, создание простой формы и т.д.
Продвинутые темы
Атрибут crossorigin в сочетании с соответствующим заголовком CORS, позволяет загружать изображения, определённые элементом , из внешних источников и использовать в элементе , как если бы они были загружены из текущего источника.
DOM-Атрибут activeElement и DOM-метод hasFocus() помогают отслеживать и контролировать взаимодействие пользователя с элементами на веб-странице.
Справочники
HTML состоит из элементов, каждый из которых может быть изменён некоторым количеством атрибутов. HTML-документы связаны между собой ссылками.
У элементов в HTML есть атрибуты. Это дополнительные величины, которые настраивают элементы или управляют их поведением различными способами.
Глобальные атрибуты могут быть указаны для всех элементов HTML, даже тех, которые не указаны в стандарте. Это означает, что любые нестандартные элементы обязаны по-прежнему разрешать эти атрибуты, даже если эти элементы делают документ несовместимым с HTML5.
Элементы HTML являются обычно «строчными» или «блочными». Строчный элемент занимает только пространство, ограниченное тегами, которые его определяют. Блочный элемент занимает все пространство своего родительского элемента (контейнера), тем самым создавая «блок».
В HTML различные типы ссылок могут использоваться для установления и определения связи между двумя документами. Элементы-ссылки, типы которых могут быть заданы, включают в себя , и .
HTML состоит из нескольких видов контента, каждый из которых разрешено использовать в определённых контекстах и запрещено в других. Так же, у каждого есть набор других категорий контента, которые они могут содержать, и элементы, которые могут или не могут использоваться в них. Это руководство по таким категориям.
Историческая справка по режиму совместимости и стандартному режиму.
Похожие темы
В этой статье описывается большинство способов использования CSS для добавления цвета к HTML-контенту, а также перечисляется, какие части документов HTML могут быть окрашены, и какие свойства CSS при этом используются. Включает примеры, ссылки на инструменты для создания палитры и многое другое.
Found a content problem with this page?
This page was last modified on 17 июл. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Обзор языка разметки HTML для новичков
С аббревиатурой HTML сталкиваются специалисты, которым по роду деятельности приходится делать сайты, наполнять их контентом и продвигать в поисковых системах. Копирайтеры используют этот язык для форматирования текстов и таблиц, а SEO-специалисты с его помощью подключают виджеты и системы аналитики.
Что представляет собой HTML
Формально HTML (Hypertext Markup Language) считается языком разметки веб-страниц. Результат интерпретируется браузером, и пользователь видит текст на экране компьютера или смартфона в заданном разработчиком виде. Первые сайты создавались практически на «чистом» коде HTML при незначительном включении скриптов на JavaScript.
Базовое знание HTML требуется для большинства вакансий, касающихся работы с сайтами, их наполнением и продвижением.
История развития HTML
Точной даты создания языка HTML нет, его появление соотносится с периодом между 1986 и 1991 годами. Он изначально создавался для использования людьми без специальных знаний в верстке и программировании. Сложная система разметки SGML (Standard Generalized Markup Language) была сведена к небольшому набору дескрипторов. Они чаще называются тегами.
- Изначально перечень команд оформления текстов включал всего 18 элементов, 11 из которых используются даже в последних релизах.
- Основная задача языка заключалась в воспроизведении контента без искажений независимо от технического оснащения устройства.
- Современные версии HTML стали более зависимыми от платформы из-за появления тегов для мультимедийного и графического оформления.
К актуальной относится версия HTML 5-го поколения. Она появилась в декабре 2012 года и выросла до релиза 5.3. Именно это поколение языка разметки поддерживается большинством браузеров. При использовании устаревших версий вероятно искаженное отображение. Существует понятие кроссбраузерной несовместимости сайта, когда он по-разному выглядит на разных устройствах.
Изменения преимущественно касались внедрения новых функций. Например, появилась поддержка ввода типов данных – даты и времени, адреса электронной почты, домена сайта. Также в новые релизы включили дополнительные элементы вроде добавления видео и звука на веб-страницу, рисования в указанной области при помощи скрипта JavaScript.
Возможности 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 – это язык программирования. Спецификация предполагает только управление отображением содержания сайта, а остальные функции зависят от подключаемых программных модулей. Изучается язык разметки буквально за пару дней, но приходится учитывать его ограничения.