Главная › Новости

Что такое HTML?

Опубликовано: 20.10.2023

Что такое HTML?

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

Мы уверены, что большинство из вас много раз встречались и работали сHTML. Однако мы верим, что некоторые из вас только знакомятся с этим языком. По этой причине мы подготовили этот текст, чтобы немного прояснить его важность и применение в Интернете, а также объяснить, что такое HTML.

ИмяHTMLпроисходит от аббревиатуры английского имениHyperText M[(14505 )] ArupLязык. Это имя может быть лучше объяснено, если мы разобьем его на части:

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

В переводе на практический язык HTML составляет основу и структуру каждой веб-страницы и встречается буквально на каждой веб-странице в Интернете.

Что такое HTML?

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

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

С другой стороны, текст, который вы вводите между определенными HTML-тегами (например, тегом

), будет виден в вашем браузере в исходном виде.

Все это вместе (как видимая, так и невидимая часть) составляет основу каждой веб-страницы в Интернете.

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

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

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

А теперь перейдем от слов к делу 🙂

!Примечание:Для написания HTML-кода достаточно обычного блокнота или любого другого текстового редактора. Мы будем использовать Visual Studio Code для целей этого текста и продолжим это делать. На рынке существует большое количество бесплатных текстовых редакторов, включая тот, с которым мы будем работать. Конечно, вы можете выбрать любой другой. Разницы между редакторами нет, если не считать некоторых различий стилистического характера, которые никоим образом не влияют на конечный результат отрисовки вашего кода в браузере.

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

HTML-компоненты

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

Теги

Как мы уже упоминали, структуру HTML составляют так называемые теги, которые записываются в формате, состоящем из знака[(14505)] в конце имени тега.

Пример:

отмечает начало разделаp(абзац) HTML-документа.

Аналогично, каждый тег заканчивается символамипосле имени тега.

Пример:

отмечает конец разделаpHTML-документа.

Поскольку этот тег представляет видимый текст на веб-сайте, он используется в разделе BODY ().

Элементы

Каждый открывающий и закрывающий тег вместе с содержимым между ними составляют один элемент HTML-документа.

Пример:

Это текст

Секции:В каждом HTML-документе есть два основных раздела:

а)

б)

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

Тип документа

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

Рассматриваемое объявление написано в последней версии HTML:

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

HTMLтег

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

В версии HTML5 этот тег можно опустить, но рекомендуется сделать его неотъемлемой частью HTML-документа.

Причина этого в том, что пропуск этого тега может в некоторых случаях привести к проблемам в DOM (сокращение от объектной модели документа) вашего HTML-документа или к ошибкам при чтении HTML-документа в некоторых старых браузерах. В обоих случаях ваш веб-сайт будет отображаться в браузере некорректно, поэтому рекомендуется всегда использовать тег.

Более подробно понятие DOM мы разработаем в одном из следующих тестов на тему HTML.

HEAD-раздел

Раздел head () представляет собой заголовок HTML-документа и должен содержать тег,а также может содержать ссылки, скрипты, стили, метаданные и тому подобное. Дело в том, что в текущей версии HTML (HTML5) этот раздел можно опустить, поэтому на практике это часто делается.

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

Тег TITLE:

Каждый HTML-документ должен содержать имя. Он вводится путем ввода имени между тегами и.

Пример: Это название нашего сайта.

Этот заголовок будет напечатан во вкладке браузера (рисунок 3).

Раздел BODY

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

Заголовок

Заголовок () представляет собой заголовок и имеет шесть тегов, определяющих заголовок — от h1 до h6. Заголовок пишется между тегами с соответствующей меткой.

Пример:

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

Помните, что тег h1 вы хотите пометить как самый важный, а h6 — как наименее важный тег в вашем HTML-документе. Следует учитывать, что h1 – самый крупный шрифт, а h6 – самый мелкий. Что-то похожее на написание заголовка обычным текстом.

На рис. 4 показан пример тегов H с их номерами, как видно в браузере.

Абзац

Как следует из названия, абзац (

) обозначает часть вашего HTML-документа, в которую вводится некоторый текст.

Пример:

Это текст

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

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

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

Основные возможности и применение HTML

Вот некоторые из основных особенностей HTML:

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

!Интересно:Хотя все интернет-браузеры поддерживают последнюю версию HTML, существует и некоторые небольшие различия между ними. Так, например, между браузерами Chrome и Firefox существует определенная разница в том, как они читают и поддерживают html-документ согласно спецификации HTML5.

Чтобы проверить, как ваш браузер читает HTML5, посетитеhttps://html5test.com/. Сайт автоматически определит ваш браузер (и версию, которую вы используете в данный момент) и отобразит его оценку. Вы также можете увидеть, как ранжируются другие поисковые системы. Интересно то, что вы можете проверить одно и то же для разных версий браузера, а также для версий на разных типах устройств (настольные, планшетные, мобильные).

Преимущества и недостатки HTML

Как и любой другой язык, HTML имеет свои преимущества и недостатки.

Преимущества:

• это общепринято и стандартизировано в Интернете
• он уже встроен в интернет-браузеры, поэтому дополнительная установка не требуется.
• поддерживает широкий спектр цветов, форматов и макетов
• незаменим в SEO оптимизации

Недостатки:

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

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

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

Так что следите за обновлениями и читайте нас и в последующих текстах по теме HTML в нашем блоге.

Ненад Михайлович