Что такое тег html: Тег

Содержание

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

Парные и одиночные теги HTML
Вложенные элементы
Пробельные символы

HTML элемент — это основная структурная единица веб-страницы, написанная на языке HTML.

Парные и одиночные теги HTML

Синтаксис HTML элементов, состоящих из парных тегов:

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

Примечание: не забывайте в закрывающем теге ставить символ «/«, он указывает браузеру, что ваш элемент закончился и что то, что будет написано после него, является уже другим элементом. Если не поставить символ «/» в закрывающем теге, то браузер примет его за новый элемент, вложенный в предыдущий, который по мнению браузера всё ещё не закрыт.

Синтаксис HTML элементов, состоящих из одиночных тегов:

Элемент состоит только из открывающего тега.

Элементы, состоящие из одиночных тегов называются пустыми. Всего в HTML 16 одиночных тегов:

<!doctype>
<area>
<base>
<br>
<col>
<embed>
<hr>
<img>

<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>

Вложенные элементы

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

Следующий пример состоит из трех элементов, два из которых вложенные:


<html>
  <body>

    <p>Мой первый абзац</p>

  </body>
</html>

В этом примере элемент <p> вложен в элемент <body>, который, в свою очередь, вложен в элемент <html>.

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


<p>Это <em>очень</p> интересно</em>

Здесь элемент <em> выходит за пределы элемента <p>:

Пример с правильной вложенностью:


<p>Это <em>очень</em> интересно</p>

Здесь элемент <em> правильно вложен — он находится полностью в элементе <p>:

Пробельные символы

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


<html>
  <head>
    <title>Заголовок</title>
  </head>
  <body>

    <h2>Мой первый заголовок</h2>
    <p>Мой первый абзац</p>

  </body>
</html>

Код примера можно было бы написать и вовсе без использования пробельных символов, но такой код будет менее удобен для чтения:


<html><head><title>Заголовок</title></head><body><h2>Мой первый заголовок</h2><p>Мой первый абзац</p></body></html>

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

С этой темой смотрят:

Введение в html
Блочные и строчные html теги
Атрибуты html элементов

Что такое HTML-теги — шпаргалка по основным меткам

Можно бесплатно и в режиме онлайн открыть ООО через Тинькофф и вести бухгалтерию через Мое дело

Наверх

Главная
Создание сайта на HTML
HTML-теги

Тег — это специальное зарезервированное слово, заключённое в угловые скобки (например, <body>

Тег — основная составляющая HTML: им код начинается, им же заканчивается, внутри тегов заключается отображаемая на веб-странице информация. Записывать их рекомендуется в нижнем регистре, то есть обычными маленькими буквами: не <THEAD>, а <thead>.

Какими бывают теги?

Большинство HTML-тегов являются парными: есть открывающий (например, <html>) и закрывающий тег, который от открывающего отличает слеш (/) после первой угловой скобки (например, </html>). Всё, что находится внутри пары тегов, называется их содержимым.

<Открывающий_тег>Содержимое</Закрывающий_тег>
<b>Помещённый внутри этих тегов текст становится жирным</b>

Бывают и непарные (одиночные) теги, которые называются метками

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

Пример одиночного тега — <br>. Он устанавливает перенос текста на следующую строку.

Если проводить параллели с русским языком, то можно сказать, что парные теги — это кавычки или скобки, влияющие на свойства заключённого в них текста (попробуйте не закрыть кавычки вовремя), а одиночные теги (метки) — это знаки препинания (восклицательный, вопросительный или точка).

Любой тег состоит из:

Открывающей угловой скобки (<).
Специального слова (имени тега). Например, hr, iframe, b.
Закрывающей угловой скобки (>).

Основные HTML-теги

Так как теги — основа языка разметки, не удивительно, что их довольно много. Рассмотрим основные, самые важные теги.

<!—…—> — одиночный тег, внутри которого размещается комментарий. Комментарий — это текст, который не обрабатывается браузером. Внутри тега можно писать, что угодно, даже другие теги — работать они не будут, на экране не отобразятся. Разработчики комментируют код либо чтобы другим веб-мастерам было проще в нём разобраться, либо чтобы спустя продолжительное время его быстро смогли понять они сами.
<html>, <!DOCTYPE>, <head>, <body>, <title> — теги, которые должны присутствовать в любом приличном HTML-документе (подробнее см. «Как создать сайт в Блокноте»).
<meta> — тег содержит вспомогательную информацию для браузеров и поисковиков. Внутри него можно прописать ключевые слова, описание страницы, кодировку документа, имя автора и т. д.

<script> содержит ссылку на файл сценария или сам код.
<style> — тег, задающий стиль документа и/или его элементов с помощью CSS. HTML-документ может содержать множество тегов <style>, определяющих разные стили разных частей страницы.
<header> — полная противоположность <footer>, его дополняющая. Тег задаёт «шапку» (заголовок) раздела или всей страницы.
<footer> хранит в себе «ноги» сайта или раздела. Внутри него можно разместить вспомогательную информацию, копирайт, контактные данные и т. д.
<main> содержит основной контент страницы. Ни шапку, ни блок меню, ни «ноги» сайта, а то, ради чего страница создавалась. Например, на странице, которую вы сейчас читаете, внутри <main> должна располагаться как раз эта статья.
<a> предназначен для создания ссылок. Ссылки — корень гипертекста, поэтому им посвящена отдельная статья.
<img> нужен для добавления на веб-страницу картинок (к вашим услугам посвящённая этому действу статья).
<blockquote>, <br>, <hi1>-<hi6>, <hr>, <i>, <p>, <s>, <strong>, <ins> и другие теги форматирования текста составляют большую группу HTML-тегов, о них рассказывает статья «Форматирование текста в HTML».
<div> — блочный элемент. Текст внутри <div></div> форматируется с помощью CSS (каскадных таблиц стилей, которым посвящена вторая часть самоучителя).
<span>. У вас есть абзац <p> или блок <div>. Текст в нём оформлен в едином стиле, но вы бы хотели, не нарушая структуры, сделать так, чтобы несколько слов имели другой размер шрифта или цвет. Именно для таких ситуаций и предназначен тег <span>.
<ol>, <ul>, <li> — теги списков. Маркированные, нумерованные — работа этих тегов. Есть ещё списки определений, за которые отвечают теги <dd>, <dt> и <dl>, но подробно обо всей это шестёрке вы узнаете из статьи «Создание списков».
<table>, <tbody> , <thead>, <td>, <th> и <tr> используются при создании таблиц и подробно рассматриваются в отдельной статье.
<form> — тег, добавляющий странице интерактивности, то есть позволяющий пользователю взаимодействовать с веб-сайтом. Конечно, форме необходим обработчик, но зато с помощью тегов внутри <form></form> вы можете создать интерфейс. Флажки, кнопки, переключатели, поля ввода и другие объекты, которые требуют от вас активных действий — всё это элементы формы, код которых размещается внутри контейнера <form>.
<button> — тег, создающий интерактивную кнопку. Чтобы при нажатии на неё что-нибудь произошло, кнопка должна находиться в форме (располагаться между тегами <form></form>).
<input> создаёт элементы формы: переключатели, флажки, кнопки, всевозможные поля ввода. Вставляется в контейнер <form>. Но зачем нам тогда отдельно <button>, если есть универсальный <input>? <button> позволяет создать кнопку с расширенными параметрами. Например, на кнопке <button> можно разместить картинку. На элементе, созданном через <input>, такого сделать нельзя.
<menu> и <command> — теги создания меню в HTML 5. <menu> — это контейнер, внутри которого помещаются элементы <command>, добавление которых и приводит к созданию пунктов меню. Довольно интересная парочка. Например, с её помощью вы можете создать собственное контекстное меню для страницы или отдельного её элемента.
<textarea> — ещё один тег формы, создающий в ней большое поле, в которое можно вводить не одну строку текста, а целые абзацы.

Полезные ссылки:

Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
Вёрстка сайта с нуля 2.0 — полноценный платный курс;
Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Смотрите также

Основные HTML-теги

Атрибуты HTML-тегов

HTML тег html

❮ Предыдущий Полный справочник HTML Далее ❯

Пример

Простой HTML-документ:

Название документа

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

Это абзац.

Попробуйте сами »

Определение и использование

Тег представляет корень документа HTML.

Тег является контейнером для всех остальных элементов HTML (кроме тег ).

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

Поддержка браузера

Элемент
	Да	Да	Да	Да	Да

Атрибуты

Атрибут	Значение	Описание
xмлн	http://www. w3.org/1999/xhtml	Указывает атрибут пространства имен XML (если вам нужно, чтобы ваш контент соответствовал XHTML)

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Связанные страницы

Учебник по HTML: Введение в HTML

Справочник по HTML DOM: Объект HTML

Настройки CSS по умолчанию

Большинство браузеров отображают элемент со следующими значениями по умолчанию:

html {
display: block;
}

html:focus {
контур: нет;
}

❮ Предыдущий Полный справочник HTML Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.

CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top4 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Авторское право 1999-2022 по данным Refsnes. Все права защищены.
W3Schools работает на основе W3.CSS.

Наиболее часто используемые теги в HTML

HTML содержит множество предопределенных тегов. Некоторые из них описаны ниже:

Тег структуры документа:

Тег HTML : Это корень документа HTML, который используется для указания того, что документ является HTML.

Синтаксис:

  Операторы...

Code:

HTML

< html >

< head >

< title >Title вашей веб-страницы title >

head >

0029 < body >HTML web page contents body >

html >

Output :

Тег заголовка: Тег заголовка используется для хранения всех элементов заголовка в файле HTML. Он содержит заголовок, стиль, мета-тег и т. д.

Синтаксис:

  Операторы...

Код:

HTML

< HEAD > Содержит элементы, описывающие документ .

Тег body: Используется для определения тела документа HTML. Он содержит изображения, таблицы, списки и т. д.

Синтаксис:

  Операторы...

Code:

`HTML`

< body >The content of your HTML page body >

Output :

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

Синтаксис:

  Заявления...

Code:

`HTML`

< title >tab name title >

Output :

Content тег контейнера:

Тег заголовка: Используется для определения заголовка HTML-документа.

Синтаксис:

  Заявления...  
  Утверждения...  
  Утверждения...  
  Утверждения...  
  Утверждения...  
  Утверждения...

Code:

`HTML`

< h2 >Heading 1 h2 >

< h3 >Heading 2 H3 >

< H4 > Заголовок 3 H4 >

< H5 >. h5 >

< h5 >Heading 5 h5 >

< h6 >Heading 6 h6 >

Вывод:

Тег абзаца: Используется для определения содержимого абзаца в документе HTML.

Синтаксис:

  Заявления ...

Код:

`HTML`

< P > Geeksforgeeke: Portal Sciplic Sciention 999999289928 > > > Geeksforgeeks: Computer Science.

Вывод:

Тег выделения: Используется для отображения выделенного текста.

Синтаксис:

  Операторы...

Code:

`HTML`

< em >GeeksforGeeks em >

Output :

Bold тег: Используется для выделения жирным шрифтом содержимого в HTML-документе.

Синтаксис:

  Операторы...

Код:

`HTML`

< b >Bold word b >

Output :

Italic tag: It is используется для написания содержимого курсивом.

Синтаксис:

  Заявления...

Код:

`HTML`

< i >GeeksforGeeks i >

Output :

Small (text) tag: It is used to set the мелкий размер шрифта контента.

Синтаксис:

  Операторы...

Код:

`HTML`

5 
50028 <  Small  > Пример   Small  >

Выход:

Синтаксис:

  Заявления . ..

Код:

`HTML`

< 899999999999999999999999999999999> > > > > > > > > > > > > > > > > > > > > > > > > > > > > > .0029 u >

Вывод:

Используется для представления удаленного текста. Он пересекает текстовое содержимое.

Syntax:

  Statements...

Code:

`HTML`

< strike >geeksforgeeks strike >GeeksforGeeks

Вывод:

Тег привязки к одной странице 7.

Синтаксис:

  Заявления ...

Код:

Выход:

 
 77777777777777777777777 годы: 
 
 677777777777777777777777777777
 
 77 70003
 
 6. используется для перечисления содержимого.
  Синтаксис: 
  Заявления ...  
  Код: 
 HTML 
  <  LIL  > LIF > LIT > LIL > LIL > LIL > LIL > LIF > LIF > LIF > LIT.  > 
  <   li   >List item 2  li   > 
  Output : 
  
  Ordered List tag:  Используется для перечисления содержимого в определенном порядке.
  Syntax:   
  Statements... 
 
  Code:   
 HTML 
  <   ol   > 
          <   li   >Элемент списка 1  li   > 
          <   li   >List item 2  li   > 
          <   li   >List item 3  li   > 
          <   li   > List item 4  li   > 
    ol   > 
  Output : 
  
  Тег неупорядоченного списка:  Используется для перечисления содержимого без порядка.
  Syntax:   
  Statements... 
 
  Code:   
 HTML 
  <   ul   > 
          <   li   >Элемент списка 1  li   > 
          <   li   >List item 2  li   > 
          <   li   >List item 3  li   > 
          <   li   >List item 4  li   > 
    ul   > 
  Output : 
  
  Тег комментария:  Используется для установки комментария в HTML-документе. В браузере его не видно.
  Синтаксис:   
  
  Код:    
  Тег Scrolling Text:  Используется для прокрутки текста или изображения.
  Синтаксис:   
  Операторы...  
  Код:   
 HTML 
  <   marquee   bgcolor   =   "#cccccc"   loop   =   "-1" 
  scrollamount   =   "2"   width   =   "100%"   > 
  Example Marquee  marquee   > 
  Output : 
  
  Тег центра:  Используется для размещения содержимого в центре.
  Syntax:   
  Statements...  
  Code:   
 HTML 
  <   center   >GeeksforGeeks  center   > 
  Вывод: 
  
  Тег шрифта:  Используется для указания размера шрифта, цвета шрифта и семейства шрифтов в документе HTML.
  Syntax:   
  Statements ...  
  Code:   
 HTML 
  <   font   face   =   "Times New Roman"   >Пример  шрифт   > 
  Вывод: 
  
  Пустой (не контейнер) Теги:    
  
  Тег разрыва строки:  Используется для разрыва строки.
  Syntax:   
 
 
  Code:   
 HTML 
  GeeksforGeeks<   br   >A computer science portal 
  Output : 
  
  Тег изображения:  Используется для добавления элементов изображения в документы HTML. 
  
  Syntax:   
  
  Code:   
 HTML 
  <   img   src   =   "gfg.PNG"   alt   =   "Изображение GeeksforGeeks"   > 
  Вывод: 
  
  Тег ссылки:  Используется для ссылки на контент из внешнего источника.
  Syntax:   
  
  Code:    
 HTML 
  <   head   > 
  <   link   rel   =   "таблица стилей"   тип   =   "текст/css"   href   =   "style.css"  > 
    HEAD  >

4 366 3. документ.
Syntax:

Code:

HTML
< hr width = "100%" size = "5" />
Output :

Meta tag: It is used to specify описание страницы. Например, последний модификатор, авторы и т. д.
Синтаксис:
Заявления ...
Код:
HTML 5 5
0009 < meta name = "Description"

content = "Description of your site" >

< meta name = "Ключевые слова"

Содержание = "Ключевые слова, описывающие ваш сайт" >

9008
9008
9008>0193

Тег Table: Тег table используется для создания таблицы в HTML-документе.

Syntax:

Statements...

Code:
HTML
< table border = "4 " cellpadding = "2" Cellspacing = "2" ширина = "50%" >
< tr > < td >Column 1 td >
< td > Столбец 2 TD > TR > Таблица >
Выход:
3
9003
. 4 Тег Tr: Используется для определения строки таблицы HTML.
Syntax:
Statements...
Code:
HTML
< table >
   < tr >
     < th >Месяц th >
     < th >Savings th >
   tr >
   < tr >
< TD > Январь TD >
< TD
0029 >$100 td >
   tr >
table >
Output :

й тег: Определяет ячейку заголовка в таблице. По умолчанию он устанавливает содержимое полужирным шрифтом и по центру.
Синтаксис:
Операторы ...
Code:
HTML
< table >
< tr >
    < th >Month TH >
< TH > Экономия TH >
>
0029 tr >
< tr >
    < td >January td >
    < TD > $ 100 TD >
TR >
. 0029 таблица >
Вывод:

Td 3 тег.
Syntax:
Statements ...
Code:
HTML
< table >
   < TR >
< TD > Cell A >
9009 <> 9009 <> 9009 > > > . > TR > Таблица >
:
: 9008
: 9008
: 9008
: 9008
96: :.0037

Теги ввода:

Тег формы: Используется для создания HTML-формы для пользователя.
Syntax:

Statements ...

Code:
HTML
< form action = "mailto :you@yourdomain. com " >
   Name: < input name = "Name" value = "" size = "80" >< br >
Электронная почта: < Вход Имя = "Электронная почта" Значение = "" Size = "" Размер = "" Размер = "" .0029 BR >
< BR > < Центр > < тип > < > < > = = = = = = = = = = = = = hail >
ФОРМА >
Выход:
. Вход.
Syntax:

Code:
HTML
< form method = Пост Действие = "/cgibin/example.cgi" >
< Вход Тип = " " = " " = ".0029
семейство шрифтов: Verdana; вес шрифта: полужирный;
Размер шрифта: 12 пикселей; background-color: #72a4d2;"
size = "10" maxlength = "30" >
< input type = "Отправить" значение = "Отправить" >
Форма >
Выход:
Опция по выпуску.
Синтаксис:
<Опция> Операторы ...
Код:
HTML
< 8999999955
< 88999999998 9009 < 889999999998 9009 < 88999999998
< 899999999998 9009 .0029 = post action = "/cgibin/example.cgi" >
< center > Select an option:< select >
< Опция > Опция 1 Опция >
< Опция Выбранное> Опция 2 Вариант > > . 0029
< option >option 3 option >
form >
Output :

Тег радиокнопки: Используется для выбора только одного варианта из заданных вариантов.
Синтаксис:
option_value
Код:
HTML
< Форма Метод = POST ДЕЙСТВИЯ = POST . Select an option:< br >
< input type = "radio" name = "option" > Option 1
< input type = "radio" name = "option" checked> Option 2
< input type = "radio" name = "option" > Option 3
Output :

Тег кнопки-флажка: Используется для выбора опции из заданных опций.
Syntax:

Code:
HTML
< form >
   GeeksforGeeks:< br >
   Посещено< Вход Тип = «Флажок» Имя = "CH" Значение = ", как" . NotVisited< input type = "checkbox" name = "ch" value = "Not visited" >
< form >
Output:

Supported Browsers:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
HTML является основой веб-страниц и используется для разработки веб-страниц путем структурирования веб-сайтов и веб-приложений.

Что такое тег html: Тег | htmlbook.ru

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

Парные и одиночные теги HTML

Вложенные элементы

Пробельные символы

Что такое HTML-теги — шпаргалка по основным меткам

Какими бывают теги?

Основные HTML-теги

HTML тег html

Пример

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

Определение и использование

Поддержка браузера

Атрибуты

Глобальные атрибуты

Связанные страницы

Настройки CSS по умолчанию

ВЫБОР ЦВЕТА

Лучшие учебники

Основные ссылки

Наиболее часто используемые теги в HTML

HTML

HTML

HTML

HTML

Заявления...

Утверждения...

Утверждения...

Утверждения...

Утверждения...

Утверждения...

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML 5 5

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

Добавить комментарий Отменить ответ

`HTML`

`HTML`

`HTML`

`HTML`

`HTML`

`HTML`

`HTML`

`HTML`

`HTML`

`HTML`