HTML: описание, характеристика, примеры

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

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

Краткое описание

HTML (или HyperText Markup Language – «язык гипертекстовой разметки») – это стандартизированный язык программирования. Он представляет собой гипертекстовую разметку, при обработке которой на экране будут отображаться веб-страницы. HTML-документ будет получен браузером от сервера по протоколам HTTP/HTTPS или открыт прямо с локального диска. Далее программное обеспечение интерпретирует код в интерфейс для дальнейшего отображения на устройстве.

Соответствующий формат используется для создания:

• веб-страниц;
• интернет-магазинов;
• приложений для смартфонов и планшетов (Android, iOS, WindowsMobile);
• некоторых десктопных программ.

Язык гипертекста хорошо совместим с языком стилей CSS. С его помощью можно придать странице или веб-приложению более интересный и проработанный вид.

Структура документа

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

Основа кода – это HTML-документ. В нем имеются базовые элементы, которые состоят из тегов. Эти теги и служебные данные необходимы браузерам для того, чтобы корректно отображать имеющиеся сведения на экране.

В структуру HTML-документа входят следующие элементы:

• doctype;
• тег html;
• head;
• meta;
• заголовок страницы (title);
• тело документа (body).

Файл гипертекстовой разметки состоит из тегов. Они бывают нескольких видов и используется для формирования исходного кода HTML. Далее соответствующие компоненты будут изучены более подробно.

Doctype

Первой строкой в любом файле, написанном на HTML, будет doctype html. Этот элемент не относится к тегам. Он не отображается на веб-странице, но понимается браузером.

Doctype используется для того, чтобы указать браузеру, какой стандарт языка разметки используется в исходном коде. Сейчас повсеместно используется HTML5. Выше – пример записи соответствующего элемента.

HTML

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

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

Примеры сокращений и значений для Lang: английский – en, русский – ru.

Head

Еще один парный тег. Используется для хранения служебных данных. Здесь допускаются самые разные сочетания тегов, демонстрирующие браузерам:

• название страницы;
• описание;
• ключевые слова;
• иные метаданные.

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

Meta

Элемент, который нужен для обозначения метаданных. Он принимает множество разных атрибутов. Сейчас значимость имеет метатег meta с атрибутом charset. Он отвечает за кодировку всего HTML-документа. Каждый символ в ней обладает уникальным кодом, благодаря чему программы, включая браузеры, смогут одинаково отображать один и тот же текст.

Универсальной кодировкой, используемой при веб-разработке, является UTF-8. Именно ее рекомендуется указывать в качестве значения атрибута charset. Выше – наглядный пример написания тега.

Title

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

Выше – наглядный пример реализации в HTML-документе.

Body

Тело задается при помощи еще одного парного тега – body. В нем размещается основная информация, выводимая на странице.

Браузер будет обрабатывать все, что написано в body для дальнейшего отображения на сайте. Другого предназначения этот элемент не имеет.

Теги и их виды

Структура HTML-страницы уже понятна. Она базируется на тегах. Это простейшие компоненты, которые формируют элементы кода. Каждый тег начинается с символа «<» и заканчивается «>». Все теги делятся на два вида – одиночные и парные.

Парный тег включает в себя:

• открывающий тег (< >);
• закрывающий тег (</ >).

Если у закрывающего тега не поставить символ «/», он не будет обработан системой должным образом. Вот пример кода с парным тегом:

Здесь определяется элемент div. Он имеет открывающий тег < div > и закрывающий тег < / div >. Между ними располагается содержимое указанного компонента. В приведенном примере им выступает простой текст.

Парные теги нужны для оформления некоторого участка текста HTML-страницы. С их помощью задается начало и конец «фрагмента».

Атрибуты

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

Здесь определяется элемент div. Он поддерживает атрибут style. После знака равенства в кавычках указывается значение используемого параметра. В приведенном примере «color : red» указывает на то, что цвет текста будет красным.

Атрибуты могут быть:

1. Глобальными (или общими). Они задаются для всех элементов HTML-страницы.
2. Специфическими. Применяются к определенным элементам страницы.

Ниже можно увидеть пример специфического атрибута:

Элемент HTML input включает всего один tag, но имеет два атрибута:

• type – указывающий на тип элемента;
• value – определяющий текст кнопки.

Помимо обычных атрибутов HTML язык поддерживает булевые (логические) параметры. Они не могут иметь никаких значений. Пример – у кнопки задается характеристика disabled:

С ее помощью разработчики указывают, что элемент отключен на HTML-странице. Программисты могут сами определять разнообразные атрибуты при помощи префикса «data-».

Состав элемента страницы

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

Весь HTML-код состоит из соответствующих составляющих, а они включают в себя несколько частей:

1. Открывающий тег (opening tag). Включает в себя имя компонента, заключенного в угловые скобки. Указывает на начало действия.
2. Закрывающий тег (closing tag). То же самое, что и предыдущий компонент, но в своем составе имеет «/» внутри угловых скобок. Используется для указания конца элемента в HTML файле.
3. Контент (Content). В приведенном ниже примере – это просто текст.

Элементы HTML могут быть вложенными. В этом случае необходимо тщательно следить за opening и closing tags.

Работа с текстом

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

Параграфы

Параграф задается при помощи p (парный tag). Внутри этого HTML компонента указывается то или иное содержимое. Каждый новый параграф должен быть написан на новой строчке.

Для переноса текста на другую строчку в рамках одного и того же параграфа в языке HTML используется br. Выравнивание текста осуществляется через атрибут align. Он определяет способ выравнивания:

• left – по левому краю (устанавливается по умолчанию);
• right – по правому краю;
• center – по центру;
• justify – по ширине.

Последний вариант работает только для текста, длина которого в HTML составляет более одной строки. Для вывода предварительно отформатированного текста в HTML-документе используется компонент pre.

Обтекание

Span обтекает текст по всей длине. Используется для стилизации заключенного в него текстового содержимого. Не умеет переносить данные на следующую строку.

Блоки

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

Элемент, идущий после div, будет перенесен на новую строчку.

Заголовки

В HTML-языке компоненты h1. H2, h3, h4, h5, h6 используются для создания заголовков различного уровня. Они выделяют шрифт жирным по умолчанию. Имеют определенный размер.

У заголовков первого уровня он самый большой, у h6 – самый маленький. При определении этих компонентов нужно учитывать, что на странице должен быть всего один h1. Он является главным для всего сайта.

Теги форматирования

HTML является продвинутым средством веб-разработки. У него есть составляющие, которые используются для форматирования текста:

• b – выделение жирным;
• del – зачеркивание текста;
• i – выделение курсивом;
• em – выделение курсивом логического значения (используется для придания тексту оттенка важности);
• s – зачеркивание;
• small – уменьшение текста;
• strong – выделение жирным логического значения;
• sub – размещение под строкой;
• u – подчеркивание;
• sup – помещение текстовых данных над строкой;
• ins – определение вставленного или добавленного текста;
• mark – выделение цветом.

HTML – основа веб-разработки. Его ключевые составляющие и структура были изучены. Лучше разобраться в формате HTML помогут дистанционные компьютерные курсы. На них языку гипертекста научат с нуля в срок до года.

Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus. В частности, вас может заинтересовать курс, посвященный FullStack-разработке, первой ступенью которого является изучение HTML/CSS.