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

Содержание

Основы HTML — Изучение веб-разработки

  • Назад
  • Обзор: Getting started with the web
  • Далее

HTML (Hypertext Markup Language) — это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.

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

Моя кошка очень раздражена

Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:

<p>Моя кошка очень раздражена</p>

Анатомия HTML элемента

Давайте рассмотрим элемент абзаца более подробно.

Главными частями нашего элемента являются:

  1. Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, «p»), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
  2. Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
  3. Контент (Content): Это контент элемента, который в данном случае является просто текстом.
  4. Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.

Элементы также могут иметь атрибуты, которые выглядят так:

Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.

Атрибут всегда должен иметь:

  1. Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
  2. Имя атрибута, за которым следует знак равенства.
  3. Значение атрибута, заключённое с двух сторон в кавычки.

Вложенные элементы

Вы также можете располагать элементы внутри других элементов — это называется вложением. Если мы хотим заявить, что наша кошка очень раздражена, мы можем заключить слово «очень» в элемент <strong> , который указывает, что слово должно быть сильно акцентированно:

<p>Моя кошка <strong>очень</strong> раздражена.</p>

Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент <p>, затем элемент <strong>, потом мы должны закрыть сначала элемент <strong>, затем <p>. Приведённое ниже неверно:

<p>Моя кошка <strong>очень раздражена.</p></strong>

Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!

Пустые элементы

Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмём элемент <img>, который уже имеется в нашем HTML:

<img src="images/firefox-icon.png" alt="Моё тестовое изображение">

Он содержит два атрибута, но не имеет закрывающего тега </img>, и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.

Анатомия HTML документа

Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Моя тестовая страница</title>
  </head>
  <body>
    <img src="images/firefox-icon. png" alt="Моё тестовое изображение">
  </body>
</html>

Здесь мы имеем:

  • <!DOCTYPE html> — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.
  • <html></html> — элемент <html>. Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.
  • <head></head> — элемент <head>. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
  • <body></body> — элемент <body>. В нем содержится весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то ещё.
  • <meta charset="utf-8"> — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
  • <title></title> — элемент <title>. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.

Давайте снова обратим наше внимание на элемент изображения:

<img src="images/firefox-icon.png" alt="Mоё тестовое изображение">

Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута src (source, источник), который содержит путь к нашему файлу изображения.

Мы также включили атрибут alt (alternative, альтернатива). В этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение, возможно, по следующим причинам:

  1. У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.
  2. Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте src, сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:

Альтернативный текст — это «пояснительный текст». Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передаёт изображение. В этом примере наш текст «My test image» («Моё тестовое изображение») не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет «The Firefox logo: a flaming fox surrounding the Earth» («Логотип Firefox: огненный Лис вокруг Земли»).

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

Примечание: Узнайте больше о специальных возможностях.

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

Заголовки

Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков <h2> (en-US)<h6> (en-US), хотя обычно вы будете использовать не более 3-4 :

<h2>Мой главный заголовок</h2>
<h3>Мой заголовок верхнего уровня</h3>
<h4>Мой подзаголовок</h4>
<h5>Мой под-подзаголовок</h5>

Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше элемента <img>.

Абзацы

Как было сказано раньше, элемент <p> предназначен для абзацев текста; вы будете использовать их регулярно при разметке текстового контента:

<p>Это одиночный абзац</p>

Добавьте свой образец текста (вы создавали его в статье Каким должен быть ваш веб-сайт?) в один или несколько абзацев, расположенных прямо под элементом <img>.

Списки

Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространёнными типами списков являются нумерованные и ненумерованные списки:

  1. Ненумерованные списки — это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент <ul>.
  2. Нумерованные списки — это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент <ol>.

Каждый пункт внутри списков располагается внутри элемента <li> (list item, элемент списка).

Например, если мы хотим включить часть следующего фрагмента абзаца в список:

<p>Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе ... </p>

Мы могли бы изменить разметку на эту:

<p>Mozilla, мы являемся мировым сообществом</p>
<ul>
  <li>технологов</li>
  <li>мыслителей</li>
  <li>строителей</li>
</ul>
<p>работающих вместе ... </p>

Попробуйте добавить упорядоченный или неупорядоченный список на свою страницу.

Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — <a>a это сокращение от «anchor» («якорь»). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:

  1. Выберите некоторый текст. Мы выбрали текст «Манифест Mozilla».
  2. Оберните текст в элемент <a>, например так:
    <a>Манифест Mozilla</a>
    
  3. Задайте элементу <a> атрибут href, например так:
    <a href="">Манифест Mozilla</a>
    
  4. Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку:
    <a href="https://www.mozilla.org/ru/about/manifesto/details/">Манифест Mozilla</a>
    

Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите https:// или http:// часть, называемую протоколом. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.

