Введение

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

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

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

Давайте начнем!

  • <!DOCTYPE html>
    Каждый HTML-документ должен начинаться с объявления ‹!DOCTYPE html›. Это необходимо для определения версии HTML, используемой веб-страницей, что позволяет браузеру правильно отображать страницу.
    Он должен быть указан в начале каждого документа следующим образом:
<!DOCTYPE html>
  • <html> и <head>
    Тег <html> представляет корень HTML-документа. Он содержит всю информацию и содержимое веб-страницы.
    Элемент <head> состоит из информации о HTML-документе, т. е. заголовка страницы, набора символов, версии HTML, стилей, скриптов и другой метаинформации.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
</html>
  • ‹title›
    Тег ‹title> используется для определения заголовка HTML-документа и отображается в строке заголовка браузера или на вкладке страницы.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
</html>
  • ‹meta›
    Тег <meta> определяет метаданные документа. Метаданные — это информация о данных (набор символов, описание страницы, ключевые слова, автор документа и настройки области просмотра). Это не будет отображаться на веб-странице, но может быть обработано машиной.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
  <body></body>
</html>
  • ‹body›
    Тег ‹body> состоит из всего, что вы хотите отобразить на веб-странице.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
</head>
<body>
  <!-- Main content for web page -->
</body>
</html>
  • От ‹h1› до ‹h6›
    Теги от <h1> до <h6> представляют заголовки или субтитры, которые вы хотите отобразить на веб-странице. <h1> представляет наиболее важный заголовок. <h6> представляет наименее важный заголовок.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
  </body>
</html>
  • ‹p›
    Тег <p> определяет абзац. Это один из наиболее часто используемых тегов HTML для организации и представления текстового контента.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus ipsam
      quam, quidem quod nulla provident reprehenderit. Saepe atque nobis iusto
      labore earum hic dolores accusantium quia, fuga placeat fugiat, doloremque
      laborum, odio velit repudiandae nemo aperiam quaerat ratione quod
      veritatis exercitationem! Suscipit saepe omnis aliquam consequuntur
      adipisci facere laudantium atque.
    </p>
  </body>
</html>
  • ‹img›
    Тег <img> используется для встраивания изображения в документ. Для этого требуется атрибут src, который указывает на местоположение файла изображения.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
  <body>
    <img src="img.png" alt="picture" />
  </body>
</html>
  • <ul> и <li>
    Тег <ul> (неупорядоченный список) используется для определения неупорядоченного списка, а тег <li> (элемент списка) используется для определения элемента списка. Тег <ul> действует как контейнер для тегов <li>, представляющих отдельные элементы списка.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
  <body>
    <ul> 
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul> 
  </body>
</html>
  • ‹a›
    Тег <a> (якорь) с атрибутом «href» определяет гиперссылку, которая используется для ссылки веб-страницы на другую веб-страницу, адрес электронной почты, определенный раздел на той же веб-странице или любой другой URL.
    Атрибут href указывает назначение ссылки.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
</head>
<body>
  <a href="https://google.com">Google</a>
  <a href="mailto:[email protected]">Email</a>
  <a href="tel:9876543210">Phone</a>
</body>
</html>

Заключение

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

Объявление <!DOCTYPE html> указывает версию HTML. Тег <html> является корнем документа HTML, а раздел <head> содержит метаданные.

Тег <title> определяет заголовок веб-страницы, а тег ‹meta> предоставляет метаданные о HTML-документе, такие как кодировка символов и настройки области просмотра.

Тег <body> содержит содержимое веб-страницы, а теги заголовков (от <h1> до <h6>) эффективно структурируют заголовки и субтитры.

Тег <p> создает абзацы текста, а тег <img> встраивает изображения на веб-страницу.

Теги <ul> и <li> позволяют нам создавать неупорядоченные списки и элементы списка, а тег <a> используется для создания гиперссылок на другие веб-страницы, адреса электронной почты или определенные разделы на странице.

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

Продолжайте кодировать!

Чтобы получить больше контента, подобного этому, нажмите здесь!