Articles
Введение в HTML
Основы HTML

Основы HTML

В этой статье мы объясняем основы HTML.

Здесь объясняются основные теги, такие как декларация DOCTYPE, теги <html>, <head> и <body>. Он также описывает теги, атрибуты и специальные символы.

YouTube Video

Основы HTML 

 1<!DOCTYPE html>
 2<html lang="en">
 3    <head>
 4        <meta charset="UTF-8">
 5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6        <title>Basics of HTML</title>
 7    </head>
 8    <body>
 9        <!-- Main content wrapped in the main tag -->
10        <main>
11            <!-- Main heading -->
12            <h1>What is HTML?</h1>
13            <!-- Example of a paragraph -->
14            <p>HTML is the language used to create the basic structure of web pages.</p>
15        </main>
16    </body>
17</html>

  • <!DOCTYPE html>

    В начале файла мы указываем, что это документ HTML5, который соответствует правилам HTML5.

  • <html>

    <html> — это наиболее внешний элемент в HTML-документе, который охватывает всё содержимое. Каждый HTML-файл содержит только один тег <html>, а все остальные теги вложены внутрь этого тега. Атрибут lang="en" в открывающем теге <html> сообщает браузеру, что документ написан на английском языке. Это помогает уведомить программы чтения с экрана и поисковые системы о языке документа.

  • <head>

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

    <meta charset="UTF-8"> устанавливает кодировку символов документа в UTF-8.

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> — это настройка, оптимизирующая отображение для мобильных устройств. Страница адаптируется к ширине экрана устройства.

    <title> представляет собой название страницы, отображаемое на вкладке браузера. В этом примере установлено название 'Основы HTML'.

  • <body>

    Тег <body> содержит часть, отображающую содержимое для пользователей. Внутри этого тега размещаются текст, изображения, ссылки и т.д.

  • <main>

    Тег <main> представляет основной контент страницы. Это включает заголовки и абзацы.

  • <h1>

    Тег <h1> представляет самый важный заголовок на странице. Обычно теги <main> и <h1> используются в документе только один раз.

  • <p>

    Тег <p> представляет параграф.

  • <!-- Comment -->

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

HTML содержит много тегов, но обратите внимание на следующие моменты. HTML-файл состоит из декларации DOCTYPE и одного тега <html>. Тег <html> содержит один тег <head> и один тег <body>. В HTML все теги содержатся внутри тега <html>, выражая структуру текста через отношения родителя, ребенка и соседа, подобно древовидной структуре. При написании HTML уделяйте внимание структуре документа.

Теги и атрибуты

Теперь давайте ознакомимся с тегами и атрибутами HTML.

 1<!-- Opening tag and closing tag -->
 2<div>Content</div>
 3
 4<!-- Self-closing tag -->
 5<br>
 6
 7<!-- Nested tag -->
 8<div>
 9    <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14    <div>Nested Content</div>
15</div>
16
17<!-- Tag     : <div> -->
18<!-- Element : <div>Content</div> -->

Теги заключены в угловые скобки (<, >) и обычно состоят из пар открывающих и закрывающих тегов. Однако также существуют одиночные теги, такие как <meta> и <img>, которые не содержат контента. Одиночные теги не требуют закрывающего тега.

Теги могут иметь атрибуты, которые предоставляют дополнительную информацию тегу. Атрибуты пишутся внутри открывающего тега в формате attributeName="value".

Здесь <div> называется тегом, а <div>Content</div> элементом.

1<div id="header">
2    <ul class="menu">
3        <li>Home</li>
4        <li style="display: hidden;">Unvisible Menu Item</li>
5    </ul>
6</div>

К распространённым атрибутам в HTML относятся id, class и style. Атрибут id используется для присвоения элементу уникального идентификатора, при этом на странице может быть только один элемент с таким же id. Это полезно при работе с конкретными элементами с помощью JavaScript или CSS. Атрибут class позволяет группировать несколько элементов с помощью CSS или JavaScript, назначая им имя класса. Вы можете назначить один и тот же класс нескольким элементам, что позволяет применять общие стили. Атрибут style задаёт CSS-стили непосредственно для элемента. Обычно стили определяются во внешнем CSS-файле или внутри тега <style>, но этот атрибут используется, когда вы хотите задать стили непосредственно для отдельных элементов.

