Список HTML-тегов: парные и непарные теги - httpdoc.ru

Список HTML-тегов: парные и непарные теги

Весь HTML работает с HTML-тегами. Эти теги являются основным строительным блоком веб-сайта. Никаких веб-технологий вроде CSS , PHP , Python, WordPress и т. д. будут существовать без HTML-тегов. Сегодня вы получите полный список тегов HTML; парные и непарные. Вы также можете скачать PDF со списком HTML-тегов . Начнем с определения тега HTML.

Что такое HTML-тег?

HTML-теги - это предварительно определенные элементы в HTML, заключенные в эти скобки < > . Например: <html> , <table> и т.д. Все HTML - теги имеют определенную функцию , связанную с ними.

Каждый тег имеет особую функцию, а комбинация различных тегов создает веб-сайт. Например , <p> тег определяет абзац на веб-сайте, а <table> тег отображает таблицу.

Все HTML-теги предопределены, т. Е. Вы не можете создавать новые теги. Посмотрите на пример ниже, это пример парного тега. Обратите внимание, что есть два / тега с одинаковым именем, но перед последним стоит косая черта , это закрывающий тег. Итак, что такое закрывающий тег? Начнем с разных типов тегов!

Синтаксис:

<p> Содержание </p>

Типы тегов в HTML - загрузка списка HTML тегов

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

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

  1. Парные теги (открывающие и закрывающие теги)
  2. Непарные теги (единичный тег)

Парные теги - открывающие и закрывающие теги

Парные теги - это набор из двух тегов с одинаковым именем. В каждом наборе парных тегов один является открывающим, а другой закрывающим. Закрывающий тег имеет / косую черту, это означает, что тег сейчас закрыт.

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

Посмотрите список парных тегов в HTML ниже. Обратите внимание, что у каждого тега есть закрывающий тег с косой чертой (/) перед именем тега.

Синтаксис:
<tag> Содержимое ... </tag>

<code> текст ... </code>

Список некоторых парных тегов в HTML:

Открыть тег Закрыть тег
<html> </html>
<table> </table>
<form> </form>
<span> </span>
<ul> </ul>
<p> </p>
<head> </head>
<div> </div>

Непарные теги - отдельные теги

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

Также рекомендуется закрыть непарные / единичные теги. Но, к сожалению, у нас нет закрывающего тега для них. Таким образом, непарный тег закрывается после добавления косой черты (/) непосредственно перед > знаком «больше» . Например: <br /> .

Посмотрите ниже список некоторых непарных тегов в HTML. Обратите внимание на использование косой черты (/) в тегах, чтобы закрыть их.

Некоторые непарные теги:

Открыть тег
<br>
<hr>
<meta>
<вход>

Теги заголовков HTML - теги H1 в теги H6

Тег заголовка используется для sizes обозначения различных заголовков в документе. Существует шесть различных тегов заголовков HTML, которые задают заголовки разного размера и определяются тегами от <h1> до <h6>. <h1> дает самый большой заголовок и <h6> дает самый маленький заголовок . Так <h1> можно использовать для самых важных заголовков и <h6> можно использовать для наименее важных.

Пример
<!DOCTYPE html> 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> HTML Heading Tag </title> 
</head> 

<body> 

<h1> This is Heading 1 </h1> 
<h2> This is Heading 2 </h2> 
<h3> This is Heading 3 </h3> 
<h4> This is Heading 4 </h4> 
<h5> This is Heading 5 </h5> 
<h6> This is Heading 6 </h6> 

</body> 
</html>

Выход

HTML Heading Example

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

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

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

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

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

HTML-тег p - тег абзаца

<p> Тег используется для определения пункта в документе. HTML paragraph или HTML- <p> тег дает текст внутри него, как абзац, заканчивающийся. Примечательно, что сам браузер добавляет разрыв строки до и после абзаца.

Давайте рассмотрим простой пример, чтобы увидеть, как это работает.

Пример
<!DOCTYPE html> 
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> HTML Paragraph Tag </title> 
</head> 

<body> 

<p> This is First Paragraph </p> 
<p> This is Second Paragraph </p> 
<p> This is Third Paragraph </p> 

</body> 
</html>

Выход

HTML Paragraph Tag Example

Это первый абзац

Это второй абзац

Это третий абзац


HTML тег - тег привязки

HTML-гиперссылка определяется <a> тегом (тег привязки). Он используется для ссылки на любой файл, веб-страницу, изображение и т. Д.

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

Ниже приводится простой синтаксис использования <a> тега.

Пример
<!DOCTYPE html> 
<HTML lang="en">  
<head> 
 <meta charset="UTF-8">
 <title> HTML Anchor Tag </title> 	
</head> 
<body>  

<a target="_blank" href="/"> This is a link </a>  

</body>  
</html>

Выход

HTML Anchor Tag Example Это ссылка


Примечание. Используйте target = _blank в качестве атрибута в теге <a>, чтобы открыть ссылку на новой вкладке.


HTML-тег img - тег изображения

Тег изображения используется для добавления изображений в документы HTML. <img> Тег HTML используется для добавления изображения в документ. Атрибут src используется для указания источника (адреса) изображения. Высотой и шириной изображения можно управлять с помощью атрибутов - height="px" и width="px" .

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

Пример
<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Image Tag </title> 
</head> 

<body> 

<img src="HTML-Image.png" width="400px" height="200px">

</body> 
</html>

Выход

HTML Image Tag Example
HTML изображение

Надеюсь, это руководство поможет вам понять основы тегов HTML. Есть еще одна концепция элементов против тегов в HTML. Чтобы узнать больше о HTML-элементе и HTML-тегах, мы предлагаем вам перейти Страница WikiPedia .