Что такое хтмл: Что такое HTML и зачем он нужен каждому веб-разработчику / Skillbox Media

Нашли ошибку в тексте? Напишите нам.

Что такое HTML и зачем он нужен

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

Что представляет собой HTML

Формально HTML (Hypertext Markup Language) считается языком разметки веб-страниц. Результат интерпретируется браузером, и пользователь видит текст на экране компьютера или смартфона в заданном разработчиком виде. Первые сайты создавались практически на «чистом» коде HTML при незначительном включении скриптов на JavaScript.

Базовое знание HTML требуется для большинства вакансий, касающихся работы с сайтами, их наполнением и продвижением.

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

История развития HTML

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

Особенности HTML:

1. Изначально перечень команд оформления текстов включал всего 18 элементов, 11 из которых используются даже в последних релизах.
2. Основная задача языка заключалась в воспроизведении контента без искажений независимо от технического оснащения устройства.
3. Современные версии HTML стали более зависимыми от платформы из-за появления тегов для мультимедийного и графического оформления.

К актуальной относится версия HTML 5-го поколения. Она появилась в декабре 2012 года и выросла до релиза 5.3. Именно это поколение языка разметки поддерживается большинством браузеров. При использовании устаревших версий вероятно искаженное отображение. Существует понятие кроссбраузерной несовместимости сайта, когда он по-разному выглядит на разных устройствах.

Изменения преимущественно касались внедрения новых функций. Например, появилась поддержка ввода типов данных – даты и времени, адреса электронной почты, домена сайта. Также в новые релизы включили дополнительные элементы вроде добавления видео и звука на веб-страницу, рисования в указанной области при помощи скрипта JavaScript.

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

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

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

1. Форматирование текста – выделение курсивом, жирным шрифтом, подчеркивание, размер кегля, нумерованные/маркированные списки.
2. Текстовые блоки – заголовки уровней h2-H6, абзацы, перенос на новую строку.
3. Таблицы – любое количество строк, столбцов, фиксированная высота, ширина, заголовки.
4. Вставка объектов – изображения, звуковые, текстовые, видеофайлы и т.д.
5. Гиперссылки – на файл изображения, прайс-листа, страницу, на которую ссылается пункт меню или анкор в тексте. Есть атрибуты открытия документа в текущем или новом окне.

Также есть простейшее понятие создания форм – ввод текстовой информации, выбор пункта списка. Более сложные объекты принято создавать на JavaScript или PHP, так как эти языки более функциональны. В рамках практического применения HTML интересен копирайтеру или контент-менеджеру при публикации контента.

Что не получится сделать на HTML

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

Стили компенсируют недостатки технологии:

1. Заметно упрощают адаптивную верстку.
2. Экономят время при оформлении страниц сайта.
3. Расширяют стандартные возможности.

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

Сам по себе HTML работает довольно «топорно», требует дублирования команд на каждой странице. Это нерационально, например, при формировании общих элементов типа шапки, подвала, общего меню. Технология CSS позволила создавать фирменное оформление независимо от шаблона.

Интеграции других инструментов в HTML

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

Наиболее востребованные интеграции:

1. PHP. В тело HTML страницы включается ссылка на исполняемый файл.
2. JavaScript. Скрипт вставляется целиком или в виде ссылки на файл.
3. Ajax. Представляет собой «смесь» асинхронного JS и XML.
4. Iframes. Технология встраивания в документ интерактивных элементов.

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

Что такое HTML? (коротко о главном)

Источник изображения

Нужно ли маркетологу знать язык разметки гипертекста (HyperText Markup Language), то есть HTML? На этом языке говорят между собой верстальщики, и кроме браузеров в некоторой мере его могут понимать другие программисты и разработчики. И хотя на уровень продаж знание HTML прямо, наверное, и не влияет, все же способность ориентироваться в основах этого языка не будет лишней даже для маркетолога.

И первое, что необходимо сделать, это отбросить скептицизм, связанный с мыслью, что осилить даже основы HTML вам не под силу — не переживайте, подобные сомнения роятся в головах довольно многих людей. И хотя, возможно, вам и не придется постоянно пересекаться с данными вопросами в рамках ваших должностных обязанностей или работы в LPgenerator, однако предлагаем все же ознакомиться с базовыми принципами этого языка. По крайней мере, вы сможете не только подружится с HTML, но и стать ближе к тем людям в вашей компании/команде, для которых этот язык является родным 🙂

• Каким полушарием думают маркетологи?

Что представляет собой HTML?

Как уже упоминалось, HTML — это язык гипертекстовой разметки, с помощью которого наши коллеги верстальщики непосредственно создают структуру web-страниц (одной из разновидностей которых являются лендинги) и email-писем.

