Html что это значит – HTML : ,

Что такое HTML и зачем это нужно.

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

Например, я открою страницу поисковой системы Яндекс.

Вся графика и текст, которую вы видите на странице, формируется при помощи HTML-кода.

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

По сути, все команды языка HTML, которые вы видите на изображении выше, это обычный текст, который может быть написан в любом текстовом редакторе. Изменив у текстового файла расширение на *.html (как это сделать мы поговорим позже) мы получаем полноценную веб-страницу, которую может обрабатывать браузер.

Теперь давайте разберемся с самим  определением и рассмотрим, что оно означает.

HTML

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

Язык.

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

Как у любого языка, в HTML есть слова (команды) и правила написания этих слов (синтаксис языка).

Разметка.

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

HTML код позволяет «разметить» веб-страницу на отдельные элементы и сообщить браузеру какой элемент чем является.

Например, такая форма записи:

<p>Абзац</p>

Сообщает браузеру о том, что он имеет дело с абзацем.

А такая форма записи:

<h2>Заголовок</h2>

Говорит о том, что элемент является заголовком.

Из этого следует, что HTML не отвечает за внешний вид и оформление документа.

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

Страница со стилями оформления:

Та же самая страница, но с отключенными стилями (используется только один HTML-код):

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

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

Гипертекст.

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

Ссылка – это такой элемент на странице, который делает возможным открытие другой части текущей страницы или совершенно другой страницы при клике по нему.

Приставка «гипер» означает то, что при клике на ссылку может открываться другой ресурс (страница) в сети интернет, который может располагаться на другом сервере.

HTML – это язык, который разрабатывался специально для того, чтобы создавать страницы, которые содержат гиперссылки.

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

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

webgyry.info

«Что такое теги в HTML? Какой тег определяют видимую часть документа? Содержимое какого тега можно увидеть в заголовке браузера?» – Яндекс.Знатоки

Html – это не язык программирования, это общепринятый язык разметки текста в интернете. Называется все это хитрее («язык гипертекстовой разметки»), но если вы хотите «хитрее», просто ступайте в «Википедию». Я буду рассказывать об этом языке с вершин своего опыта и своими словами.

Итак, важно понимать, что html – это не язык программирования. В нем нет логических операторов (и вообще нет операторов). Следует сказать, что на сегодняшний день Html неприлично разросся, в нем тысячи тегов.

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

В целом без html не получится создать сайт. С другой стороны, с помощью html можно создать простейший сайт. Я как-то создала себе сайт-визитку на «голом» html. Это были времена, когда я только начинала изучение web-дизайна.

Отмечу, что если вы интересуетесь html, чтобы сделать себе сайт, помните: знать html совсем не обязательно!

Сейчас существует огромное число конструкторов сайтов. Например, исчерпывающий список конструкторов сайтов можно найти вот здесь https://otzyvmarketing.ru/category/site-constructors/. Сходите по ссылке, почитайте краткие описания и отзывы о сервисах. Я уверена, что вы сможете найти себе наиболее подходящий конструктор. Вы сможете создать себе сайт за полчаса.

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

Отвечу на ваши дополнительные вопросы:

· видимую часть документа определяет тег <body>,

· в заголовке браузера можно увидеть содержимое тега <title>.

Даже если просто говорить о гипотетической разработке сайтов на «голом» html (чем никто, конечно, не занимается), невозможно не сказать о файле стилей css.

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

В современном html принято выносить все это описание в файлы стилей. В самом html должны быть только ссылки на эти стили.

Надеюсь, мой ответ смог вам помочь. Я постаралась изложить в ответе суть. Конечно, я могла забыть какие-то важные вещи, но формат не позволяет мне ответить досконально. Желаю вам удачи и всего хорошего! Если вы хотите у меня что-то спросить или, наоборот, высказать свою точку зрения, оставляйте свои комментарии под моим ответом!

yandex.ru

Элементы HTML — Википедия. Что такое Элементы HTML

Эта статья посвящена в основном элементам HTML. Чтобы узнать о формате элементов Википедии, см. Википедия:Как редактировать статью и m:Help:HTML in wikitext/ru

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

Структура HTML-документа

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

<p>Текст между двумя тегами - открывающим и закрывающим.</p>
 <a href="http://www.example.com">Здесь элемент содержит атрибут href.</a>
А вот пример пустого элемента: <br>

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит примерно так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.

Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги заголовка (

Варианты DOCTYPE для HTML 4.01

• Строгий (Strict): не содержит тегов, помеченных как «устаревшие» или «не одобряемые» (deprecated).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

• Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

• С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DOCTYPE для HTML 5

В отличие от предыдущих версий тег всего один [1]

Основные элементы

Теги и их параметры нечувствительны к регистру. То есть <A HREF=»http://example.com»> и <a href=»http://example.com»> означают одно и то же.

В последних версиях HTML практически у каждого тега огромное число необязательных параметров — обычно не меньше 15. Мы приводим только основные параметры тегов.

Гиперссылки

<a href="filename" target="_self">название ссылки</a>

• Атрибут href задаёт значение адреса документа, на который указывает ссылка.
• filename — имя файла или адрес Internet, на который необходимо сослаться.
• название ссылки — название гипертекстовой ссылки, которое будет отображаться в браузере, то есть показываться тем, кто зашёл на страницу.
• target — задаёт значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:
  • _top — открытие документа в текущем окне;
  • _blank — открытие документа в новом окне;
  • _self — открытие документа в текущем фрейме;
  • _parent — открытие документа в родительском фрейме.

Значение по умолчанию:

Якорь

Тот же элемент используется для создания так называемых «якорей» (anchor), которые могут потом использоваться в гиперссылках, направленных на какой-то определённый элемент страницы. Например:

<!DOCTYPE html> 
 <html>
  <head>
    <meta charset="utf-8">
    <title>Якорь внутри документа</title>
  </head>
  <body>
   <p><a name="top"></a></p>
   <p>текст</p>
   <p><a href="#top">Наверх</a></p>
  </body>
</html>

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

Так-же якорем в современных браузерах может служить id любого элемента.

Текстовые блоки

• <h2> … </h2>, <h3> … </h3>, … ,<H6> … </H6> — заголовки 1, 2, … 6 уровня. Используются для выделения частей текста (заголовок 1 — самый крупный, 6 — самый мелкий).
• <P> — новый абзац. Можно в конце абзаца поставить </P>, но это не обязательно.
• <BR> — новая строка. Этот тег не закрывается (то есть не существует тега </BR>)
• <HR> — горизонтальная линия
• <BLOCKQUOTE> … </BLOCKQUOTE>  — цитата. Обычно текст сдвигается вправо.
• <PRE> … </PRE>  — режим preview (preformatted text). Пробельные символы остаются там, где они есть в оригинальном документе (в других тегах игнорируются). Внутри могут обрабатываться внутристроковые теги кроме img, object, big, small, sup и sub.
• <DIV> … </DIV>  — блок (обычно используется для применения стилей CSS)
• <SPAN> … </SPAN>  — строка (обычно используется для применения стилей CSS)

Форматирование текста

• <EM> … </EM>  — логическое ударение (обычно отображается курсивным шрифтом)
• <STRONG> … </STRONG>  — усиленное логическое ударение (обычно отображается жирным шрифтом)
• <I> … </I>  — выделение текста курсивом
• <B> … </B>  — выделение текста жирным шрифтом
• <U> … </U>  — подчёркивание текста
• <S> … </S> (или <STRIKE> … </STRIKE> )— зачёркивание текста
• <BIG> … </BIG>  — увеличение шрифта
• <SMALL> … </SMALL>  — уменьшение шрифта
• <BLINK> … </BLINK>  — мигающий текст. Внимание! Этот тег не работает в браузере Internet Explorer версий 5 и ниже без применения JavaScript
• <MARQUEE> … </MARQUEE>  — сдвигающийся по экрану текст.
• <SUB> … </SUB>  — подстрочный текст. Например, H<SUB>2</SUB>O создаст текст H₂O.
• <SUP> … </SUP>  — надстрочный текст. Например, E=mc<SUP>2</SUP> создаст текст E=mc².
• <FONT параметры> … </FONT>  — задание параметров шрифта. У этого тега есть следующие параметры:
  • COLOR=цвет — задание цвета. Цвет может быть задан в шестнадцатеричной форме как #rrggbb (первые 2 шестнадцатеричные цифры задают красную компоненту, следующие 2 — зелёную, последние 2 — синюю) или названием.
  • FACE=шрифт задание гарнитуры шрифта
  • SIZE=размер задание размера шрифта. Размер от 1 до 7: стандартный по умолчанию 3. Есть много способов изменить стандартный размер.
  • SIZE=+изменение или SIZE=-изменение — изменение размера шрифта от стандартного. Например, +2 означает размер на 2 больше стандартного.

Например,

Сигналом к началу атаки являются
<U>три</U> <FONT SIZE="+2">больших</FONT> <FONT COLOR="green">зелёных</FONT> свистка.

создаст текст

Сигналом к началу атаки являются три больших зелёных свистка.

Списки

 <UL>
   <LI> первый элемент </LI>
   <LI> второй элемент </LI>
   <LI> третий элемент </LI>
 </UL>

создаёт список

• первый элемент
• второй элемент
• третий элемент

Если вместо <UL> (Unordered List — ненумерованный список) поставить <OL> (Ordered List — нумерованный список), список получится нумерованным:

1. первый элемент
2. второй элемент
3. третий элемент

У этих тегов есть параметры:

type = "тип" 

где тип — форма:

в <UL>  — символов

• square — квадрат
• circle — окружность
• disk — круг: по умолчанию

а в <OL>  — цифр или букв

• A или а (латинскими буквами) — буквенный список: соответственно заглавными или строчными буквами
• I или i — римские цифры: соответственно заглавными или строчными буквами (римскими цифрами отображаются числа с 1 по 3999, остальные — арабскими)
• 1 — арабские цифры: по умолчанию

пишется так:

<ol type="i">

<li> Первое </li>
 
<li> Второе </li>

<li> И т.д. </li>

</ol>

и создаст следующее:

1. Первое
2. Второе
3. И т. д.

Параметр start=»начало» (только для <OL> ), определяющий начало нового отсчёта: например, если нужно не 1, 2, 3, а 24, 25, 26

Пишется так:

<ol start="24">

<li> Двадцать четыре </li>

<li> Двадцать пять </li>

<li> И т.д. </li>

и создаст следующее:

24. Двадцать четыре
25. Двадцать пять
26. И т. д.

и, наконец для тега <LI> параметр value="следующий" — если необходимо перескочить с одной цифры на другую: например, не 1, 2, 3, 4, а 1, 2, 22, 23

<ol>

<li> Один </li>

<li> Два </li>

<li value="22"> Двадцать два </li>

<li> Двадцать три </li>

создаст следующее:

1. Один
2. Два
22. Двадцать два
23. Двадцать три

Наконец, третьим, и последним, списком является список определений:

 
 <DL>
  <DT> Кошка </DT> <DD> мяукающее домашнее животное </DD>
  <DT> Кот </DT> <DD> муж кошки </DD>
  <DT> Крокодил </DT> <DD> большой африканский зверь с острыми зубами </DD>
 </DL>

создаст следующее:

Кошка

мяукающее домашнее животное

Кот

муж кошки

Крокодил

большой африканский зверь с острыми зубами

Между прочим, теги <LI>, <DT>, <DD> можно и не закрывать.

Различия в отображении нумерованных списков

При неположительных значениях в нумерации браузеры ведут себя по-разному. Например, Internet Explorer игнорирует value=0, value=-1 и т.д., другие же браузеры, как Chrome, Firefox, отображают заданное значение. При этом Internet Explorer не игнорирует start=0, start=-1 и т.д., т.е. начать список с неположительного значения он может, но перескочить в нумерации на неположительное значение не может.

<ol start=-2><li><li value=0><li value=2></ol>

В буквенном списке (type=A или type=a) неположительные значения одни браузеры, как Chrome, Firefox, отображают цифрами, а Internet Explorer (в режиме Quirks mode, т.е. если на странице не указана версия HTML 4.01 или 5 в тэге !DOCTYPE HTML) отрицательные значения отображает буквами со знаком “минус”, а ноль — символом @.

<ol type=A start=-1><li><li><li></ol>

Пустое или нечисловое значение (value=, value=A, value=B) одни браузеры, как Chrome, Firefox, игнорируют, а Internet Explorer воспринимает как value=1.

<ol start=-2><li><li value=B><li value=2></ol>

Имеются различия при отображении чисел римскими цифрами (type=I или type=i), т.к. Internet Explorer (в режиме Quirks mode, т.е. если на странице не указана версия HTML 4.01 или 5 в тэге !DOCTYPE HTML) некоторые числа отображает неправильно.

<ol type=I start=3300><li><li><li><li></ol>

Все числа из интервала с 1 по 1880 Internet Explorer отображает правильно, а из интервала с 1881 по 3999 — не все. Для 603 чисел, 67 групп по 9 чисел (xxx1—xxx9), в запись римскими цифрами не попадает младшая цифра. И это, скорее всего, не для того, чтобы укоротить длинную запись, т.к. 3888 — число с самой длинной (в интервале с 1 по 3999) записью римскими цифрами (MMMDCCCLXXXVIII) — отображается правильно.

В таблице крестиком отмечены группы неправильно отображаемых в Internet Explorer (в режиме Quirks mode) чисел:

Объекты

• EMBED — вставка различных объектов: не-HTML документов и media-файлов
• APPLET — вставка Java-апплетов
• SCRIPT — вставка скриптов.

Изображения

• IMG — вставка изображения. Этот тег не закрывается.
  • SRC — имя или URL
  • ALT — альтернативное имя (отобразится, если в браузере запретить отображать картинки)
  • TITLE — краткое описание изображения (отобразится при наведении курсора на картинку)
  • WIDTH, HEIGHT — размеры (если не совпадают с истинными размерами картинки, то изображение «растянется» или «сожмётся»)
  • ALIGN — задаёт параметры обтекания текстом (top, middle, bottom, left, right)
  • VSPACE, HSPACE — задают размеры вертикального и горизонтального пространства вокруг изображения

Пример:

<IMG SRC=url ALT="текст" TITLE="текст">

Изображение можно сделать ссылкой:

<A HREF=url ><IMG SRC=url></A>

Карта изображений

• <MAP>…</MAP> — создание карты изображений позволяющей хранить в одном изображении несколько ссылок.

Пример:

<IMG usemap="#somemap" src="url">
<MAP name="somemap">
    <AREA shape="rect" coords="6, 7, 140, 196" href="url1">
    <AREA shape="circle" coords="239, 98, 92" href="url2">
    <AREA shape="polygon" coords="386,16, 344,56, 350,189, 385,132, 489,190, 496,74" href="url3">
</MAP>

Таблицы

• TABLE — создание таблицы. Параметры тега:
  • BORDER — толщина разделительных линий в таблице
  • CELLSPACING — расстояние между клетками
  • CELLPADDING — отступ от рамки до содержимого ячейки.
• CAPTION — заголовок таблицы (этот тег необязателен)
• TR — строка таблицы
• TH — заголовок столбца таблицы (этот тег необязателен)
• TD — ячейка таблицы
• height — высота таблицы
• width — ширина таблицы

Так, например,

<TABLE BORDER="1" CELLSPACING="0">
  <CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION>
  <TH> Год </TH> 
  <TH> Улов </TH>
  <TR>
    <TD> 1997 </TD> 
    <TD> 214 </TD>
  </TR>
  <TR>
    <TD> 1998 </TD> 
    <TD> 216 </TD>
  </TR>
  <TR>
    <TD> 1999 </TD> 
    <TD> 207 </TD>
  </TR>
</TABLE>

Создаст таблицу:

Улов крокодилов в Мумбе-Юмбе

Год	Улов
1997	214
1998	216
1999	207

У тега TABLE есть ещё параметр CELLPADDING. Он определяет расстояние в пикселях между рамкой ячейки и её содержимым. Например, если заменить первую строку таблицы на

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5">

таблица получится такой:

Улов крокодилов в Мумбе-Юмбе

Год	Улов
1997	214
1998	216
1999	207

Другой параметр тегов TABLE, TR, TH, TD — ALIGN. Он определяет выравнивание. Возможные значения — center (по центру), left (по левому краю), right (по правому краю).

Параметр ALIGN в TD или TH определяет выравнивание для содержимого внутри данной ячейки, в TR — для содержимого всех ячеек строки, TABLE — для самой таблицы на страничке. Для каждой ячейки берётся выравнивание из TD или TH, если оно не задано — из TR, если и оно не задано — по центру для TH или по левому краю для TD.

Например, если заменить первые строки таблицы на

<TABLE BORDER="1" CELLSPACING="0" ALIGN="center">
<CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION>
<TH> Год </TH>
<TH> Улов </TH>
<TR>
<TD> 1997 </TD> <TD ALIGN="CENTER"> 214 </TD>

таблица получится такой:

Улов крокодилов в Мумбе-Юмбе

Год	Улов
1997	214
1998	216
1999	207

Незакрытые теги TD, TR и TH приводят к некорректному отображению, особенно при работе со вложенными таблицами.

Формы

Создание форм в HTML является довольно сложным делом. Здесь приводятся только названия основных тегов.

• FORM — создание формы
• INPUT — элемент ввода (может иметь разные функции — от ввода текста до отправки формы)
• TEXTAREA — текстовая область (многострочное поле для ввода текста)
• SELECT — список (обычно в виде выпадающего меню)
• OPTION — пункт списка

Символы

Чтобы создать символ, необязательно искать его на клавиатуре: можно просто набрать тег; например, чтобы получить ¢, надо набрать ¢, неразрывный пробел —  , ударение — ́ и т. д.

Названия цветов

В HTML определены следующие цвета.

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

Клавиатурные символы ‘ и » в русском языке кавычками не являются. Также неправильно на сайтах заменять №, ©, ®, ™, °C на N, (c), (R), TM, C.

Дефис, тире и минус — три разных знака.

1. Клавиатурный символ — называется дефис и используется внутри слов.
2. Минус шире дефиса. Он используется для записи отрицательных чисел и операции вычитания.
3. Тире ещё шире, чем минус. Оно используется между словами и отбивается пробелами, причём спереди — неразрывным. Для обозначения числовых интервалов тоже используется тире, но пробелами не отбивается.

Более подробно: Артемий Лебедев. Тире, минус и дефис, или Черты русской типографики. Ководство (15 января 2003). Архивировано 24 августа 2011 года.

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

Символы <, > и & нельзя отобразить в HTML обычным образом, потому что они имеют специальный смысл. Для их отображения всегда используются &lt;, &gt; и &amp; соответственно.

Большинство спецсимволов см. на сайте about.com.

Ссылки

wiki.sc

HTML справочник | Теги HTML

HTML справочник — это список HTML тегов определенных в спецификации HTML 5. Список тегов редактируется по мере изменения спецификации (обновляется информация и о самих тегах и об их атрибутах).

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

Вставляемый контент

Интерактивные элементы

Комментарии

Корневой элемент

Метаданные документа

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

Разделы документа

Списки

Ссылки

Сценарии

Таблицы

Текст

Формы

Теги html

Если вы только собираетесь начать изучать HTML, то одна из первых вещей, которые следует запомнить – специальные термины. Два из них будут встречаться наиболее часто – это «тег» и «элемент».

Термины «HTML элемент» и «HTML тег» обычно используются как синонимы. Но в соответствии со спецификацией W3C элемент – это тег со всем его содержимым, включая открывающий и закрывающий теги. У некоторых элементов нет закрывающего тега, такие элементы называются одиночными или пустыми, но несмотря на то, что они не могут содержать в себе никакого контента, они все равно считаются полноценными элементами.

На страницах сайта понятия тега и элемента используются для обозначения одного и того же – структурной единицы языка HTML, которая применяется для разметки документа.

Если вы желаете узнать больше о создании веб страниц, тегах и их применении, то можете заглянуть в наш Самоучитель по HTML.

puzzleweb.ru

Что такое 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> — ещё один тег формы, создающий в ней большое поле, в которое можно вводить не одну строку текста, а целые абзацы.

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

www.seostop.ru

Теги по категориям | справочник HTML

basicweb.ru

Что такое href= «#» и почему он используется? — html

О гиперссылках:

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

Hash:

А хэш — # внутри гиперссылки указывает идентификатор элемента html, которому нужно прокручивать окно.

href="#some-id" будет прокручиваться до элемента на текущей странице, например <div>.

href="//site.com/#some-id" переместится на site.com и прокрутится до идентификатора на этой странице.

Прокрутите вверх:

href="#" не указывает имя идентификатора, но имеет соответствующее местоположение — верх страницы. Щелчок якоря с помощью href="#" переместит положение прокрутки вверх.

Посмотрите это демо.

Это ожидаемое поведение в соответствии с документацией w3.

Заполнители гиперссылок:

Пример, где гиперссылка имеет смысл, находится в шаблонных превью. На одностраничных демонстрациях для шаблонов я часто видел <a href="#">, так что якорный тег является гиперссылкой, но никуда не уходит. Почему бы не оставить свойство href пустым? Пустое свойство href на самом деле является гиперссылкой на текущую страницу. Другими словами, это приведет к обновлению страницы. Как я уже говорил, href="#" также является гиперссылкой и вызывает прокрутку. Поэтому наилучшее решение для гиперссылок-заполнителей на самом деле href="#!" Идея здесь заключается в том, что, надеюсь, это не элемент на странице с id="!" (кто это делает!?), и поэтому гиперссылка не обращается ни к чему — так что ничего не происходит.

О тегах привязки:

Еще один вопрос, который вам может быть интересно: «Почему бы просто не оставить свойство href?». Общий ответ, который я слышал, заключается в том, что свойство href требуется, поэтому оно должно присутствовать на якорях. Это ЛОЖЬ! Свойство href требуется только для привязки, чтобы фактически быть гиперссылкой! Прочитайте от w3. Итак, почему бы просто не оставить это место для заполнителей? Браузеры отображают стили по умолчанию для элементов и изменят стиль по умолчанию тега привязки, который не имеет свойства href. Вместо этого он будет рассматриваться как обычный текст. Это даже изменяет поведение браузера относительно элемента. Строка состояния (внизу экрана) не будет отображаться при наведении на якорь без свойства href. Лучше всего использовать значение href-заполнителя на якоре, чтобы убедиться, что оно рассматривается как гиперссылка.

Посмотрите эту демонстрацию, демонстрируя различия в стиле и поведении.

qaru.site