Рассмотрим более подробно структуру и состав HTML -документа на следующем примере:
   |  | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | 
  |  | <html> | 
  |  | <head> | 
  |  | <!-- Этот раздел предназначен для заголовка страницы и технической информации. --> | 
  |  | <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> | 
  |  | <meta http-equiv="Content-Language" content="ru"/> | 
  |  | <meta name="description" content="Это тестовая страница." /> | 
  |  | <meta name="keywords" content="HTML, CSS, DTD, теги" /> | 
  |  | <meta name="robots" content="index, follow" /> | 
  |  | <title>Тестовая страница</title> | 
  |  | <link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" /> | 
  |  | <link type="text/css" href="reset.css" rel="Stylesheet" /> | 
  |  | <link type="text/css" href="main.css" rel="Stylesheet" /> | 
  |  | <script type="text/javascript" src="jquery-1.3.2.min.js"></script> | 
  |  | </head> | 
  |  | <body> | 
  |  | <div class="container"> | 
  |  | <NOINDEX> | 
  |  | <div class="header"> | 
  |  | <div class="navArea"> | 
  |  | <table cellpadding="0" cellspacing="0" border="0"> | 
  |  | <tr> | 
  |  | <td> | 
  |  | <h1> | 
  |  | <a href="index.html" title="На главную">Главная<span /> </a> | 
  |  | </h1> | 
  |  | </td> | 
  |  | <td> | 
  |  | <a href="http://www.yandex.ru" title="Яндекс">Яндекс</a> | 
  |  | </td> | 
  |  | <td> | 
  |  | <a href="#" title="Услуги">Услуги</a> | 
  |  | </td> | 
  |  | <td> | 
  |  | <a href="#" title="Товары">Товары</a> | 
  |  | </td> | 
  |  | <td> | 
  |  | <a href="#" title="Контактная информация">Контактная информация</a> | 
  |  | </td> | 
  |  | </tr> | 
  |  | </table> | 
  |  | </div> | 
  |  | </div> | 
  |  | </NOINDEX> | 
  |  | <div class="textArea"> | 
  |  | <div class="leftMenu"> | 
  |  | <ul> | 
  |  | <li> | 
  |  | <span>Общее описание</span> | 
  |  | </li> | 
  |  | <li> | 
  |  | <a href="advantages.html" title="Преимущества">Преимущества</a> | 
  |  | </li> | 
  |  | </ul> | 
  |  | </div> | 
  |  | <div class="mainText"> | 
  |  | <h2>Описание тестовой страницы</h2> | 
  |  | <p>HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.</p> | 
  |  | <p>HTML является приложением («частным случаем») SGML (стандартного обобщенного языка разметки) и соответствует международному стандарту ISO 8879. XHTML же является приложением XML.</p> | 
  |  | <p><img src="images/ex.jpg" alt="Картинка" /></p> | 
  |  | </div> | 
  |  | </div> | 
  |  | <NOINDEX> | 
  |  | <div class="footer"> | 
  |  | <div class="downMenu"> | 
  |  | <div style="padding-top:7px; padding-bottom: 5px;">© 2009-2010 Examle</div> | 
  |  | <div>E-mail: <a href="mailto:mailbox@example.com">mailbox@example.com</a></div> | 
  |  | </div> | 
  |  | </div> | 
  |  | </NOINDEX> | 
  |  | </div> | 
  |  | </body> | 
  |  | </html> | 
 
 Данный HTML -код отображается в браузере, как показано на Рис. 2.1.
Замечание: В представленном HTML -коде используется CSS, о котором будет рассказано в следующем разделе. Разберем отдельные строки нашего HTML -кода.