Если объяснить суть данного понятия простыми и наглядными образами, то можно сказать, что HTML — это тело, а CSS (Cascading Style Sheets — каскадные таблицы стилей) — одежда. В то время как CSS определяет внешний вид web-страницы, HTML формирует ее структуру (скелет) посредством заголовков, списков и других подобных элементов, начиная от начала страницы — хедера, и до ее конца — футера.

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

• Анатомия идеальной целевой страницы

Основные функциональные понятия HTML

Как показано на примере HTML-кода, помещенного ниже, он всегда начинается с <!DOCTYPE html>. Для браузера появление этого элемента указывает на то, что ему следует отображать HTML-структуру:

<!DOCTYPE html>

<html>

<body>

<h2>Тут будет размещен заголовок</h2>

<p>А в этом месте будет первый абзац</p>

</body>

</html>

Представленный небольшой вариант простого HTML-кода, содержит несколько элементов, состоящих, в свою очередь, из таких тэгов как:

• <body></body> — открывающий и закрывающий тэг, указывающий на начало и окончание той части страницы, в которой будет содержаться ее контент. На русский язык этот тэг переводится словом «тело»;
• <h2></h2> — опять таки открывающий и закрывающий тэг, указывающий на начало и окончание заголовка. Всего таких тегов может быть 6, и отличаются они величиной шрифта — чем выше числовой порядок заголовка, тем меньшими буквами он будет отражаться. Вместе с тегом <p>, <h2> формирует структуру самого контента: в частности метки <p></p> определяют начало и конец абзацев текста.

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

Для закрепления только что полученного навыка можно дописать еще несколько строчек кода. До этого мы оперировали в рамках «тела» контента, за которое отвечает тэг <body>, но пока это самое тело у нас без «головы». Исправить это досадное недоразумение можно добавив следующие строки:

<!DOCTYPE html>

<html>

<head>

  <title>

  Тут будет название всей страницы

  </title>

</head>

<body>

<h2>Тут будет заголовок, написанный самым большим шрифтом</h2>

<p>А это — усовершенствованный, частично <strong>выделенный жирным шрифтом</strong>абзац. </p>

<h4>Тут будет тоже заголовок, но не такой заметный, как предыдущий — он будет выполнен более мелким шрифтом</h4>

<p>Еще один абзац для полноты картины.</p>

</body>

</html>

По сути, приведенный выше второй фрагмент HTML кода — это расширенный вариант первого:

• появилось титульное название страницы, которое помещено между тэгами <title></title>, которые, в свою очередь формируют заглавную, а не контентную частью страницы, так как они размещены внутри тега <head></head>, а не <body></body>;
• появился еще один заголовок более низкого порядка (он будет менее заметен), который будет размещен в рамках <h4></h4>;
• преобразится часть текста в первом по порядку абзаце: фраза, заключенная в тэг <strong></strong> (на русский язык переводится «сильный»), будет выделена жирным.

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

Не так страшен HTML, как его рисуют, верно?

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

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

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

Если же все-таки у вас нет желания или времени — все мы люди занятые — вникать в HTML, всегда остается возможность использовать функционал LPgenerator для создания качественной целевой страницы.

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

Высоких вам конверсий!

Игорь Кизин,

руководитель отдела дизайна LPgenerator

По материалам: blog. hubspot.com

21-10-2013

Что такое HTML? Основы языка разметки гипертекста

HTML

Окт 11, 2021

Anna

5хв. читання

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

HTML не является языком программирования, то есть он не имеет возможности создавать динамические функции. Вместо этого он позволяет организовывать и форматировать документы, аналогично Microsoft Word.

При работе с HTML мы используем простые структуры кода (теги и атрибуты), чтобы разметить страницу веб-сайта. Например, мы можем создать абзац, поместив прилагаемый текст в исходный тег <p> и закрывающий </p>.

<p> Вот как вы добавляете абзац в HTML. </p>
<br><p> У вас может быть более одного! </p></br>

В целом, HTML — это язык разметки, который очень прост в освоении даже для начинающих в создании сайтов. Вот что вы узнаете, прочитав эту статью.

Нужен недорогой, но надёжный хостинг для учебного или небольшого коммерческого проекта? Ознакомьтесь с тарифами общего хостинга. Скидки до 85%!

Оглавление

История HTML

HTML был изобретён Тимом Бернерсом-Ли, физиком из исследовательского института ЦЕРН в Швейцарии. Он придумал идею интернет-гипертекстовой системы.

Hypertext означает текст, содержащий ссылки на другие тексты, которые зрители могут получить немедленно. Он опубликовал первую версию HTML в 1991 году, состоящую из 18 тегов HTML. С тех пор каждая новая версия языка HTML появилась с разметкой новых тегов и атрибутов (модификаторов тегов).

