Основные теги HTML

Основные теги HTML

Базовая структура для всех HTML-документов есть простой и должна содержать как минимум следующие теги:
  1. <html> - основной контейнер для HTML-страницы.
  2. <head> - контейнер для названия и информации о странице.
  3. <title> - название страницы.
  4. <body> - основная часть страницы. В этой части отображается весь контент.
Помните, что перед началом открытия тега <html>, HTML-документ должен всегда содержать DOCTYPE, который указывает, какая версия HTML используется на веб-странице. Именно с этого следует начинать каждую страницу!
 
 
Теперь мы детальнее рассмотрим каждый из этих тегов.

Тег <html>

<html> - это тег, содержащий весь HTML-код страницы. Каждый HTML-документ должен иметь один элемент <html> в начале и закрывающий тег </html> в конце.
 
Теги <head> и <body> - это "дети" тега <html>.

Тег <head>:

Тег <head> является контейнером для всех других элементов, которые не отображаются браузером визуально, но обязательно должны присутствовать в html-коде. Этот тег должен быть открыт сразу после открывающего тега <html>.
 
Тег <head> должен содержать элемент <title> с указанием названия страницы. Но <head> также может содержать любую комбинацию из следующих элементов (в любом порядке):
  1. Тег <base> - используется для создания "базы" url-адресов всех ссылок на странице.
  2. Тег <object> - предназначен для включения изображений, объектов JavaScript, Flash-анимаций, файлов MP3, QuickTime и других мультимедийных элементов страницы.
  3. Тег <link> - используется для ссылки на внешние файлы, такие как таблицы стилей CSS или JavaScript-файлы.
  4. Тег <style> - используется, чтобы включить правила CSS внутри документа.
  5. Тег <script> - используется, чтобы включить JavaScript или VBScript внутри документа.
  6. Тег <meta> - включает в себя информацию о документе, например, ключевые слова и описание, которые особенно полезны для поисковой оптимизации.

Пример:

Ниже приведен пример тега <head>:

<head>
<title>Название страницы</title>
<meta name="Keywords" content="Ключевые слова, через запятую" />
<meta name="description" content="Краткое описание страницы" />
<base href="http://www.wmz-mail.at.ua" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript"></script>
</head>

Тег <title>:

Вы должны указать название для каждой страницы, которое нужно прописать внутри тега <title>. Этот элемент - дочерний элемент тега <head>. Он используется в таких целях:

  1. Отображается в названии вкладки в окне браузера.
  2. Используется в качестве имени по умолчанию для создания закладки в браузерах.
  3. Его используют поисковые системы для индексации страницы.

Поэтому, всегда используйте этот тег на всех страницах. Элемент <title> должен содержать только текстовое название страницы и не может содержать другие элементы.

Пример:

Здесь приведен пример использования тега <title>:

<head>
<title>Название страницы</title>
</head>

Тег <body>:

Тег <body> появляется после тега <head> и содержит ту часть веб-страницы, которую Вы видите визуально в главном окне браузера. Этот тег иногда называют "тело", в котором мы видим контент страницы. Элемент <body> может содержать что угодно: от пары абзацев и заголовков, до более сложных форм, макетов и таблиц.
 
Большинство из того, что вы будете изучать в следующих статьях о HTML - будут размещаться именно между тегами <body> и </body>.

Пример:

Здесь приведен пример использования тега <body>:

<body>
<p>Абзац с контентом</p>
</body>

Теперь соберем в один HTML-код все основные теги. Вот что должно получится:

<html>
<head>
<title>Название страницы</title>
<meta name="Keywords" content="Ключевые слова, через запятую" />
<meta name="description" content="Краткое описание страницы" />
<base href="http://www.wmz-mail.at.ua" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript"></script>
</head>
<body>
<p>Абзац с контентом</p>
</body>
</html>

Таким образом мы сделали простую и элементарную HTML-страницу.

 

<<< Предыдущая статья Меню категории Следующая статья >>>

Ставив лайк Вы помогаете сайту :)

Статьи по теме:
Рейтинг:
5.0/5 из 2
Категория: Учебник HTML | Добавил: zaharchuk (12.02.2014)
Просмотров: 6217 | Комментарии: 1
Комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]