Специальные символы в HTML

Теперь давайте изучим специальные символы в HTML.

В HTML существуют специальные символы, используемые для отображения определённых знаков и символов. Эти специальные символы называются сущностями. Специальные символы начинаются с & (амперсанда), за которым следует имя или номер, и заканчиваются ; (точкой с запятой).

Представительные специальные символы в HTML

Вот некоторые распространённые специальные символы.

Display Entity Name Entity Number Description
& &amp; &#38; Ampersand (&)
< &lt; &#60; Less-than sign (<)
> &gt; &#62; Greater-than sign (>)
" &quot; &#34; Double quotation mark (")
' &apos; &#39; Apostrophe (')
© &copy; &#169; Copyright symbol (©)
€ &euro; &#8364; Euro symbol (€)
¥ &yen; &#165; Japanese Yen symbol (¥)
¢ &cent; &#162; Cent symbol (¢)
£ &pound; &#163; Pound symbol (£)
  &nbsp; &#160; Non-breaking space (space)

Примеры использования специальных символов в HTML

В частности, угловые скобки (<, >) и двойные кавычки должны использоваться правильно в HTML.

Угловые скобки (<, >) и двойные кавычки должны быть представлены как специальные символы в HTML, как показано ниже.

 1<!DOCTYPE html>
 2<html lang="en">
 3    <head>
 4        <meta charset="UTF-8">
 5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6        <title>Basics of HTML</title>
 7    </head>
 8    <body>
 9        <!-- Main content wrapped in the main tag -->
10        <main>
11            <!-- Main heading -->
12            <h1>What is HTML?</h1>
13            <!-- Example of a paragraph -->
14            <p>
15                HTML is the language used to create the basic structure of web pages.<br>
16                It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17            </p>
18            <hr>
19            <h2>Basic Elements of HTML</h2>
20            <div>
21                HTML elements are used to organize and display content on a web page.
22                They include tags for text, images, links, and more.
23            </div>
24            <hr>
25            <ul>
26                <li>Headings (e.g., &lt;h1&gt;, &lt;h2&gt;)</li>
27                <li>Paragraphs (&lt;p&gt;)</li>
28                <li>Links (&lt;a&gt;)</li>
29                <li>Lists (&lt;ul&gt;, &lt;ol&gt;)</li>
30                <li>Images (&lt;img&gt;)</li>
31            </ul>
32            <hr>
33-            <h3>About '<h1>' tag and '<h2>' tag</h3>
34+            <h3>About '&lt;h1&gt;' tag and '&lt;h2&gt;' tag</h3>
35            <img src="image.png"
36-                alt="This is an example of "image"">
37+                alt="This is an example of &quot;image&quot;">
38        </main>
39    </body>
40</html>

Версии HTML

Давайте рассмотрим версии HTML здесь.

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

  1. HTML 1.0 (1993)

    Первая версия HTML имела только самые базовые функции разметки. Она определяла такие элементы, как ссылки, заголовки, параграфы и списки.

  2. HTML 2.0 (1995)

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

  3. HTML 3.2 (1997)

    Были добавлены дополнительные возможности разметки, позволяющие встраивать стили и сценарии. Кроме того, использование макетов с помощью элемента <table> стало обычным.

  4. HTML 4.01 (1999)

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

  5. HTML5 (2014)

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

HTML5.2 — это версия HTML, рекомендованная в 2017 году, которая является улучшенной версией HTML5. Начиная с HTML5.2, она обновляется на постоянной основе как Живой стандарт HTML, вместо использования статических номеров версии.

HTML эволюционировал через эти версии, становясь более гибкой и мощной веб-технологией.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Семантический HTML