Согласно Справочнику HTML Element Reference от Mozilla Developer Network, в настоящее время существует 140 тегов HTML, хотя некоторые из них уже устарели (не поддерживаются современными браузерами).

Из-за быстрого роста популярности HTML теперь считается официальным веб-стандартом. Спецификации HTML поддерживаются и разрабатываются консорциумом World Wide Web (W3C). Вы можете проверить последнее состояние языка в любое время на веб-сайте W3C (англ).

Самым большим обновлением языка стало внедрение HTML5 в 2014 году. Было добавлено несколько новых семантических тегов к разметке, которые показывают смысл их собственного контента, например <article>, <header> и <footer>.

Как работает HTML?

HTML-документы — это файлы, которые заканчиваются расширением .html или .htm. Вы можете просматривать его с помощью любого веб-браузера (например, Google Chrome, Safari или Mozilla Firefox). Браузер читает HTML-файл и отображает его содержимое, чтобы пользователи интернета могли его просматривать.

Обычно средний веб-сайт включает несколько разных HTML-страниц (англ). Например: домашние страницы, обычные страницы, страницы контактов будут иметь отдельные HTML-документы.

Каждая HTML-страница состоит из набора тегов (также называемых элементами), которые вы можете назвать строительными блоками веб-страниц. Они создают иерархию, которая структурирует контент по разделам, параграфам, заголовкам и другим блокам контента.

Большинство элементов HTML имеют открытие и закрытие, в которых используется синтаксис <tag> </tag>.

Ниже вы можете увидеть пример кода, с помощью которого можно структурировать элементы HTML:

<div>
    <h2> Основная рубрика </h2>
    <h3> Броский подзаголовок </h3>
    <p> Пункт 1 </p>
    <img src = "/" alt = "Изображение">
    <p> Пункт второй с гиперссылкой <a href="https://example.com"> </a> </p>
</div>

• Самый главный элемент — это простое разделение (<div> </div>), которое вы можете использовать для разметки больших разделов контента.
• Он содержит заголовок (<h2> </h2>), подзаголовок (<h3> </h3>), два абзаца (<p> </p>) и изображение (<img>).
• Второй абзац содержит ссылку (<a> </a>) с атрибутом href, который содержит целевой URL.
• Тег изображения также имеет два атрибута: src для пути изображения и alt для описания изображения.

Обзор наиболее используемых HTML-тегов

HTML-теги имеют два основных типа: блок-уровень и встроенные теги.

1. Элементы уровня блока занимают всё свободное пространство и всегда запускают новую строку в документе. Заголовки и параграфы — отличный пример блочных тегов.
2. Встроенные элементы занимают столько места, сколько им нужно, и не запускают новую строку на странице. Они обычно служат для форматирования внутреннего содержимого элементов уровня блока. Ссылки и подчеркнутые строки — хорошие примеры встроенных тегов.

Теги блочного уровня

Три тега уровня блока, которые каждый HTML-документ должен содержать: <html>, <head> и <body>.

1. Тег <html> </html> — это элемент самого высокого уровня, который охватывает каждую HTML-страницу.
2. Тег <head> </head> содержит метаинформацию, такую ​​как заголовок страницы и кодировка.
3. Наконец, тег <body> </body> содержит всё содержимое, отображаемое на странице.

 <html>
    <head>
      <!-- META INFORMATION -->
    </head>
    <body>
      <!-- PAGE CONTENT -->
    </body>
 </html>

• Заголовки имеют 6 уровней в HTML. Они варьируются от <h2> </h2> до <h6> </h6>, где h2 — заголовок наивысшего уровня, а h6 — самый низкий. Абзацы прилагаются <p> </p>, в то время как в блочных комментариях используется тег <blockquote> </blockquote>.
• Разделы — это более крупные секции контента, которые обычно содержат несколько абзацев, изображений, иногда блок-записей и других меньших элементов. Мы можем пометить их, используя тег <div> </div>. Элемент div может содержать ещё один тег div внутри него.
• Вы можете также использовать теги <ol> </ol> для упорядоченных списков и <ul> </ul> для неупорядоченных. Отдельные элементы списка должны быть заключены в тег <li> </li>. Например, вот как выглядит основной неупорядоченный список в HTML:

 <ul>
    <li>Элемент списка 1</li>
    <li>Элемент списка 2</li>
    <li>Элемент списка 3</li>
 </ul>

Встроенные теги

Для форматирования текста используются многие встроенные теги. Например, тег <strong> </strong> визуализирует выделенный элемент жирным шрифтом, тогда как теги <em> </em> отображают его курсивом.

