HTML-теги
Раскрываем тему о HTML-тегах и их категориях
Категории и виды HTML-тегов
Теги HTML — являются основной частью языка HTML.
Схема HTML-тега, выглядит следующим образом:
Схема парного тега:
<имяТега> </имяТега>
Схема одиночного тега:
<имяТега>
Иногда в HTML тегах устанавливают атрибуты со значениями:
<имяТега атрибут="значение"> </имяТега> <имяТега атрибут="значение">
Где имяТега — это h1, p, b, img, a, table и др.
Виды (категории) HTML-тегов
Теги делятся на несколько видов. Я их разделил на десять категорий, в других учебниках количество категорий может различаться:
- Парные теги,
- Одиночные теги,
- Блочные теги,
- Строчные теги,
- Новые теги HTML5,
- Устаревшие теги,
- Нестандартные теги,
- Теги верхнего уровня (html, head и body),
- Теги головы HTML-документа,
- Семантические теги.
Один и тот же тег, может одновременно принадлежать нескольким категориям, например тег <small> </small> относится к следующим видам: парный, строчный, семантический.
Рассмотрим каждый вид по отдельности.
Парные теги
Парные теги имеют открывающий и закрывающий тег, перед именем закрывающего тега ставят знак слэш (косая черта) /
Вот небольшой список парных тегов:
<h1> </h1> — заголовок,
<p> </p> — абзац,
<b> </b> — жирный шрифт.
Одиночные теги
Одиночные теги не имеют закрывающего тега.
Вот небольшой список одиночных тегов:
<img> — изображение,
<br> — перенос строки,
<input> — элемент формы.
Блочные теги
Блочные теги — это теги в начале и в конце которых
автоматически ставится перенос строки, также они занимают всю ширину родительского элемента.
Вот небольшой список блочных тегов:
<h1> </h1> — заголовок первого уровня,
<p> </p> — абзац,
<table> </table> — таблица.
Строчные теги
Строчные теги — это теги в начале и в конце которых НЕ ставится перенос строки.
Вот небольшой список строчных тегов:
<b> </b> — жирный шрифт,
<i> </i> — наклонный шрифт,
<input> — элемент формы.
Новые теги HTML5
Новые теги HTML5 — это теги, которые появились в спецификации языка HTML5.
Вот небольшой список новых тегов:
<article> </article> — основной контент страницы,
<canvas> </canvas> — замена флеш-технологии,
<video> — видео-файл.
Устаревшие теги
Устаревшие теги — это теги использовать которые с точки зрения спецификации языка HTML5, не рекомендуется. Однако при создании сайтов, вы можете использовать устаревшие теги, браузеры всё равно их поймут.
Вот небольшой список устаревших тегов:
<big> </big> — увеличивает размер шрифта на единицу,
<font> </font> — форматирует текст,
<isindex> — поисковая строка.
Нестандартные теги
Нестандартные теги — это теги, которые не поддерживаются ни одной спецификацией HTML, но некоторые браузеры их понимают.
Вот небольшой список нестандартных тегов:
<bgsound> — проигрывает музыку при открытии страницы,
<blink> </blink> — мигающий текст,
<marquee> <marquee> — бегущая строка.
Теги верхнего уровня
Теги верхнего уровня — это теги отвечающие за создание HTML-документа, их всего три:
<html> </html> — начало и конец HTML-документа,
<head> </head> — голова HTML-документа,
<body> </body> — тело HTML-документа.
Теги головы HTML-документа
В голове HTML-документа, между тегами <head> </head>, обычно находятся теги отвечающие за описание страницы, за подключение внешних файлов и др., они не видны пользователю. Единственный тег головы, который видит пользователь, это тег title.
Вот небольшой список тегов головы HTML-документа:
<link> — подключает внешние файлы .css, .xml, .ico,
<meta> </meta> — мета-теги,
<title> </title> — название страницы,
<style> </style> — внедряет CSS-код в страницу,
<script> </script> — загружает внешний JavaScript-файл .js, также между этими тегами может размещаться JavaScript-код.
Семантические теги
Семантические теги — это теги которые предназначены для того, чтобы компьютерные программы (поисковые системы, сборщики информации, речевые браузеры и т.д.), понимали смысл заложенной в них информации.
Вот небольшой список семантических тегов:
<article> </article> — обрамляют основной контент страницы,
<blockquote> </blockquote> — обрамляют цитаты взятыя из внешних источников,
<small> </smal> — обрамляет текст написанный мелким шрифтом в юридических документах.
Также следует отметить, что нынешняя политика HTML стремится сделать почти все теги, семантическими.
По каким категориям еще можно разделять HTML-теги?
К десяти категориям выше, можно также добавить еще несколько, это:
— Текстовые теги,
— Теги форматирования,
— и т.д. список будет пополняться.
Также, теги можно разделить по специализации:
— Теги таблиц,
— Теги форм,
— Теги списков,
— Теги фреймов,
— Мета-теги,
— и т.д.
Читать далее: Парные теги
Очень полезный сайт. Советую всем прочесть.