Примечание: href сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как hypertext reference («гипертекстовая ссылка»).

Теперь добавьте ссылку на вашу страницу, если вы ещё не сделали этого.

Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете посмотреть её здесь):

Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на GitHub.

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

  • Назад
  • Обзор: Getting started with the web
  • Далее
  • Установка базового программного обеспечения
  • Каким должен быть ваш веб-сайт?
  • Работа с файлами
  • Основы HTML
  • Основы CSS
  • Основы JavaScript
  • Публикация вашего веб-сайта
  • Как работает Веб

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

HTML-код — что это такое?

Научим создавать свои игры, сайты и приложения

Начать учиться

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

HTML (от англ. HyperText Markup Language, «язык разметки гипертекста») — это стандартизированный язык разметки для создания страниц в интернете.

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

Учиться программированию — бесплатно

Запишите ребёнка в Бесплатную школу программирования от Skysmart Pro. Курсы по созданию игр, открытые уроки и вебинары, полезные советы — воплощайте идеи в жизнь и получайте за это призы

История появления

Британец Тим Бернерс-Ли в Женевском ЦЕРНе изобрел язык гипертекстовой разметки для того, чтобы иметь возможность создавать разметку и оформление документов во всемирной паутине (WWW — World Wide Web). Кстати, сам проект WWW был разработан также в стенах ЦЕРНа под руководством всё того же Тима Бернерса-Ли.

Точной даты создания HTML нет, его разрабатывали в период между 1986 и 1991 годами.

Проект HTML достаточно быстро набрал популярность благодаря следующим
факторам:

  • Простота. Синтаксис HTML был достаточно прост и ограничен, чтобы документы с его помощью могли создавать люди без специальных знаний в программировании и вёрстке.

  • Создание и форматирование документа без привязки к каким-либо средам выполнения или отображения. Появилась возможность создать сайт в любой программе для редактирования текста, например, в блокноте, и отображать его на любых компьютерах.

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

Изначально список команд разметки (они чаще называются тегами) включал всего 18 элементов, 11 из них используются даже в последних версиях языка.

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

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

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

Введение в HTML

Основной принцип языка разметки HTML состоит в превращении команд в визуальные объекты, которые отображаются в браузере. Например, тег <img> применяется для того, чтобы вставить картинку на сайт следующим образом:

<img src="http://placekitten.com/g/200/300" alt="Котик"/>

Здесь мы видим, что у тега могут быть дополнительные параметры. Например, здесь это src, в котором мы указываем путь к картинке, и alt, который задает описание картинки на случай, если она не загрузится.

Для создания заголовков применяется группа тегов <h2></h2> ... <h6></h6>. Например:

<h2>Заголовок первого уровня</h2>

А это — пример HTML-кода, с помощью которого можно создать целую страничку:


<html>
<head>
<title>Title</title>
</head>
<body>
<h2>Заголовок страницы</h2>
<p>Текст на странице</p>
<img src="http://placekitten.com/g/200/300" alt="Котик"/>
</body>
</html>

Здесь можно увидеть несколько секций:

  • <html> — это тег, который оборачивает все остальные. Его использование говорит браузеру, что перед ним документ в html-разметке.

  • <head> — тег, внутри которого содержится метаинформация о странице, то есть такая информация, которая не отображается напрямую в документе. Например, <title> — это заголовок вкладки браузера.

  • <body> — «тело» страницы. Внутри него как раз будет располагаться весь контент.

  • <h2> — заголовок страницы.

  • <p> — абзац с текстом.

  • <img> — картинка на странице.

С помощью HTML-тегов мы можем:

  • форматировать текст: добавлять выделение курсивом, жирным шрифтом, подчеркивание, менять размер кегля, использовать нумерованные/маркированные списки;

  • управлять текстовыми блоками: создавать заголовки различных уровней, абзацы, переносы на новую строку;

  • управлять таблицами — создавать строки, столбцы и т. д.;

  • вставлять объекты на страницу — изображения, видео, аудиофайлы и т. д.;

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

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

Более сложные объекты и взаимодействия между ними принято создавать на JavaScript.

Что нельзя сделать на HTML

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

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

Стили — очень полезная штука:

  • они упрощают верстку для различных устройств и разрешений экрана;

  • сокращают время на оформление страниц сайта;

  • расширяют возможности оформления HTML.

С использованием CSS дизайн сайта становится интереснее, а загрузка страниц ускоряется за счет меньшей нагрузки на сервер.

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

HTML — это язык программирования?

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

Язык программирования — формальная знаковая система, предназначенная для записи компьютерных программ. Язык программирования определяет набор лексических, синтаксических и семантических правил, задающих внешний вид программы и действия, которые выполнит исполнитель (компьютер) под её управлением. Языки программирования бывают императивные (когда мы говорим компьютеру, как мы хотим получить результат) и декларативные (мы говорим, что хотим получить).

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

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

Сделать первые шаги в создании сайтов на интересных заданиях и с поддержкой опытных преподавателей можно на курсе веб-разработки в Skysmart Pro. Первый вводный урок — бесплатно!

В Minecraft можно больше, чем просто играть

Нескучное программирование, используем творческий потенциал на максимум, создадим свои собственные трехмерные миры и игры, изучим основы кодирования и логики. А там рукой подать до IT

Михаил Прокудин

Фронтенд-разработчик

К предыдущей статье

Scratch — язык программирования для детей

К следующей статье

Что такое CSS

Получите план развития в программировании на бесплатном вводном уроке

На вводном уроке с методистом

  1. Подберём курс по уровню, возрасту и интересам ребёнка

  2. Расскажем, как проходят занятия

Что такое HTML? Основы языка гипертекстовой разметки для начинающих

HTML

16 февраля 2023 г.

Astari S.

6 минут Чтение

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

HTML имеет множество вариантов использования, а именно:

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

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

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

Загрузить полную HTML-шпаргалку

HTML объясняется в видеоруководстве

Вы спешите? Вместо этого посмотрите наш видеоурок.

Подпишитесь на другие обучающие видео!
Академия Хостингер

Подписаться

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

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

HTML-документы — это файлы с расширением .html или .htm. Веб-браузер читает файл HTML и отображает его содержимое, чтобы пользователи Интернета могли его просматривать.

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

Элемент состоит из трех основных частей: 

  • Открывающий тег — используется для указания, где элемент начинает действовать. Тег заключен в открывающую и закрывающую угловые скобки. Например, используйте начальный тег

    для создания абзаца.

  • Контент — это вывод, который видят другие пользователи.
  • Закрывающий тег — то же, что и открывающий тег, но с косой чертой перед именем элемента. Например,

    для завершения абзаца.

Комбинация этих трех частей создаст элемент HTML:

 

Вот как вы добавляете абзац в HTML.

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

Например, элемент стиля, добавляющий фиолетовый цвет и семейство шрифтов verdana, будет выглядеть так:

 

Вот как вы добавляете абзац в HTML.

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

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

и абзаца

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

и

, добавьте class=»important» после каждого начального тега: 

 
<голова>
<стиль>
. важный {
  цвет фона: синий;
  белый цвет;
  граница: 2px сплошной черный;
  поле: 2px;
  отступ: 2px;
}


<тело>

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

Это абзац.

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

 Image 

Этот тег изображения имеет два атрибута — атрибут src, путь к изображению, и атрибут alt, описательный текст. Однако у него нет содержимого и конечного тега.

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

  

Наиболее часто используемые HTML-теги и HTML-элементы

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

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

Элементы уровня блока

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

Каждая HTML-страница использует эти три тега:

  • Тег — это корневой элемент, определяющий весь HTML-документ.
  • Тег содержит метаинформацию, такую ​​как заголовок страницы и кодировку.
  • Тег заключает в себе все содержимое, отображаемое на странице.
 
  <голова>
    
  
  <тело>
    
  

 

Другие популярные теги блочного уровня включают в себя:

  • Теги заголовков — они варьируются от

    до

    , где заголовок h2 имеет наибольший размер, уменьшаясь по мере продвижения к h6.

  • Теги абзаца — все заключены в тег

    .

  • Теги списка – имеют разные варианты. Используйте тег
      для упорядоченного списка и используйте

        для неупорядоченного списка. Затем заключите отдельные элементы списка с помощью тега

      • .

      Встроенные элементы

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

      Например, тег выделит элемент жирным шрифтом, а тег — курсивом. Гиперссылки также являются встроенными элементами, которые используют тег и атрибут href для указания места назначения ссылки:

       Нажмите на меня! 

      Эволюция HTML — чем отличается HTML от HTML5?

      Первая версия HTML состояла из 18 тегов. С тех пор в каждой новой версии в разметку добавлялись новые теги и атрибуты. Самым значительным обновлением языка на сегодняшний день стало появление HTML5 в 2014 году. 

      Основное различие между HTML и HTML5 заключается в том, что HTML5 поддерживает новые типы элементов управления формами. HTML5 также представил несколько семантических тегов, которые четко описывают содержимое, например

      ,

      и