Типы html тегов

Перед собственно разбором типов тегов хочется заострить Ваше внимание на различии html тегов и html селекторов. Несмотря на схожесть, тег и селектор - разные элементы. Html селектор это текстовая часть тега, сообщающая браузеру о типе тега.  Когда вы, в css таблице определяете html селектор, в действительности вы переопределяете html тег. Но если вы напишете в css полный html тег, т.е. и скобки и буквы, тег работать не будет. Именно поэтому необходимо понимать разницу между тегами и селекторами.

 

Теперь собственно о типах html тегов.

Не каждое правило css подходит каждому html тегу. В большинстве случаев эти ограничения логичны и легко понятны. В целом же ограничения накладываются по типам тегов. Так какие же бывают типы тегов?

Кроме тега <body> выделяют три типа html тегов:

1) теги блок-уровня (block level tags) выделяют элемент пустыми строка сверху и снизу, занимают всю доступную ширину, высота элемента определяется его содержимым. Определяются такими селекторами как blockquote-тип кавычек, center-выравнивание по центру, dd-описание определения, div-блок, dl-список определений, dt-терм определения, h1-h7 - заголовки, li - элемент списка, ol-упорядоченный список, p-абзац, table-таблица, td-ячейка таблицы, th-ячейка заголовка таблицы, tr - строка таблицы, ul-неупорядоченный список.

2) inline-теги не вставляют  пустые строки между элементами, как правило являются непосредственной частью другого элемента, например, текстового абзаца. Чаще всего они используются для изменения вида текста или его логического выделения. Это такие теги как a-ссылка, b-выделение жирным шрифтом, big-текст большего размера, cite-цитата, code-блок кода, em-выделение, font-шрифт, i-курсив, pre-преформатированный текст, span-локальное форматирование стиля, strike-зачеркивание, strong-усиленный шрифт, sub-подпись снизу, sup - надстрочный текст, tt - рукописный текст, u-подчеркивание.

3) замененные теги (replaced tags) отличаются тем что имеют установленный или вычисляемый размер. Это такие селекторы как img-изображение, input-поле ввода, object-объект, select-выпадающий список, textarea-многострочное поле ввода.