Все открывающие теги html

Теги и синтаксис HTML

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

Открывающие и закрывающие теги, теги-контейнеры

Теги могут быть открывающими (начальными) и закрывающими (конечными). Открывающие теги состоят из знаков «» между которыми указывается имя тега, а у закрывающих перед именем дополнительно ставится прямой слэш (/).

Большинство HTML-тегов являются парными — имеют обязательные открывающий и закрывающий теги, например: и . Некоторые имеют только открывающий тег, например , и называются пустыми. Другие же могут иметь открывающий тег, а закрывающий можно указывать, а можно и нет, тогда браузер сам определит, где заканчивается действие тега.

Теги, которые имеют обязательный или необязательный закрывающий тег принято называть теги-контейнеры или элементы-контейнеры.

Все теги HTML не чувствительны к регистру, то есть можно указывать и или вообще .

Теперь совет. Рекомендую вам всегда писать теги в нижнем регистре (строчными буквами) и ставить необязательные закрывающие теги. Во-первых, это является признаком профессионализма и хорошего тона, а во-вторых, в HTML-коде со всеми закрывающими тегами гораздо проще ориентироваться и править его. Ну да я вам об этом еще не раз напомню.

Пример использования тегов

Жирный шрифт Курсивный шрифт

И все таки, как будет правильно — «теги» или «элементы»?

Вообще, в большинстве случаев правильно будет говорить — «элементы». Именно из HTML-элементов состоит веб-страница, и именно элементы выводят в окне браузера изображения, таблицы, ссылки и т.д. А теги предназначены для того, чтобы сообщить браузеру, где и какой элемент находится, начинается и заканчивается. Давайте еще раз рассмотрим пример, который расположен выше. Там указаны два элемента B и I . Каждый из них содержит обычный текст и имеет открывающий и закрывающий теги.

Так уж сложилось, что на сегодняшний день слово «тег» прочно вошло в русский язык (да и не только в русский) в качестве синонима слову «элемент». Я думаю из-за того, что при использовании обоих слов не теряется смысл повествования. Поэтому в данном учебнике я тоже буду использовать оба этих слова, чтобы вы привыкли к ним и научились подсознательно определять, о чем идет речь в каждом конкретном случае. И сильно на этом не заморачивайтесь, знаете, чем отличается тег от элемента — вот и хорошо.

Теги можно указывать в одну строку, а можно в несколько

Да, HTML-теги можно указывать в одну строку, а можно в несколько, для браузеров это не имеет никакого значения, они просто игнорируют переносы строк. А также между тегами можно ставить сколько угодно пробелов — все подряд идущие пробелы браузеры воспринимают как один. Например, вот так:

Жирный шрифт Курсивный шрифт 

Правильная вложенность тегов

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

Пример использования вложенных тегов

Жирный курсивный шрифт

Родительские и дочерние теги, потомки и предки

Чтобы указать иерархическую структуру HTML-тегов, их принято называть определенными словами. На самом деле все очень просто. Итак, давайте возьмем такой пример:

Родительские теги — тег является родительским для других тегов, если они вложены внутрь него на один уровень. В нашем примере является родительским для и , но не является для тега . А вот родитель .

Дочерние теги — обратно родительским. и дочерние для , а для тега .

Предки — тег является предком для всех тегов, которые находятся внутри него на любом уровне вложенности. предок для всех тегов, а предок .

Потомки — обратно предкам. Все теги — потомки тега , но еще и потомок тега .

Ну что, не запутались? Чтобы проще запомнить, проведите аналогию со своим семейным древом и сразу все встанет на свои места.

Что значит «один тег содержит другой»?

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

Говорят, что один тег содержит другой только, если первый является родительским тегом, а второй — дочерним и никак иначе. то есть в нашем примере содержит и , но не содержит . А вот как раз и содержит . Немного необычно, правда? Но своя логика в этом есть, согласитесь.

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

Типы тегов

В HTML, теги делятся на несколько типов или моделей:

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

Пример использования встроенных тегов

Жирный шрифт Курсивный шрифт

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

Пример использования блочных тегов

Есть еще теги других типов, но о них мы с вами поговорим в дальнейших уроках, а эти два типа самые распространенные в HTML.

Ну что, надеюсь пока все понятно? Тогда пошли дальше.

• Введение
• Что такое HTML?
• Теги и синтаксис HTML
• Атрибуты HTML-тегов
• Общие и текст
• Структура HTML-документа
• Параграфы и заголовки
• Как изменить шрифт?
• Меняем цвет текста и фона
• Выравнивание содержимого
• Цитаты и обрыв строки
• Что такое спецсимволы HTML?
• Горизонтальные линии
• Группирование элементов
• Комментарии в HTML
• Ссылки
• Cсылки и их разновидности
• Меняем цвета ссылок
• Ссылки на электронную почту
• Якоря — создаем закладки
• Изображения
• Изображения
• Изображения для фонов
• Изображения — ссылки
• Таблицы
• Таблицы
• Границы, рамки и отступы HTML-таблиц
• Объединение ячеек таблицы
• Вложенные таблицы
• Списки
• Нумерованные и маркированные списки
• Метатеги
• Метатеги и их типы

Copyright © 2010-2015 seodon.ru Все права защищены.

С условиями использования материалов данного сайта вы можете ознакомиться на странице автора.

Источник