Гиперссылки также являются встроенными элементами, для которых требуются теги <a> </a> и атрибуты href для указания адресата ссылки:

<a href="https://example.com/">Нажми сюда!</a>

Изображения также являются встроенными элементами. Вы можете добавить один с помощью <img> без закрывающего тега. Но вам также нужно будет использовать атрибут src для указания пути изображения, например:

<img src="/images/example.jpg" alt="Пример изображения">

Если вы хотите узнать больше тегов HTML, попробуйте проверить наш полный HTML-лист (англ) (который также доступен для загрузки).

Эволюция HTML. Что отличает HTML и HTML5?

Начиная с первых дней, HTML прошёл невероятную эволюцию. W3C постоянно публикует новые версии и обновления, в то время как исторические вехи также получают выделенные имена.

HTML4 (в наши дни обычно называемый «HTML») был опубликован в 1999 году, а последняя крупная версия вышла в 2014 году. HTML5 — это обновление, которое ввело множество новых функций для языка.

Одной из наиболее ожидаемых особенностей HTML5 является поддержка встраивания аудио и видео. Вместо использования Flash-плеера мы можем просто вставлять видео и аудио-файлы на наши веб-страницы с помощью новых тегов <audio> </audio> и <video> </video>. Он также включает встроенную поддержку масштабируемой векторной графики (SVG) и MathML для математических и научных формул.

HTML5 также ввёл несколько семантических улучшений. Новые семантические теги информируют браузеры о значении контента, что приносит пользу как читателям, так и поисковым системам.

Наиболее популярными семантическими тегами являются <article> </article>, <section> </section>, <aside> </aside>, <header> </header> и <footer> </footer>. Чтобы найти уникальные отличия, попробуйте проверить наше подробное сравнение HTML и HTML5.

Плюсы и минусы HTML

Как и большинство вещей, HTML имеет как сильные стороны так и слабые.

Плюсы:

• Широко используемый язык с большим количеством ресурсов и огромным сообществом.
• Выполняется изначально в каждом веб-браузере.
• Поставляется с плоской кривой обучения.
• В открытом доступе и совершенно бесплатный.
• Чистая и последовательная разметка.
• Официальные веб-стандарты поддерживаются консорциумом World Wide Web (W3C).
• Легко интегрируется с базовыми языками, такими как PHP и Node.js.

Минусы:

• В основном используется для статических веб-страниц. Для динамической функциональности вам может потребоваться использовать JavaScript или бэкэнд-язык, такой как PHP.
• Это не позволяет пользователю реализовать логику. В результате все веб-страницы нужно создавать отдельно, даже если они используют одни и те же элементы, например. заголовки и колонтитулы.
• Некоторые браузеры принимают новые функции медленно.
• Иногда поведение браузера трудно предсказать (например, старые браузеры не всегда создают новые теги).

Как связаны HTML, CSS и JavaScript?

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

Однако HTML отлично работает с двумя другими интерфейсами: CSS (каскадные таблицы стилей) и JavaScript. Вместе они могут обеспечить богатый пользовательский интерфейс и реализовать расширенные функции.

• CSS отвечает за стили, такие как фон, цвета, макеты, интервал и анимация.
• JavaScript позволяет добавлять динамические функции, такие как ползунки, всплывающие окна и фотогалереи.

Подумайте об HTML как о человеке, тогда CSS будет его одеждой а JavaScript — движениями и манерами.

Итак … Что такое HTML?

HTML является основным языком разметки в интернете. Он запускается изначально в каждом браузере и поддерживается консорциумом World Wide Web.

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

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

Більше статей від Anna

ХТМЛ | это… Что такое ХТМЛ?

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или браузером и отображается в виде документа, в удобной для человека форме.

HTML является приложением ISO 8879.

Общее представление

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991—1992 годах в стенах в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности семантических элементов (размечаемых «тегами»), служащих для создания относительно простых, но красиво оформленных документов. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже. Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE>, несколько раз использованный для форматирования страницы, которую вы сейчас читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы. С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.

Браузеры

Текстовые документы, содержащие код на языке HTML (такие документы традиционно имеют расширение «html» или «htm»), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые браузерами или интернет-обозревателями, обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Internet Explorer, Firefox, Google Chrome и

Версии

• RFC 1866 — HTML 2.0, одобренный как стандарт 22 сентября 1995;
• HTML 3.2 — 14 января 1997;
• HTML 4.0 — 18 декабря 1997;
• HTML 4.01 (изменения, причём более значительные, чем кажется на первый взгляд) — 24 декабря 1999;
• ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4. 01 Strict) — 15 мая 2000.
• HTML 5 — в разработке.

