HTML-код страницы, HTML-теги

Теги html
Если вы пришли в Интернет всерьез и надолго, быть вечным «чайником» не получится. Это значит, что хотя бы поверхностно придется ознакомиться и с HTML-CSS. В статье «Что должен знать блогер о HTML и CSS» мы рассмотрели общие понятия, теперь слегка коснемся структуры HTML-кода и тегов. CSS временно трогать не будем. Несмотря на то, что я правила CSS на своих сайтах, в таблицах стиля все же я пока «чайник». А вот в HTML перешла уже в разряд «самоваров»))).

Итак, как мы выяснили, HTML – это язык гипертекстовой разметки, на котором пишутся страницы сайтов. Читая этот код, веб-браузеры (Google Chrome, Internet Explorer, Firefox и т.д.) отображают на экране монитора содержимое веб-страниц.

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

В связи с этим следует соблюдать правило веб-мастера № 1: опубликовав статью, всегда проверить, каким образом ее отображают самые популярные браузеры, и при необходимости внести коррективы.

HTML теги


Язык разметки представляет собой набор тегов. По сути веб-документы являют собой чередование фрагментов текстов с тегами. Все теги начинаются и заканчиваются угловыми скобками, между которыми заключены различные символы, например <head>, <br>, <div>. Теги выполняют функцию форматирования и не отображаются браузерами при просмотре страниц. Весь остальной текст, не заключенный между скобок, будет выведен на экран монитора. Существует огромное количество тегов и каждый из них выполняет определенную функцию. В действительности же рядовому веб-мастеру на практике требуется не более 10-20 тегов. 

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

Примеры парных тегов:
<h1>заголовок первого уровня (heading) </h1> -  указывает браузеру, что между тегами заключен самый крупный заголовок;
<h2>заголовок второго уровня</h2> - указывает, что данный заголовок меньшего размера, чем заголовок первого уровня;
<p>параграф (paragraph)</p> - указывает браузеру, что это параграф и нужно оставить пустое поле до него и после;
<b>текст жирный (bold)</b> - дает указание браузеру отобразить текст между тегами жирным шрифтом.

Пример непарного тега:
<br /> - одиночный разрыв строки (break). Согласно новым стандартам все непарные теги перед закрывающей угловой скобкой должны иметь пробел и косую черту.

Браузеры читают теги, написанные и в верхнем регистре, и в нижнем. Однако последние стандарты требуют при написании тегов использования только нижнего регистра.

Структура  HTML-кода 


Любой веб-документ имеет строго определенную структуру, содержащую в себе три пары тегов, расположенных в следующем порядке:
<!DOCTYPE html>
<html>
<head>
содержимое тега
</head>
<body>
содержимое тега
</body>
</html>

Данные теги могут использоваться без закрывающих тегов, а могут не использоваться вовсе. Однако их рекомендуется прописывать для более четкого разделения частей документа.

Пары тегов типа <html> </html>, <head> </head>, <title> </title> и т.п. называются контейнерами. Они могут заключать в себя другие теги и тексты.

Рассмотрим вышеперечисленные элементы  подробнее.

  • <!DOCTYPE html>. Данный элемент указывает на тип конкретного веб-документа. Поскольку в процессе эволюции  HTML появилось несколько версий языка разметки, для правильной интерпретации документа браузеру необходимо сообщить, по какому именно стандарту его отображать.
  • Тег <html>. Заключает в себя все содержимое веб-документа. Открывающий тег <html>  всегда расположен после DOCTYPE , а закрывающий тег </html>  всегда является последним элементом кода.
  • Тег <head>. В переводе с английского  head, как известно, голова. Данная заголовочная часть документа содержит в себе общее описание веб-страницы. Здесь размещаются название документа (тег <title>), мета-теги (description, keywords и др.) и пр. Содержимое тега <head> является рабочей информацией для браузера, оно не отображается на странице, за исключением тега  <title>.
  • Тег <body>. Body, в переводе с английского означает тело. Само название указывает на то, что внутри тега содержится "тело" документа,т.е. непосредственно та его часть, которая выводится на экраны (тексты, изображения и т.д.), а также теги, таблицы стилей и др. 
В следующей статье рассмотрим структуру кода-HTML Blogger.


HTML и CSS. Путь к совершенству | Бен Хеник | HTML и CSS: The Good Parts | Бестселлеры O'Reilly HTML и CSS. Путь к совершенству | Бен Хеник | HTML и CSS: The Good Parts | Бестселлеры O'Reilly

Related Posts : Как продвигать сайт

Отправка комментария