HTML представляет собой обычный текстовый файл с расширением.htm (html). Для создания простейшей страницы на первых порах, когда вы только тренируетесь необходимо лишь блокнот. Откройте блокнот и напишите текст.
Каждый элемент HTML представляет из себя тег, обрамленный скобками. Любой файл, страница html начинается с тега и заканчивается тегом .
Вот этот тег просто указывает браузеру (это программа в которой вы просматриваете интернет страницы) что данный документ является html-документом разметки.
Тег — означает начало html-документа, а — закрывающийся тег, означает конец html документа.
Внутри этих тегов есть еще несколько важных тегов. Сразу за тегом идут теги означающие заголовок страницы и тело страницы.
Моя первая страница HTML
Тег означает название заголовка окна при выводе этой страницы.
Сейчас вы можете создать новый текстовый документ в блокноте, скопировать текст, представленный выше и сохранить его как Страница1.html и запустить в браузере, вы увидите в заголовке окна браузера название страницы из , и пустую страницу, т.к. мы в теле страницы в тегах ничего не выводим.
Итак, текст приведенный выше будет для нас базовым каркасом любой веб-страницы.
Парные и непарные теги!, , Вот это как раз парные теги – те теги, которые идут парой тег и его закрытие, закрывающий тег с символом /. Для парных тегов – значение содержащееся между началом тега и его окончанием – это и есть действие тега. Действие будет распространятся до тех пор, пока не будет найден тег с символом /.
Непарные теги – у них нет закрывающего тега. Далее мы приведем примеры таких тегов.
— Заголовок html страницы, куда включаются ключевые слова для поисковиков, различные скрипты, и т.д.
— Непосредственно тело html-документа.
Непарный тег.
Примечание: В большинстве случаев сейчас при построении сайтов используют готовые подпрограммы, плагины и т.д. – для более быстрого создания сайтов, но для того, чтобы применять и использовать такие подпрограммы и шаблоны – всё же необходимо минимальное знание данных сессий.
Вы уже прочитали, что весь язык состоит из тегов. В этом уроке разберемся подробнее с HTML тегами. В языке HTML происходит деление тегов на одинарные (не парные) и парные теги. Итак, одинарные HTML теги состоят из одного тега, то есть, у них нет закрывающего тега. А у парных дескрипторов есть открывающийся и закрывающийся тег.
Одинарные теги HTMLОдинарные теги
не имеют закрывающего тега. Например:
, . Раньше писали так:
, , теперь такой стиль написания одинарных тегов не актуален, поэтому не пишите так. Самые используемые одинарные теги:
- перенос на новую строку, - разделительная линия, - вставка изображения.
Парных тегов намного больше. У парного дескриптора есть открывающий и закрывающий тег. Парный тег образует контейнер. Содержимое контейнера – это то, что находится между открывающим и закрывающим тегом. В примере из этой статьи вы видели тег Что такое дескрипторы в HTML? , так вот, это парный тег, содержимым этого тега является текст «Что такое теги в HTML?». Его началом является тег , а концом .
Главная ошибка новичков в написании парных тегов, это путаница во вложенности. Например, вот это правильная запись:
Жирный абзац
. А вот ошибка:Жирный абзац
, HTML документ с такой версткой считается не валидным. Чтобы не путать вложенность, делайте так: создаем парные теги , далее вкладываем в них другие , и в конце пишем текст внутрь обоих теговКак правильно писать парные теги
. Что нового в HTML5 в плане тегов?Язык HTML5 является расширением HTML4, поэтому он сохранил большую часть или все дескрипторы из HTML4 и добавил свои. В HTML5 появились специальные теги для разбиения сайта на основные блоки: шапка, меню, подвал, сайдбар и контент.
Почему важно научиться пользоваться тегами?Поисковики Yandex и Google трепетно относятся к верстке HTML документов, проверяя их на валидность. Ищут в них ключевики заключенные в специальные дескрипторы и так далее. Но этот раздел не про это. Это относится к продвижению (SEO).
Как выучить все теги HTML?Да, тегов не мало. Но специально учить их не нужно. Пока вы будете практиковаться, что-то писать, у вас все дескрипторы, парные и одинарные, легко запомнятся. Со временем, конечно.
Тег (мн. теги, иногда тэг ) — это элемент языка HTML, с помощью которого выполняется разметка исходного текста веб-страницы. Теги представляют из себя сокращения или аббревиатуры английских слов заключенные в угловые скобки , например, тег
…
сокращение от английского слова paragraph , то есть текст заключенный в данный тег будет распознаваться браузерами, как параграф.Каждый тег в HTML имеет специальное значение и отвечает за вывод определенных данных. Регистр букв в названиях тегов не имеет значение, например, тег
…
и тег…
— это одно и то же. То есть теги можно записывать и строчными, и заглавными буквами. Раньше общепринятым было, все теги записывать заглавными буквами, чтобы теги отличались от обычного текста. Сейчас такой необходимости нет, так как многие редакторы имеют подсветку синтаксиса. Классификация теговВсего тегов в HTML насчитывается более 90. Как правило, один тег воздействует только на часть документа, например, тег заголовка первого уровня …. В таких случаях используются парные теги: открывающий и закрывающий . Открывающий тег (например, ) создает эффект, а закрывающий ( ) — прекращает его действие. Как видно из примера, закрывающий тэг всегда имеет вот такой символ (/ ) — прямой слеш. Такие теги называют парные .
Некоторые теги дают разовый эффект в месте своего появления. Например, тег горизонтальной полосы или тег отображения картинки . Такие теги не имеют закрывающих тегов. Такие теги называют не парные.
Типы теговКроме того теги подразделяют на несколько типов, которое различаются по выполняем функциям:
- теги заголовка документа;
- блочные элементы;
- строчные элементы;
- универсальные элементы;
- списки;
- таблицы;
- фреймы.
Это разделение не строгое, поэтому некоторые теги находятся в разных группах. Например, тэги для создания списков и
- относятся и к спискам, и к блочным элементам.
Структура тегов
- Сам Себе Вебмастер
- Элемент начинается с открывающего тега.
- Элемент заканчивается закрывающим тегом.
- Содержимым элемента является все, что находится между открывающим и закрывающим тегами. Содержимое может быть текстом и/или другим HTML элементом.
- Элемент состоит только из открывающего тега.
- пустые элементы
— , ,
, , , , , , , , , , , , ; - элементы с неформатированным текстом — , ;
- элементы, выводящие неформатированный текст — , ;
- элементы из другого пространства имён — MathML и SVG;
- обычные элементы — все остальные элементы.
При загрузке в браузере сами теги не отображаются, но влияют на способ отображения своего содержимого. Если в написание тега допущена ошибка, он игнорируется целиком.
Все теги имеют определенную структуру, которую необходимо соблюдать при написании. Кроме того, практически все теги имеют различные атрибуты, которые могут изменять способ отображения содержимого.
Давайте посмотрим на правильную структуру тегов содержащих атрибуты:
Для примера я привел два совершенно разных тега. Первый одинарный — отвечает за вывод изображений, атрибут — src=»logo.jpg» . Второй … парный отвечает за создание ссылок, атрибут — href=»сайт» .
Вывод 1 : Атрибуты могут иметь парные и непарные теги.
Вывод 2 : Атрибуты могут иметь только открывающие теги, закрывающие теги не имеют атрибутов.
Картинка для разъяснения:
Рисунок 1. Cтрутура тега html
Задача на внимательность и знание синтаксиса HTMLДавайте посмотрим на примере простой веб-страницы, которую мы рассматривали в уроке
HTML элемент - это основная структурная единица веб-страницы, написанная на языке HTML.
Парные и одиночные теги HTMLСинтаксис HTML элементов, состоящих из парных тегов:
Примечание: не забывайте в закрывающем теге ставить символ "/ ", он указывает браузеру, что ваш элемент закончился и что то, что будет написано после него, является уже другим элементом. Если не поставить символ "/ " в закрывающем теге, то браузер примет его за новый элемент, вложенный в предыдущий, который по мнению браузера всё ещё не закрыт.
Синтаксис HTML элементов, состоящих из одиночных тегов:
Элементы, состоящие из одиночных тегов называются пустыми . Всего в HTML 16 одиночных тегов:
HTML элементы, состоящие из парных тегов, могут либо содержать в себе любые другие элементы, либо сами могут быть вложены в другие элементы, при этом глубина вложенности элементов не ограничена.
Следующий пример состоит из трех элементов, два из которых вложенные:
Мой первый абзац
Когда один элемент располагается внутри другого, нужно следить за тем, чтобы вложенный элемент начинался и заканчивался внутри одного и того же элемента. Так, например, следующий код является неверным:
Это очень
интересноЗдесь элемент выходит за пределы элемента
Пример с правильной вложенностью:
Это очень интересно
Здесь элемент правильно вложен - он находится полностью в элементе
Пробельные символыБраузер игнорирует пробельные символы в HTML-коде, поэтому их можно использовать с пользой для себя, придавая коду удобочитаемый вид. К пробельным символам относятся: символы табуляции, перенос строки и обычные пробелы, их можно использовать в любом количестве. Пример кода, в котором используются пробельные символы:
Заголовок Мой первый заголовок
Мой первый абзац
Код примера можно было бы написать и вовсе без использования пробельных символов, но такой код будет менее удобен для чтения:
ЗаголовокМой первый заголовок
Мой первый абзац
Поскольку код HTML-документа со временем становится больше и усложняется, становится видно, что использование пробельных символов действительно улучшает читабельность кода.
HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.
Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.
Все HTML-элементы делятся на пять типов:
В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие теги исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом.
Полный список HTML-элементов