Официальной спецификации HTML 1.0 не существует. До 1995 года существовало множество неофициальных стандартов HTML. Чтобы стандартная версия отличалась от них, ей сразу присвоили второй номер.

Версия 3 была предложена Консорциумом Всемирной паутины (W3C) в марте 1995 года и обеспечивала много новых возможностей, таких как создание таблиц, «обтекание» изображений текстом и отображение сложных математических формул. Даже при том, что этот стандарт был совместим со второй версией, реализация его была сложна для браузеров того времени. Версия 3.1 официально никогда не предлагалась, и следующей версией стандарта HTML стала 3.2, в которой были опущены многие нововведения версии 3.0, но добавлены нестандартные элементы, поддерживаемые браузерами «Mosaic».

HTML версии 4.0 содержит много элементов, специфичных для отдельных браузеров, но в то же время произошла некоторая «очистка» стандарта. Многие элементы были отмечены как устаревшие и нерекомендованные (англ. deprecated). В частности, элемент font, используемый для изменения свойств шрифта, был помечен как устаревший (вместо него рекомендуется использовать таблицы стилей CSS).

Начиная с 2004 года, сообществом WHATWG, ведётся разработка HTML версии 5.

Перспективы

Сейчас Консорциум Всемирной паутины (W3C) разрабатывает HTML версии 5. Черновой вариант спецификации языка появился в Интернете 20 ноября 2007. Параллельно ведётся работа по дальнейшему развитию HTML под названием англ. Extensible Hypertext Markup Language — «расширяемый язык разметки гипертекста»). Пока XHTML по своим возможностям сопоставим с HTML, однако предъявляет более строгие требования к синтаксису. Как и HTML, XHTML является подмножеством языка XML. Вариант XHTML 1.0 был одобрен в качестве Рекомендации Консорциума Всемирной паутины (W3C) 26 января 2000 года.

Планируемая спецификация XHTML 2.0 разрывает совместимость со старыми версиями HTML и XHTML, что не очень устраивает некоторых веб-разработчиков и производителей браузеров. Группой англ. Web Hypertext Application Technology Working Group) разрабатывается спецификация Web Applications 1.0, часто неофициально называемая «HTML 5», которая расширяет HTML (впрочем, имея и совместимый с XHTML 1.0 XML-синтаксис) для лучшего представления семантики различных типичных страниц, например форумов, сайтов аукционов, поисковых систем, онлайн-магазинов и т. д., которые не очень удачно вписываются в модель XHTML 2.

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

HTML — это теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:

• <strong>Текст между двумя тегами — открывающим и закрывающим.</strong>
• <a href="http://www.example.com">Здесь элемент содержит атрибут href.</a>
• А вот пример пустого элемента: <br>

Регистр, в котором набрано имя элемента и имена атрибутов, в HTML значения не имеет (в отличие от

<b>
  Этот текст будет жирным,
  <i>а этот - ещё и курсивным</i>
</b>

даст такой результат:

Этот текст будет жирным, а этот - ещё и курсивным

Кроме элементов, в HTML-документах есть и сущности (англ. entities) — «специальные символы». Сущности начинаются с символа амперсанда и имеют вид &имя; или &#NNNN;, где NNNN — код символа в Юникоде в десятеричной системе счисления.

Например, © — знак авторского права (©). Как правило, сущности используются для представления символов, отсутствующих в кодировке документа, или же для представления «специальных» символов: & — амперсанда (&), < — символа «меньше» (<) и > — символа «больше» (>), которые некорректно записывать «обычным» образом, из-за их особого значения в HTML.

Список основных тегов и специальных символов приведён в статье Элементы HTML. Более обширный список специальных символов приведён в статье Википедия:Специальные символы.

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE…>, которая обычно выглядит примерно так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

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

Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги заголовка (<head></head>) и тела (<body></body>) документа.

Варианты DOCTYPE для HTML 4.01

• Строгий (Strict): не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

• Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

• С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">

Браузерные войны

В середине 1990-х годов возникло следующее явление. Основные производители браузеров — компании Microsoft — начали внедрять собственные наборы элементов в HTML-разметку. Создалась путаница из различных конструкций для работы во Всемирной паутине, доступных для просмотра то в одном, то в другом браузере. Особенно большие трудности были при создании кросс-браузерных программ на языке Веб-мастерам приходилось создавать несколько вариантов страниц или прибегать к другим ухищрениям. На какое-то время проблема потеряла актуальность по двум причинам:

• Из-за вытеснения браузером Microsoft Internet Explorer всех остальных браузеров. Соответственно, проблема веб-мастеров становилась проблемой пользователей альтернативных браузеров.
• Благодаря усилиям производителей других браузеров, которые либо следовали стандартам W3C (как Mozilla и Internet Explorer.

На современном этапе можно констатировать рост популярности браузеров, следующих рекомендациям W3C (это Mozilla Firefox и другие браузеры на движке Konqueror, KHTML; Presto). При этом Internet Explorer пока сохраняет лидирующие позиции.

См. также

• HTML 5
• Браузер (http-клиент)
• Веб-сервер (http-сервер)
• SSI (программирование)
• CSS
• Карта изображений

Родственные языки разметки

• XHTML
• XML и

Ссылки

• Спецификация HTML 4.01 (англ.)
• Рабочий проект по HTML 5 (англ.)

Литература

• Соколов Сергей Александрович HTML и CSS в примерах, типовых решениях и задачах. Профессиональная работа. — М.: «Вильямс», 2007. — С. 416. — ISBN 978-5-8459-1192-6
• Эд Титтел, Мэри Бурмейстер HTML 4 для «чайников» = HTML 4 For Dummies. — 5-е изд. — М.: «Диалектика», 2006. — С. 368. — ISBN 0-7645-8917-2

Введение в HTML | Основы современной верстки

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Видео может быть заблокировано из-за расширений браузера. В статье вы найдете решение этой проблемы.

Что такое HTML

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

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

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

Вы можете попробовать открыть разметку этой страницы с помощью комбинации Ctrl + U (Cmd + Option + U на macOS).

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

Давайте взглянем на небольшой пример HTML:

<section>
  <h2>Основы верстки на Hexlet</h2>
  <p>
    В профессии «Верстальщик» вы изучите множество популярных технологий,
    которые используют при создании верстки.
  </p>
  <p>
    Узнаете о работе с CSS, препроцессорами, немного попрограммируете. Изучите
    Bootstrap и научитесь проверять свой код с помощью специальных утилит.
  </p>
</section>

Прямо сейчас может показаться непонятным, что такое <section>, <h2>, <p>. Но сейчас самое важное то, что за всеми этими конструкциями скрывается самое главное — текстовое содержание.

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

Теги в HTML

Но что же означали эти загадочные <section>, <h2> и <p>? На языке разметки они называются тегами. Именно теги оборачивают наш контент и в конечном итоге обрабатываются браузерами.

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

Чтобы вставить параграф на страницу, необходимо указать специальную конструкцию <p> и </p>, между которыми вставить абзац текста.

<p>
  В профессии «Верстальщик» вы изучите множество популярных технологий, которые
  используют при создании верстки.
</p>
<p>
  Узнаете о работе с CSS, препроцессорами, немного попрограммируете.  Изучите
  Bootstrap и научитесь проверять свой код с помощью специальных утилит.
</p>

Как вы заметили, у нас может быть не один параграф. Почти все HTML-теги возможно использовать много раз на странице.

У тега параграфа есть открывающая часть <p> и закрывающая </p>. Именно благодаря этому браузер понимает, где начинается параграф и где заканчивается. Такие теги называются парными.

Как можно догадаться, если есть парные теги, то есть и непарные теги. И вы не ошиблись! В процессе работы с версткой вы узнаете и о таких тегах, и об их применении. Не торопитесь 🙂

Другой ключевой концепцией, помимо тегов, является вложенность. Посмотрите еще раз на пример разметки:

<section>
  <h2>Основы верстки на Hexlet</h2>
  <p>
    В профессии «Верстальщик» вы изучите множество популярных технологий,
    которые используют при создании верстки.
  </p>
  <p>
    Узнаете о работе с CSS, препроцессорами, немного попрограммируете.  Изучите
    Bootstrap и научитесь проверять свой код с помощью специальных утилит.
  </p>
</section>

В этом примере есть парный тег section, и внутри него располагаются остальные теги и текст внутри них. Эта концепция является одной из основных, которая позволяет строить большие системы.

Иногда вложенность — это обязательная часть разметки текста. Например, списки невозможно построить без использования вложенности.

<ul>
  <li>Первый элемент списка</li>
  <li>Второй элемент списка</li>
</ul>

Браузер выведет эту HTML-разметку следующим образом:

• Первый элемент списка
• Второй элемент списка

Без тегов <li> браузер не сможет отличить простой текст от элементов списка.

Атрибуты

Еще одна важная концепция HTML — атрибуты и их значение. Атрибуты — это просто дополнительная информация для браузера.

В HTML вы можете использовать ссылки, чтобы перемещаться по интернету. Недостаточно просто указать тег ссылки <a></a> и текст внутри.

<a>Пойти изучать программирование</a>

Браузер, к сожалению, не умеет читать наши мысли и перенаправлять пользователя туда, куда мы хотели 🙁

Чтобы перенаправить пользователя, мы должны помочь браузеру и указать, куда пользователь переместится после клика на ссылку. Для этого используется атрибут href, значением которого является нужная ссылка.

<a href="https://ru.hexlet.io">Пойти изучать программирование</a>

Теперь при клике на ссылку пользователя успешно перенаправит по тому адресу, который мы указали внутри атрибута href.

Общая схема тегов HTML

Дополнительное задание

Воспользуйтесь любым онлайн-сервисом, который умеет преобразовывать HTML разметку. Например, https://htmlcodeeditor.com/.

Вставьте в левую область следующую разметку:

<h2>Хорошие книги</h2>
<p>Советую прочитать эти книги:</p>
<ol>
  <li><b>Код.  Тайный язык информатики</b> <i>(Чарльз Петцольд)</i></li>
  <li>
    <b>Не заставляйте меня думать</b>
    <i>(<a href="https://en.wikipedia.org/wiki/Steve_Krug">Steve Krug</a>)</i>
  </li>
  <li><b>Дизайн привычных вещей</b> <i>(Donald Norman)</i></li>
</ol>

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

Дополнительные материалы

1. HTML Теги — HTML Basics: Урок 1
2. HTML Атрибуты — HTML Basics: Урок 2

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Общее использование и определяющие функции

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

HTML имеет простую текстовую структуру, которую легко изучить и понять новичкам. Вот пример:

 
 <голова>
  
 
 <тело>
   
Заголовок
 
  
Контент
 
 

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

Как работает HTML?

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

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

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

Что такое теги и элементы HTML?

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

 

  
Заголовок
 
 
Основное содержание
 <ул>
   
Первый элемент списка
   
Второй элемент списка
 
 

В приведенном выше примере HTML первый элемент, который мы видим, это

, который охватывает другие элементы. Div — один из наиболее распространенных HTML-элементов, с помощью которого можно разделить страницу на разделы. Например, если вы хотите создать два столбца на веб-странице, вы можете использовать элементы div для их определения.

Внутри div мы видим элемент

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

Тег

создает элемент абзаца. Обычно после элемента будет отступ, опять же, в зависимости от стилей.

Наконец, мы видим несколько наборов вложенных элементов. Тег

создает неупорядоченный список, который ничего не делает, пока вы не вложите в него хотя бы один набор элементов списка (
• ). Браузер отобразит эти элементы примерно так:
  • Первый элемент списка
  • Второй элемент списка

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

  Что такое HTML5?

  HTML5 — это последняя версия HTML. Обновление улучшило функциональность языка, позволив использовать функции, которые ранее требовали дополнительного программного обеспечения, такого как плагины для браузера. Также добавлена ​​возможность создавать приложения с использованием HTML, которые работают в автономном режиме. Вот некоторые из тегов, которые HTML5 добавил в язык:

  • : Тег видео позволяет разработчикам встраивать и транслировать видео из браузера без использования плагинов, таких как Flash или Silverlight
  .
  • : тег аудио похож на тег видео в том смысле, что его можно использовать для встраивания и потоковой передачи звуковых файлов из веб-браузера.
  • : Тег canvas определяет раздел в HTML, используемый для рисования графики с помощью JavaScript. Он даже может обрабатывать 3D-графику и анимацию с использованием WebGL.

  Перечисленные выше функции — это лишь некоторые из множества возможностей, реализованных в HTML5. Это было одно из самых больших изменений в определении языка, уступившее место современным динамическим веб-страницам.

  Для чего используется HTML?

  Теперь, когда мы познакомились с тегами и элементами HTML, а также с обновлениями, внесенными в HTML5, давайте подробнее рассмотрим возможности этого языка.

  Структурирование веб-страниц

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

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

  Навигация в Интернете

  Навигация в Интернете была бы намного сложнее без HTML. Представьте, что вам нужно вручную вводить URL-адрес каждой веб-страницы, которую вы хотите посетить. Это была бы наша реальность без якорных тегов. Теги привязки HTML позволяют нам связывать страницы друг с другом и друг с другом с помощью атрибута href. Вот пример:

  Google

  Как вы, наверное, догадались, приведенный выше фрагмент кода создает гиперссылку на Google. Вы также можете использовать гиперссылки для ссылки на определенный раздел веб-страницы.

  Встраивание изображений и видео

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

  Раньше разработчики использовали Flash для вставки видео на веб-страницу. Но с добавлением в HTML5 тега в этом больше нет необходимости.

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

  Улучшение хранения данных на стороне клиента и автономных возможностей

  HTML5 также улучшил автономные возможности языка. Веб-сайты используют файлы cookie для хранения данных о пользователях, которые можно получить позже, когда они повторно посетят сайт. Файлы cookie хорошо работают с небольшими данными, такими как токены аутентификации и имена пользователей, но добавление в HTML5 localStorage и IndexDB позволяет браузерам хранить более сложные данные.

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

  Разработка игр

  Хотя вы не можете создавать видеоигры исключительно с помощью HTML, элемент позволяет создавать видеоигры в браузере с использованием CSS и JavaScript. Раньше это можно было сделать только с помощью Flash или Silverlight. Но с современным HTML вы можете создавать как 2D-, так и 3D-игры, которые запускаются в вашем браузере.

  Взаимодействие с собственными API

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

  Какие профессии используют HTML?

  Как язык Интернета, каждый начинающий веб-разработчик должен знать HTML. Интерфейсные инженеры используют HTML (наряду с другими языками, такими как CSS и JavaScript) для разработки структуры и макета веб-страниц и приложений. Точно так же мобильные разработчики используют эти языки с такими фреймворками, как Ionic и React Native, для создания мобильных приложений.

  Инженеры по бэкенду также должны владеть HTML. Несмотря на то, что другие языки в их технических стеках могут генерировать для них HTML, им все равно необходимо понимать структуру HTML, чтобы все работало гладко.

  Мы также используем HTML за пределами Интернета, например, во внутренних сетях и внутренних приложениях. Таким образом, даже если вы программируете в автономном режиме, вам все равно следует изучать HTML. Это может быть полезно даже для нетехнических команд, поскольку некоторые маркетологи используют его для блогов и электронных писем.

  Узнайте больше о HTML

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

  Если вы заинтересованы в карьере в области веб-разработки, ознакомьтесь с нашей схемой карьеры Front-End Engineer. Мы научим вас создавать веб-приложения с использованием таких языков, как HTML, CSS и JavaScript, поможем составить портфолио и подготовимся к будущим собеседованиям.

  {{#сравнить сложность «==» «Новичок»}} Подходит для начинающих {{еще}} {{~#сравнить сложность «==» «Продвинутая»~}}{{/compare}} {{сложность}} {{/сравнивать}} {{урокКоличество}} Уроки

  Что такое HTML (язык гипертекстовой разметки)?

  Обновлено: 01. 02.2021 автором Computer Hope

  Впервые разработанный Тимом Бернерсом-Ли в 1990 году, HTML является сокращением от Язык гипертекстовой разметки . HTML используется для создания электронных документов (называемых страницами), которые отображаются в Интернете. Каждая страница содержит несколько соединений с другими страницами, называемых гиперссылками. Каждая веб-страница, которую вы видите, была написана с использованием одной версии HTML.

  HTML-код

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

  • Как выглядит тег HTML?
  • Как выглядит HTML?
  • Что такое HTML5?
  • Как выглядит HTML5?
  • Как создавать и просматривать HTML.
  • Какие расширения файлов используются с HTML?
  • Является ли HTML языком программирования?
  • Как произносится HTML.
  • Связанная информация.
  • Помощь и поддержка HTML и веб-дизайна.

  Как выглядит тег HTML?

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

  Большинство тегов заключены в угловые скобки меньше и больше, и все, что находится между открытым и закрытым тегами, отображается или затрагивается этим тегом. В приведенном выше примере тег создает ссылку под названием «Computer Hope», указывающую на файл Hope.html.

  Кончик

  Полный список тегов HTML см. на нашей справочной странице HTML и веб-дизайна.

  Как выглядит HTML?

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

   
  
   <голова>
    
    
   
   <тело>
     
  Это заголовок
   
    
  Это пример простой HTML-страницы.
    
    

  Поле выше содержит ключевые компоненты базовой веб-страницы. Каждая из строк поясняется ниже более подробно.

  1. Строка DOCTYPE описывает, в какой версии HTML была написана страница, чтобы интернет-браузер мог интерпретировать последующий текст.
  2. Открывающий тег сообщает браузеру, что он читает код HTML.
  3. Раздел содержит информацию о странице, такую ​​как заголовок, метатеги и местонахождение файла CSS.
  4. Раздел содержит все, что доступно для просмотра в браузере. Например, весь видимый здесь текст содержится в тегах body.
  5. Тег

     является видимым заголовком страницы.

  6. Тег

     представляет собой абзац текста. Большинство веб-страниц (например, эта) имеют несколько тегов абзаца.

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

  Что такое HTML5?

  HTML5 — это обновление HTML из HTML4 (XHTML следует другой схеме нумерации версий). Он использует те же основные правила, что и HTML4, но добавляет несколько новых тегов и атрибутов, которые позволяют улучшить семантику и динамические элементы, активируемые с помощью JavaScript. Новые элементы включают:

  ,