Теги для сайта или как устроен сайт изнутри

От автора: все в мире из чего-то состоит. А каков состав сайта? Он состоит из html-тегов, которые и формируют его структуру и его содержимое. В этой статье я хотел бы обсудить теги для сайта, которые могут вам пригодится больше всего.

Глобальные теги

Это те контейнеры, без которых немыслимо создание веб-страницы. Я думаю, вы уже догадались – это head и body. В первый помещается информация, которая не имеет прямого отношения к содержимому страницы. Например, мета-описание, кодировка и т.д. Также тут подключаются различные внешние файлы – таблицы стилей, скрипты, иконка.

Теги контейнера head

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

Title – в этот контейнер записывается главный заголовок страницы (Title), который будет отображаться при нахождении этой страницы в поисковой выдаче. Его наличие и правильное составление очень важно для поисковой оптимизации.

Meta – это очень функциональный элемент, с его помощью можно задавать кодировку, ключевые слова страницы и описание. Мета теги для сайта тоже пишутся с его помощью. Пример:

Этот текст будет выведен, когда люди увидят вашу страницу в поиске.

Link – одинарный тег, который используется для подключения внешних файлов. Чаще всего таким образом подключаются таблицы стилей. Точно также на сайт добавляют favicon.

Script – в целом, тег выполняет абсолютно те же функции, что и предыдущий, но его роль более специфична – он подключает внешние файлы-скрипты, то есть javascript библиотеки и файлы.

Теги контейнера body

Мы не будем рассматривать все, чтобы это сделать, нужно, пожалуй, писать новую книгу. Я расскажу вам только о самых распространенных, о тех, что используются практически на всех веб-страницах.

Абзац(<p>) – в этот парный контейнер помещают текстовое содержимое, которое отделяется от другого текста небольшими отступами сверху и снизу. То есть ведет себя как абзац. А поскольку текстов в интернете много, то параграфов, их формирующих, еще больше.

Ссылка (<a>) – тоже парный элемент. Между открывающей и закрывающей частью располагается текст, который станет анкором ссылки. После клика по этому тексту произойдет переход по адресу, который указан в атрибуте href. Это единственный обязательный атрибут. Вернее, его можно не писать, но только ссылка просто никуда не будет вести и потеряет свой смысл.

Блок(<div>) – важнейший элемент в веб-дизайне, именно благодаря ему создается так много красивых шаблонов. Вернее, не благодаря ему одному, конечно же. Div – это простой блочный элемент. Пустой и не несущий никакого дополнительного смысла, не выполняющий никакой четкой роли на странице. А нужен он в основном для того, чтобы оформлять сайт.

Раньше (в HTML4) на этих блоках строились все сетки сайтов. Например, верстальщику по заданию нужно было сверстать шаблон, состоящий из шапки, двух колонок и подвала. Он создавал четыре блока div, давал каждому из них свой уникальный идентификатор и наполнял нужной информация. Дальнейшая работа выполняется через CSS.

Рис.1. В html4 все эти структурные части создавали с помощью HTML4, даже сейчас некоторые так делают

С появлением новых семантических элементов подходит к созданию каркаса страницы немного изменился, но все равно простой div используется и будет использоваться для создания различных элементов.

Заголовки(H1-H6). Также важнейшие элементы, которые позволяют структурировать текст на странице. Вы бы читали текст, длиной несколько страниц, если там не было бы ни единого подзаголовка? Возможно, если он очень интересный, то читали бы, но все равно визуально он воспринимается намного хуже.

H1 – это самый крупный, самый важный заголовок. Он обязательно должен быть одним на странице и в него должно быть заключено название новости, статьи, записи (или что там у вас). Все остальные теги созданы для менее важных заголовков. Например, все подзаголовки в статье следует обозначить как h2, а если в этом отрывке текста нужно еще раз разделить информацию, используйте уже h3. Как правило, для простых статей этого достаточно. В любом случае, шести разных по важности видов подзаголовков вам хватит с головой.

Списки, таблицы, изображения

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

Списки. Маркированный — Ul, нумерованный – ol. Специально для списков в html придумали эти контейнеры. Они создают именно область для выведения списка, а сами пункты заключаются в теги li. Соответственно, маркированный список из двух пунктов формируется так:

С помощью css можно по-разному оформлять списки, делать их более привлекательными, но это уже другой разговор.

Таблицы. Создаются, по сути, с помощью трех тегов – table, tr и td. Первый выступает в качестве глобального контейнера для содержимого, второй – формирует один ряд, а третий – одну ячейку ряда. Таким вот образом и можно создавать таблицы, хотя это далеко не все теги, которые могут использоваться в ней. Более подробно о работе с ними вы сможете узнать из наших уроков по основам html.

Изображения. Одиночный тег img создан для вставки изображений и его единственным обязательным атрибутом является src, то есть путь к самой картинке. Вот вам простой пример:

Произойдет поиск картинки pic.jpg в папке images, которая лежит в той же директории, что и html-файл, если изображение успешно найдено, оно будет вставлено на страницу в том месте, где будет этот код.

Теги из html5

Собственно, я перечислил вам самые базовые теги, которые используются чаще всего. Но в последнее время также появились новые из спецификации HTML5. Таким образом, подход к созданию того же каркаса, например, серьезно изменился.

Я не буду в этой статье подробно писать об этих новых элементах, так как об этом уже написаны статьи на нашем блоге. Также можете почерпнуть информацию о них из нашего курса по основам этой технологии.

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

Комментарии Вконтакте: