Основы HTML. Структура документа

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

HTML codeСтандартный документ (страница) HTML, должен иметь определенную структуру, которая определена стандартами консорциума w3c. Посмотрим, на что же похожа эта структура, или как ее можно представить в удобопонимаемом виде. Я бы нарисовал ее в виде человечка, потому как, документ HTML, состоит из головы и тела, но вот ног и рук не имеет :).

Итак, выглядит это примерно так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <!-- служебная информация располагается в голове –>
  </head>
  <body>
    <!-- описание самого документа, то есть его тело –>
  </body>
</html>

А теперь рассмотрим этот пример под микроскопом.

Самой первой строчкой идет объявление типа документа, так называемый DOCTYPE. Эта строка является очень важной, так как, она указывает браузеру, какую версию HTML движка, он должен использовать для рендеринга этого документа, в случае неправильного указания, некоторые элементы оформления могут “съезжать”.

Далее идет тег <html>, который является корневым элементом. С него начинается вся разметка HTML документа, этот тег является контейнером для всех остальных тегов.

HTML документ, всегда, разбит на две части:

  • голову — тег <head>
  • тело – тег <body>

В секции head размещается служебная информация, такая как:

  • заголовок страницы – тег <title>
  • ссылки на CSS файлы, и RSS потоки – <link>
  • также могут размещаться ссылки на скрипты, либо сами скрипты, но это не желательно, в целях повышения производительности, скрипты лучше выносить в самый низ документа, перед закрывающим тегом </body>.

В секции <body> помещаются все теги, которые будут описывать структуру страницы:

  • блоки – <div>
  • праграфы – <p>
  • ссылки – <a>
  • списки – <ul>, <ol>
  • картинки – <img />
  • таблицы – <table>
  • и иные элементы разметки документа

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

Категории: Верстка, HTML, CSS  Теги: , ,
  1. Трэкбеков пока нет.
  1. Олег
    10 октября 2010 21:02 | №1

    хороший пост, кратко, лаконично, просто и понятно :wink:

  2. 10 октября 2010 21:04 | №2

    Спасибо, буду стараться продолжать писать более информативные посты, и с большей частотой 8)

:D :) ^_^ :( :o 8) ;-( :lol: xD :wink: :evil: :p :whistle: :woot: :sleep: =] :sick: :straight: :ninja: :love: :kiss: :angel: :bandit: :alien: