Что такое HTML? Понятие тега
Здравствуйте друзья. Этой статьей я хочу начать серию уроков и материалов посвященных языку программирования языку разметки гипертекста HTML.
Данный цикл статей будет пополняться по 1-му уроку каждую неделю. В них я буду подробно описывать конкретные технические моменты касающиеся самого языка и его взаимодействия с другими технологиями т.к. в нашем большем и могучем вебе все существует и работает в комплексе. Ну что-же, давайте же начнем первый урок?
Итак, начнем как положено с определения дабы внести ясность того с чем предстоит работать и что изучать.
Что же такое HTML?
HTML (‘HyperText Markup Language’) — это язык разметки гипертекста. Хорошо, определение классное, но что же это за разметка, и какого такого гипертекста? Ну давайте по порядку. Прежде всего в данном случае мы размечаем текст, который соответсвенно мы сначала печатаем, неважно где главное ,что этот текст иметься у нас на компьютере. Что подразумевает собой разметка текста? Ну тут просто, это банальное его форматирование, как например тут:
Хммм… почему я с краю? Зачем меня туда засунули, А?
Ооо какой я ваажный, только немного жирный.
Не жизнь а одна черная полоса
- раз
- два
- три
- И так далее.
Это как раз и есть пример той самой разметки, с этим разобрались. А что же такого гипертекстового в нем в этом тексте и HTML? Ну начать нужно, наверное, с истории самого языка:
Далеко-далеко в 1986 годах…
Думали я пойду все это рассказывать? Хе-е… я лучше в конце поделюсь с вами ссылкой на материал, чтобы при желании вы могли более подробно ознакомиться с его историей. Статья не резиновая, а краткость сестра таланта… да-да.
Почему же его называют язык гипертекстовый? Потому что позволяет связывать в единую сеть множество документов в сети интернет посредством гиперссылок. Думаю объяснять вам, что такое гиперссылки я не буду, вы же как-то перешли на мой блог нажав на подобную надпись dmkweb.ru.
Продолжим…
Что такое теги в HTML
Тэги-это метки в коде страницы, которые используются для указания браузеру, как он должен показывать ваш web-сайт.
Все тэги имеют одинаковый формат: они начинаются знаком «<» и заканчиваются знаком «>».
Как правило, все теги имеют 2 формата написания — открывающий тег: <html> и закрывающий: </html>. Различие в том, что в закрывающем имеется слэш «/».
Всё содержимое, помещённое между открывающим и закрывающим тэгами, является содержимым тэга.
В HTML также имеются тэги, которые являются и открывающими, и закрывающими. Эти тэги не содержат в себе текст, а являются метками, например, перенос строки выглядит так: <br/>.
Итак, кратко мы осветили, что же такое HTML. Так как же вам начать изучать его? Для этого необходимо изучать и писать
HTML — это тэги, и ничего кроме тэгов. Для изучения HTML нужно изучить различные тэги и пробовать создавать с помощью них веб страницы.
В дальнейшем мои статьи на данную тему помогут вам в этом. Ох чуть не забыл… вот обещанная история.
dmkweb.ru Права на контент защищены.HTML Основные теги
В языке HTML всё, что вы напишите в HTML-документе, будет выведено на экран браузера сплошным текстом, то есть браузер игнорирует переводы строк, а также несколько набранных вами подряд пробелов заменяются одним.
Теги — это управляющие команды, которые были придуманы для того, чтобы отформатировать текст, т.е. теги говорят браузеру о том, как именно нужно вывести на экран часть текста, заключенную в теги. Для создания тега между угловыми скобками вводится HTML-код, который предназначен только для браузеров. Посетители сайта не видят теги.
Как уже отмечалось выше, все теги начинаются с угловой скобки < и заканчиваются угловой скобкой > . После открывающей угловой скобки следует имя тега (команды).
Например, тег <em> предназначен для акцентирования текста, браузеры отображают такой текст курсивным начертанием. Когда браузер обнаруживает этот тег, он переключается на форматирование курсивным шрифтом текста, следующего за тегом.
Рассмотрим пример:
Этот текст обычный. <em> Этот текст курсивный.
Тег <em> называют начальным или открывающим тегом, что означает включение браузером определенной команды (в данном случае написание курсивным шрифтом). У большинства тегов есть пара в виде закрывающего тега, который отключает команду.
Закрывающий тег выглядит так же, как начальный, но начинается с слэша. Итак, конечный тег для выделения курсивным шрифтом — </em>.
Рассмотрим пример:
Этот текст обычный. <em> Внимание! Курсив. </em> Это снова обычный шрифт.
Как вы успели заметить, браузер последовательно анализирует HTML – документ в поисках команд (тегов) и применяет или отключает разные параметры форматирования текста. Браузер отформатированный текст (все, что не является тегом) отображает в своем окне.
| Процесс вставки тегов в обычный неформатированный текст называется разметкой HTML-документа, а теги — знаками разметки. При написании тегов не учитывается регистр букв, тег может быть прописан как строчными, так и прописными буквами, но всё же рекомендуется применение прописных букв. |
Ниже приведены примеры основных тегов HTML, с объяснением их использования, а также примеры их применения в HTML-документе.
Заголовки
Существует специальный тег для указания заголовков в HTML. Есть 6 уровней заголовков в HTML, начиная от <h2> для наиболее важных объявлений, до <h6> для наименее важных.
Вот они:
Пример HTML:
Попробуй сам<h2>Заголовок 1</h2>
<h3>Заголовок 2</h3>
<h4>Заголовок 3</h4>
<h5>Заголовок 4</h5>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
HTML абзацы
С помощью HTML тэга <p> Вы можете определить абзац.
Абзацы используются для логической группировки текста. Перед и после текста абзаца браузер автоматически отступает одну строчку.
Пример HTML:
Попробуй сам<p>Это абзац</p>
<p>Это другой абзац</p>
<p>Это третий абзац</p>
HTML ссылки
С помощью HTML тэга <a> создаются ссылки.
Ссылки используются для связывания HTML документов друг с другом. Нажав на ссылку пользователь будет перемещен на другой HTML документ, url которого указан в атрибуте href.
Атрибут href задает адрес документа, на который следует перейти.
Атрибуты используются для предоставления дополнительной информации о HTML-элементах.
Вставка изображений
С помощью HTML тэга <img> Вы можете вставить в HTML документ произвольное изображение.
Ширина и высота картинки может задаваться с помощью атрибутов width и height.
Пример HTML:
Попробуй сам
<img src="images/orange.jpg" alt="Апельсин">
| Обратите внимание: HTML-атрибуты будут подробно рассмотрены далее в данном учебнике. |
Please enable JavaScript to view the comments powered by Disqus.
Тег | HTML справочник
HTML тегиЗначение и применение
Гиперссылки (или просто «ссылки») определяются тегом <a> (HTML Anchor Element).
Основная функция ссылок заключается в том, что они позволяют переходить с одного HTML документа на другой, либо содержать адрес файла, предназначенного для открытия в браузере пользователя, или для его дальнейшего скачивания.Поддержка браузерами
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| charset | char_encoding | Не поддерживается в HTML5. Определяет кодировку, связанного документа. |
| coords | coordinates | Не поддерживается в HTML5. Определяет координаты ссылки. |
| download | filename | Если атрибут указан, то браузер не переходит по ссылке, а предлагает скачать документ, указанный в адресе ссылки. |
| href | URL | Задает URL страницы, или документа на которую ведёт ссылка. |
| hreflang | language_code | Определяет язык связанного документа на который ведёт ссылка. |
| media | media_query | Указывает, что документ на который ведёт ссылка адаптирован под определённые виды устройств. |
| name | section_name | Не поддерживается в HTML5. Задает имя якоря. Вместо этого атрибута используйте глобальный атрибут id. |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag | Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка). |
| rev | text | Не поддерживается в HTML5. Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка). |
| shape | default rect circle poly | Не поддерживается в HTML5. Определяет форму ссылки (использовался с атрибутом coords). Используйте вместо данного тега элемент <area>. |
| target | _blank _parent _self _top framename | Указывает, где открыть документ. |
| type | media_type | Указывает MIME-тип документа на который осуществляется переход. |
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример размещения ссылки в HTML документе<title> </head> <body> <a href = "http://www.yandex.ru">Найдется всё</a> </body> </html>
В браузере же это будет отображаться по умолчанию следующим образом: Найдется всё.
Атрибут href (аббревиатура от hyper reference) — это основной атрибут тега <a>, указывающий браузеру, URL-адрес страницы, куда ведет ссылка. Единый указатель ресурса (англ. Uniform Resource Locator, URL) — единообразный локатор (определитель местонахождения) ресурса.
Относительные и абсолютные пути ссылок
В приведенном выше примере используется абсолютный адрес пути. Название абсолютный связано с тем, что мы задаем полный веб-адрес страницы в качестве пути к файлу. Ниже приведены примеры указания абсолютных путей:
<a href = "https://www.yandex.ru">Содержимое элемента</a> <!-- указываем полный путь (протокол https) --> <a href = "http://www.yandex.ru">Содержимое элемента</a> <!-- указываем полный путь (протокол http) --> <a href = "//www.yandex.ru">Содержимое элемента</a> <!-- допускается указывать полный путь без протокола -->
Обращаю Ваше внимание, что в большинстве случаев, абсолютные пути ссылок применяются для страниц или файлов, которые находятся на других ресурсах (распологаются не на том же сервере, что и страница с которой ссылаются).
Если страница или файл на который ссылаются расположен на том же сервере, что и страница с которой ссылаются, то, как правило используются относительные адреса ссылок. Основная особенность относительных ссылок заключается в том, что они размещаются относительно корня сайта или относительно текущего HTML документа.
Путь относительно текущего документа
Предлагаю для начала разобраться с путями относительно текущего HTML документа. Независимо в каких дебрях находится файл, путь вы будете задавать относительно этого файла.
Пример подключения файлов:
<!DOCTYPE html> <html> <head> <title>Пример подключения файлов к HTML документу из той же папки<title> </head> <body> <img src = "image.png" alt = "someimage info"> <!-- размещаем изображение --> <a href = "page.html">Содержимое элемента</a> <!-- ссылаемся на страницу --> </body> </html>
Перейдем к следующему примеру, допустим у нас есть файл index.html, в этом же каталоге есть папка (каталог) с именем etc из которой нам необходимо подключить изображение и сделать ссылку на документ page.html:
<!DOCTYPE html> <html> <head> <title>Пример подключения файлов из дочернего каталога<title> </head> <body> <img src = "etc/image.png" alt = "someimage info"> <!-- размещаем изображение из дочернего каталога --> <a href = "etc/page.html">Содержимое элемента</a> <!-- ссылаемся на страницу, из дочернего каталога --> </body> </html>
Обратите внимание, как мы указываем путь к нашим файлам — мы задаем название каталога и через прямой слеш указываем название необходимого нам файла. Данный каталог является по отношению к текущему каталогу дочерним и чтобы подключить необходимые файлы мы спускаемся на один уровень ниже (название_каталога/необходимый_файл).
Ну и заключительный пример, в котором нам необходимо подключить к нашей странице изображение, которое находится в каталоге, который расположен на два уровня выше текущей страницы и необходимо добавить ссылку, которая находится на один уровень выше текущей страницы:
<!DOCTYPE html> <html> <head> <title>Пример подключения файлов из родительского каталога<title> </head> <body> <img src = "../../image.png" alt = "someimage info"> <!-- размещаем изображение, которое находится на 2 уровня выше --> <a href = "../page.html">Содержимое элемента</a> <!-- ссылаемся на страницу, которая находится на 1 уровень выше --> </body> </html>
Обратите внимание, что если файл находится в родительской папке, то необходимо использовать символы ../ это позволит подняться на один уровень вверх. Вы можете, используя символы ../ подниматься вверх пока не доберетесь до корневой папки Вашего сайта или жесткого диска.
Путь относительно корня сайта
Хочу сразу обратить ваше внимание, чтобы путь относительно корня сайта работал на локальном компьютере, то у вас должна быть установлена программная среда, которая позволяет эммулировать веб-сервер.
Если вы планируете создавать сайты и у вас нет среды для ваших тренировок, то рекомендую Вам скачать программный комплекс, предназначенный для локальной разработки, отладки и тестирования веб проектов. Я использую Open Server, он предназначен для пользователей, которые используют операционную систему Windows. В качестве аналога Open Server под Mac, могу предложить MAMP, если он вам не подойдет, можете попробовать выбрать другой.
Перейдем к следующему примеру, в котором нам необходимо подключить файлы, которые находятся на веб-сервере. На примере куска этого сайта, подключим из папок primer по одному изображению и одному html файлу:
Как и при использовании абсолютных адесов, способ задавать путь относительно корня сайта довольно-таки прост. Разница заключается лишь в том, что у нас отпадает необходимость указывать имя домена, ну и соответственно относительные пути используются только в рамках одного сервера.
<!DOCTYPE html> <html> <head> <title>Пример подключения файлов относительно корня сайта<title> </head> <body> <img src = "/html/primer/anyimage.png" alt = "someimage info"> <!-- размещаем изображение, которое находится на 2 уровня ниже относительно корня сайта --> <a href = "/html/primer/anypage.html">Содержимое элемента</a> <!-- ссылаемся на страницу, которая находится на 2 уровня ниже относительно корня сайта --> <img src = "/css/primer/anyimage.png" alt = "someimage info"> <!-- размещаем изображение, которое находится на 2 уровня ниже относительно корня сайта --> <a href = "/css/primer/anypage.html">Содержимое элемента</a> <!-- ссылаемся на страницу, которая находится на 2 уровня ниже относительно корня сайта --> </body> </html>
Обратите внимание, что необходимо указывать прямой слэш в начале пути, это сообщает браузеру пользователя, что путь начинается с корневого каталога.
Атрибут target
Атрибут target используется для того, чтобы указать браузеру, где необходимо открыть веб страницу. Следующий пример открывает документ в новом окне браузера:
<a href="http://yandex.ru" target="_blank">Поиск </a>
Ниже представлены все значения этого атрибута:
| Атрибут | Значение | _blank | Загружает страницу в новое окно браузера. |
|---|---|
| _self | Загружает страницу в текущее окно. Это значение по умолчанию. |
| _parent | Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self. |
| _top | Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self. |
| framename | Открывает ссылку в указанном фрейме. |
Работа с фреймами будет рассмотрена позднее в статье учебника «HTML фреймы».
Атрибут mailto
Использование атрибута «mailto» в HTML документе позволяет создать ссылку для отправки письма:
<a href = "mailto:[email protected]">Написать автору</a>
Для того, чтобы ссылки mailto корректно работали необходимо чтобы на компьютере или в браузере посетителя был настроен почтовый / веб клиент по умолчанию, иначе при клике на ссылку ничего не произойдет.
В значении атрибута можно сразу указать значения для заголовков (тема, копии, тело письма и т.п.). Пробелы и переносы строки нельзя вставить без кодирования:
<a href = "mailto:[email protected]?subject=Тема%20моего%20письма&[email protected]&body= Здравствуй%20уважаемый%20автор">Написать автору</a>
Где:
- subject—тема письма.
- cc—копия письма.
- bcc—скрытая копия письма.
- body—тело письма.
Допустимо указывать несколько адресов (либо не указывать вовсе):
<a href=" mailto:[email protected], mailto:[email protected] ">Написать автору </a>
Изображение как ссылка
Для того, чтобы использовать изображение в качестве ссылки, вам необходимо поместить изображение между тегами <a> </a>:
<!DOCTYPE html> <html> <head> <title>Использование изображения в качестве ссылки<title> </head> <body> <a href = "http://yandex.ru"> <img src="10.jpg" alt="Поиск в Яндекс"> <!-- размещаем изображение в качестве содержимого гиперссылки --> </a> </body> </html>
При этом при клике на картинку будет осуществлён переход по указанной ссылке:
Размещение файлов на сайте для скачивания
С выходом HTML 5 тег <a> обзавелся таким новым атрибутом как download, он сообщает браузеру пользователя, что необходимо скачать документ, указанный в адресе ссылки, а не переходить по ней.
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута download<title> </head> <body> <a href = "/path/to/file.mp3" download>Любимая песня</a> <!-- указываем файл, который предназначается для скачивания --> </body> </html>
Обращаю Ваше внимание, что к сожалению, в настоящее время еще не все браузеры поддерживают применение этого атрибута:
Если использовать только HTML, то единственный вариант, который позволит посетителям скачать, а не открыть, с вашего сайта, например, текстовый файл, это поместить его предварительно в архив (заархивировать файл). Алгоритм работы любого браузера такой, что если он не может открыть файл (не поддерживает формат), то он предлагает скачать / скачивает файл.
Отличия HTML 4.01 от HTML 5
В HTML 4.01 элемент мог быть как гиперссылкой, так и якорем, а в HTML5 элемент всегда гиперссылка (в случае отсутствия атрибута href является контейнером для гиперссылки). В HTML5 добавлено два новых атрибута и пять удалено.Значение CSS по умолчанию
a:link, a:visited {
color: (internal value); <!-- в зависимости от браузера пользователя -->
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value); <!-- в зависимости от браузера пользователя -->
}
Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
Атрибуты событий
Элемент поддерживает «атрибуты событий».
HTML теги| Тег | Описание |
|---|---|
| !, A | |
| <!—…—> | Добавляет комментарий в код документа |
| <!DOCTYPE> | Предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа) |
| <a> | Предназначен для создания ссылок |
| <abbr> | Указывает, что текст является аббревиатурой |
| <acronym> | Указывает, что текст является акронимом |
| <address> | Предназначен для хранения контактной информации автора |
| <applet> | Используется для вставки на страницу апплетов — небольших программ на языке Java |
| <area> | Определяет активные области изображения, которые являются ссылками |
| <article> | Задаёт содержание сайта вроде новости, статьи, записи блога, форума и др. |
| <aside> | Представляет собой раздел, который имеет косвенное отношение к содержимому страницы |
| <audio> | Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице |
| B | |
| <b> | Устанавливает жирное начертание шрифта |
| <base> | Определяет адрес или способ открытия всех ссылок странице по умолчанию |
| <basefont> | Задаёт шрифт, размер и цвет текста по умолчанию |
| <bdi> | Указывает фрагмент текста, который должен быть изолирован от изменения направления вывода текста |
| <bdo> | Устанавливает направление вывода текста: слева направо или справа налево |
| <bgsound> | Определяет музыкальный файл, который будет проигрываться на веб-странице |
| <big> | Увеличивает размер шрифта на единицу по сравнению с обычным текстом |
| <blockquote> | Предназначен для выделения длинных цитат внутри документа |
| <body> | Предназначен для хранения содержимого веб-страницы, отображаемого в окне браузера |
| <blink> | Устанавливает мигание текста |
| <br> | Устанавливает перевод строки в том месте, где он находится |
| <button> | Создаёт на веб-странице кнопку |
| C | |
| <canvas> | Создаёт область, в которой при помощи JavaScript можно рисовать и выводить изображения |
| <caption> | Создаёт заголовок к таблице |
| <center> | |
| <cite> | Представляет название произведения (книги, статьи, поэмы, песни и др.) |
| <code> | Предназначен для отображения текста программного код |
| <col> | Задаёт ширину и другие характеристики одной или нескольких колонок таблицы |
| <colgroup> | Группирует колонки таблицы для изменения их параметров |
| <command> | Создаёт команду в виде переключателя, флажка или обычной кнопки |
| <comment> | Добавляет комментарий в код документа |
| D | |
| <data> | Представляет содержимое в машиночитаемом виде, предназначенное для автоматизированных систем |
| <datalist> | Создаёт список вариантов, которые можно выбирать при наборе в текстовом поле |
| <dd> | Указывает термин в списке описаний |
| <del> | Используется для выделения текста, который был удалён в новой версии документа |
| <details> | спользуется для хранения информации, которую можно скрыть или показать по требованию пользователя |
| <dfn> | Выделяет термин в документе |
| <dialog> | Показывает диалоговое окно, в котором можно выводить сообщение или форму, например, для входа на сайт |
| <dir> | Создаёт список, содержащий названия директорий |
| <div> | Универсальный блочный элемент |
| <dl> | Создаёт список описаний |
| <dt> | Определяет термин в списке описаний |
| E, F | |
| <em> | Предназначен для акцентирования текста |
| <embed> | Используется для загрузки и отображения объектов |
| <fieldset> | Группирует элементы формы |
| <figcaption> | Содержит описание для элемента <figure> |
| <figure> | Используется для группирования любых элементов, например, изображений и подписей к ним |
| <font> | Изменяет характеристики шрифта, такие как размер, цвет и гарнитура |
| <footer> | Определяет «подвал» сайта или раздела |
| <form> | Устанавливает форму на веб-странице |
| <frame> | Определяет свойства отдельного фрейма, на которые делится окно браузера |
| <frameset> | Задаёт структуру фреймов на веб-странице |
| H | |
| <h2> | Заголовок первого уровня |
| <h3> | Заголовок второго уровня |
| <h4> | Заголовок третьего уровня |
| <h5> | Заголовок четветого уровня |
| <h5> | Заголовок пятого уровня |
| <h6> | Заголовок шестого уровня |
| <head> | Предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными |
| <header> | Определяет «шапку» сайта или раздела |
| <hgroup> | Используется для группирования заголовков веб-страницы или раздела |
| <hr> | Рисует горизонтальную линию |
| <html> | Является контейнером, который заключает в себе всё содержимое веб-страницы |
| I | |
| <i> | Устанавливает курсивное начертание шрифта |
| <iframe> | Создаёт встроенный фрейм на странице |
| <img> | Отображает на веб-странице изображение |
| <input> | Позволяет создавать разные элементы интерфейса |
| <ins> | Предназначен для выделения текста, который был добавлен в новую версию документа |
| K, L | |
| <kbd> | Используется для обозначения текста, который набирается на клавиатуре или для названия клавиш |
| <keygen> | Используется для генерации пары ключей — закрытого и открытого (для форм) |
| <label> | Устанавливает связь между определённой меткой и элементом формы |
| <legend> | Создаёт заголовок группы элементов формы |
| <li> | Определяет отдельный пункт списка |
| <link> | Устанавливает связь с внешним документом вроде файла со стилями |
| M | |
| <main> | Элемент main предназначен для основного содержимого документа |
| <map> | Служит контейнером для элементов <area>, которые определяют активные области для карт-изображений |
| <marquee> | Создаёт бегущую строку на странице |
| <mark> | Помечает текст как выделенный |
| <menu> | Отображает список меню |
| <menuitem> | Задаёт команду, которую пользователь может вызывать через контекстное меню |
| <meta> | Определяет данные, которые используются для хранения информации, предназначенной для браузеров и поисковых систем |
| <meter> | Используется для вывода значения в некотором известном диапазоне |
| N | |
| <nav> | Группирует ссылки навигации по сайту |
| <nobr> | Уведомляет браузер отображать текст без переносов |
| <noembed> | Предназначен для отображения информации на веб-странице, если браузер не поддерживает работу с плагинами |
| <noindex> | Запрещает поисковой системе Яндекс индексировать текст |
| <noframes> | Содержимое элемента отображается в браузере, когда он не поддерживает фреймы и не умеет их интерпретировать |
| <noscript> | Показывает своё содержимое, если браузер не поддерживает работу со скриптами |
| O | |
| <object> | Сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает |
| <ol> | Устанавливает нумерованный (упорядоченный) список |
| <optgroup> | Объединяет элементы <option> в одну группу |
| <option> | Определяет отдельные пункты списка, создаваемого с помощью <select> |
| <output> | Определяет область для вывода, преимущественно с помощью скриптов |
| P | |
| <p> | Определяет текстовый абзац |
| <param> | Передаёт значения параметров Java-апплетам или объектам веб-страницы |
| <picture> | Представляет собой контейнер для хранения нескольких элементов <source>, которые поддерживают элемент <img> |
| <plaintext> | Отображает содержимое контейнера «как есть» со всеми тегами |
| <pre> | Определяет блок предварительно форматированного текста |
| <progress> | Используется для отображения прогресса завершённости задачи |
| Q, R | |
| <q> | Используется для выделения в тексте цитат |
| <rp> | Используется для вывода текста в браузерах, которые не поддерживают элемент <ruby> |
| <rt> | Добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby> |
| <rtc> | В основном применяется в качестве описательной части или аннотации для иероглифов |
| <ruby> | Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста |
| S | |
| <s> | Используется для содержимого, которое уже не является точным или актуальным |
| <samp> | Используется для отображения текста, который является результатом вывода компьютерной программы |
| <script> | Предназначен для описания скриптов |
| <section> | Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. |
| <select> | Создаёт раскрывающийся список |
| <small> | Используется для сносок и комментариев, написанных обычно мелким текстом |
| <source> | Вставляет медийный файл для элементов <audio>, <video> и <picture> |
| <spacer> | Создаёт пустое пространство по вертикали или горизонтали |
| <span> | Универсальный строчный элемент |
| <strike> | Отображает текст как перечёркнутый |
| <strong> | Выделяет важный текст |
| <style> | Определяет стили элементов веб-страницы |
| <sub> | Отображает шрифт в виде нижнего индекса |
| <summary> | Указывает заголовок для <details>, по которому можно щёлкать для разворачивания/сворачивания информации |
| <sup> | Отображает шрифт в виде верхнего индекса |
| T | |
| <table> | Создаёт таблицу |
| <tbody> | Предназначен для хранения одной или нескольких строк таблицы |
| <td> | Предназначен для создания одной ячейки таблицы |
| <template> | Задаёт шаблон для фрагмента HTML, который может быть клонирован и вставлен в документ через скрипты |
| <textarea> | Создаёт поле для многострочного текста |
| <tfoot> | Предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы |
| <th> | Создаёт одну ячейку таблицы, которая обозначается как заголовочная |
| <thead> | Предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы |
| <time> | Помечает текст внутри элемента как дату, время или оба значения |
| <title> | Определяет заголовок документа |
| <tr> | Служит контейнером для создания строки таблицы |
| <track> | Позволяет авторам указать текстовую дорожку для медийных элементов (<video> и <audio>) |
| <tt> | Отображает текст моноширинным шрифтом |
| U, V, W, X | |
| <u> | Используется для разметки текста, который должен отличаться стилистически от обычного текста |
| <ul> | Устанавливает маркированный (неупорядоченный) список |
| <var> | Используется для выделения переменных из компьютерных программ |
| <video> | Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице |
| <wbr> | Указывает браузеру место, где допускается делать перенос строки в тексте |
| <xmp> | Отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины |
Что такое элементы и тэги в HTML
Как и в любом языке, в языке разметке гипертекста HTML есть свои определенные слова и правила, по которым этот язык работает. Такими основными словами, из которых состоит язык HTML, являются так называемые элементы и тэги. Давайте разберемся, что это такое и как с этим работать.
Что такое тэги в языке HTML?
Тэги — это основные конструкции (команды) языка HTML. Благодаря тэгам любой браузер понимает, какой смысл вы наделяете тому или иному элементу на веб-странице.
Тэги создаются с помощью следующей конструкции <имя_тэга>. По сути, все изучение HTML сводится к пониманию того, где и какие тэги нам нужно использовать. Если вы разберетесь в этом вопросе, то можно считать, что язык HTML вы освоили.
В HTML существует два основных вида тэгов: парные и одинарные тэги.
Одинарные тэги пишутся следующим образом:
<имя_тэга>
Что касается парных тэгов, то они состоят из двух логических конструкций.
<имя_тэга>Содержимое</имя_тэга>
Кроме того, есть еще одно основное понятие в HTML — это понятие элемента.
Элемент — это логически завершенная конструкция языка HTML. Если мы говорим об одинарном тэге, то элемент у нас будет являться этим одинарным тэгом. По сути элемент будет равен тэгу.
Если мы говорим про парный тэг, то элемент — это совокупность открывающего, закрывающего тэга и его содержимого.
Т.е. вся конструкция <имя_тэга>Содержимое</имя_тэга> будет являться элементом.
Как вы понимаете, тэгов в языке HTML довольно много и для того, чтобы посмотреть все эти тэги, какие они вообще бывают, я привел здесь следующую ссылку:
https://www.w3.org/TR/html5/
Перейдя по этой ссылке, вы попадаете на официальную спецификацию языка HTML, которая разрабатывается организацией w3c. Это организация контролирует, разрабатывает, вносит изменения в язык HTML и поэтому там вы можете получить самую последнюю и актуальную информацию. Единственная проблема, что эта информация будет на английском языке, но основные названия тэгов вы можете увидеть там, даже не зная английского языка.
Для того, чтобы посмотреть, какие тэги есть в языке HTML, нужно перейдя по этой ссылке спуститься вниз, к содержанию и находим там Index->Elements.
Для нас откроется таблица, в которой в колонке Element мы можем увидеть все элементы HTML, которые имеются в данный момент в HTML и какие свойства они при этом могут принимать. Этих элементов довольно много, но для того, чтобы просто работать с HTML вполне будет достаточно знать несколько десятков самых частоупотребляемых элементов.
Что такое теги в HTML? :: SYL.ru
Из этой статьи вы узнаете, что такое теги, где они применяются и для чего они нужны. Если вы уже считаете себя опытным разработчиком языка HTML, то можете пропустить данную информацию. Она полностью рассчитана для новичков этого вида программирования и для тех, кого просто заинтересовало данное определение. Поэтому, если вы задаетесь вопросом: «Что такое теги?» — то эта статья именно для вас.
Введение
Начать стоит с описания языка HTML. Ведь именно его наполняют теги. HTML – это язык гипертекстовой разметки. В некоторых источниках можно встретить и другое определение, в котором говорится, что это язык теговой разметки, где каждый элемент представляет собой определенный набор атрибутов и значений. Практически все составляющие этого языка находятся внутри определенного тега, в котором обязательно присутствуют открывающий и закрывающий элементы. Если взять код любой страницы HTML и убрать всю информацию с нее, то останутся только теги, куда входят атрибуты и их значения. Из этого следует, что в этом языке все происходит под управлением этих элементов. Поэтому можно сказать, что теги — это основная часть языка HTML.
Описание
В HTML насчитывается множество различных тегов. Некоторые уже считаются нежелательными и редко когда используются веб- разработчиками. Другие остались на своем месте и входят в спецификацию более новых версий данного языка. Но, так или иначе, конструкция тегов остается неизменной. Например, <body> — означает начало действия тела документа, где знак < оповещает браузер о начале тега, а знак > обозначает конец описания тега. Данные условные обозначения остаются одинаковыми для всех версий HTML. Все, что находится внутри этих элементов, является описанием тега. В интернете сейчас можно найти огромное количество справочников по этому языку программирования. Теги для HTML были придуманы разработчиком и изобретателем по имени Тимоти Джон Бернерс-Ли. Сейчас он занимает пост главы Консорциума всемирной паутины.
Особенности
Ранее было сказано, что в коде обязательно должен присутствовать открывающий и закрывающий тег. Но это не совсем верно. Что касается открывающего тега, то все правильно. Без него браузер не смог бы определить, с чем имеет дело. Но закрывающий тег может в некоторых ситуациях опускаться и не использоваться. Иногда это зависит от версии языка. Закрывающий тег отличается от открывающего только тем, что в его структуре содержится символ слеш /, который ставится вначале элемента, например: </body>. Он может отсутствовать в следующих случаях:
- Когда присутствует повторяющийся тег. Например, в коде есть элемент <p> (абзац), браузер понимает, что абзац заканчивается, когда встречает закрывающий тег </p>, либо новый тег <p>. Таким образом, большинство разработчиков не указывают в своих кодах </p>. Следует заметить, что не во всех случаях можно опускать закрывающий тег.
- Когда закрывающего тега не существует. Например, элемент <br> означает принудительный перенос строки. Данный тег является пустым. Это означит, что внутри него ничего не содержится. Поэтому закрывающая часть не нужна.
- Данные условия действуют для html версии 3.2 и 4.1. Но язык xhtml в обязательном порядке требует закрывающего элемента. Если тег пустой, то нужно поставить символ слеш в самом конце <br />.
Заключение
Вопрос «что такое теги» может заходить далеко в глубины языка HTML. Но такая краткая справка, написанная в данной статье, поможет вам разобраться с этим простым определением. Если вы до сих пор не понимаете, что такое теги, то советую использовать официальные источники. Или прочитать литературу с подробным объяснением всех нюансов.