Элемент HTML

HTML-документ состоит из элементов. Каждый элемент содержит две пары угловых скобок (‹› и ‹/›), которые составляют открывающий и закрывающий теги для этого элемента. Есть несколько специальных элементов, которые не имеют закрывающего тега (‹/›). Известно, что эти элементы имеют «самозакрывающиеся» теги, потому что все, что им нужно для правильной работы, — это первый и открывающий тег.

Что такое атрибут HTML?

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

<body id=“main”> 
</body>

В элементе, указанном выше, «body» — это ключевое слово, а «id» — это атрибут со значением «main». Атрибуты используются в элементе для многих конкретных целей. Присвоенные им значения используются для управления поведением элементов.

Общие атрибуты

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

(i) класс: определенный класс присваивается группе элементов, имеющих одинаковые характеристики.

(ii) id: предоставляет уникальную идентификацию отдельным элементам, что позволяет получить доступ к определенным элементам из файлов CSS и Javascript.

(iii) стиль: с помощью этого атрибута встроенные стили CSS можно применять непосредственно к отдельным элементам в файле HTML.

(iv) имя: объявляет пользовательское имя для элементов формы.

Конкретные атрибуты

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

(i) lang: определяет язык, используемый в файле HTML.

(ii) href: гипертекстовая ссылка, которая используется для установления связи между файлом HTML и другим файлом или файлом HTML и внешней веб-страницей.

(iii) src: местоположение внешних мультимедийных файлов, таких как изображения, видео, аудио и файлы Javascript, назначается этому атрибуту, известному как «источник».

(iv) rel: этот атрибут присутствует только в элементе ‹link›. Он идентифицирует предоставленную ссылку как таблицу стилей.

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

Глобальная структура HTML

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

Ключевое слово «!DOCTYPE» необходимо для того, чтобы браузеры интерпретировали документ как код HTML5. Он должен быть написан на первой строке документа без пробелов и строк перед ним.

Этот элемент отмечает начало и конец древовидной структуры HTML. Это корневой элемент, который объединяет все остальные элементы.

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

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

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

Элемент meta имеет собственный специальный набор атрибутов, который включает «набор символов», «имя» и «контент», которые необходимы для определения;

  1. Кодировка набора символов документа, которая является стандартом utf-8.
  2. Описание документа
  3. Ключевые слова документа
  4. Окно просмотра документа

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

Название веб-страницы определяется между тегами элемента title. Определенный заголовок не отображается в содержимом веб-страницы при отображении в браузере. Он виден только на панели задач браузера. Заголовок всегда помещается внутри элемента head.

Вывод

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="description" content="This is about HTML5 structure">
  <meta name="keywords" content="HTML5, CSS3, JavaScript, Medium">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The title is Structure</title>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>
  <p>This is the content of the website</p>
</body>
</html>

Надеюсь, вы хорошо понимаете, что может предложить каждый элемент.