Разное

Структура html страницы: Конспект «Структура HTML-документа» — Структура HTML-документа — HTML Academy

03.12.1986

Содержание

Структура HTML файла

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

Далее будут рассмотрены примеры содержания HTML файлов. Если вы не знаете, как создать HTML файл, то посмотрите статью «Как создать HTML файл».

Существует большое количество тегов, часть из которых мы постараемся разобрать в курсе.

Рассмотрим пример упрощённого HTML файла, страницы сайта: 

<!DOCTYPE html>
<html>
   <head>
      Свойства страницы, правила отображения, стили, скрипты, подключаемые файлы
   </head>
   <body>
      Содержание страницы
   </body>
</html>

Всё, что написано латиницей и заключено в скобки < > — это теги. Разберём пример по сторкам:

<!DOCTYPE html> — эта строчка говорит о том, что документ является html файлом. Следовательно, браузер сможет показать его как html страницу.

<html> … </html> — это парный тег (у него есть открывающая часть <html> и закрывающая </html>, которые различаются наличием слеша «/«). Внутри него заключено всё тело html документа.

<head> … </head> — всё, что находится внутри этого тега не выводится на экран. Но в нём содержится важная информация, которая поможет браузеру правильно показать страницу. К примеру, в этом теге могут находиться указание кодировки и языка страницы, правила отображения, стили и скрипты.

<body> … </body> — этот тег, внутри которого находится отображаемая область страницы.

Пример html страницы

Теперь разберём усложнённый пример html страницы, в котором будут добавлены несколько дополнительных тегов относительно предыдущего примера: 

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Про мышей</title>
 
</head>
<body>      Тише, мыши, кот на крыше,<br>
а котята ещё выше. <br>
Кот пошёл за молоком,<br>
а котята кувырком.<br>
Кот пришёл без молока,<br>
а котята ха-ха-ха.    </body>
</html>

Относительно предыдущего примера в новом появилось несколько изменений: во второй строке стоит <html lang=»ru»>. У этого тега появился атрибут lang=»ru». Обратите внимание, что атрибут ставится внутри скобок тега < >

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

Второе изменение касается содержания тега <head> … </head>. Здесь в первой строчке появилось указание на кодировку текста <meta charset="utf-8">. Тег «meta» называется метатегом.

Если сохранить html файл с одной кодировкой, а в «meta» написать другую, то все буквы в документе будут отображаться браузером как непонятные значки.

В блоке <head> … </head> также появилась строчка <title>Про мышей</title>. Этот тег указывает, какой заголовок будет у страницы браузера (у вкладки).

Внутри тега <body> … </body> появился текст стихотвориения. Каждая строчка этого стиха заканчивается на тег <br>, который говорит браузеру о том, что должна начаться новая строка. Если убрать все теги <br>, то браузер отобразит стихотворение как одну длинную строку без переносов. Обратите внимание, что тег <br>

не имеет закрывающей пары по аналогии с <body> … </body> или <head> … </head>.

Ради практики создайте файл на своём компьютере с любым названием и расширением «.html». К примеру, «page.html». Затем откройте его любым текстовым редактором и вставьте в него код из примера выше. Сохраните файл. Кликните на файл два раза и он откроется в браузере. Теперь измените что-либо в файле, сохраните и перезагрузите страницу в браузере.

Комментарии в HTML коде

Существует способ оставлять комментарии в HTML коде. Они могут быть полезными для разработчика. К примеру, комментарии о том, что необходимо доделать на сайте. Эти комментарии не видны обычным пользователям на странице браузера, но видны в HTML коде. Задать комментарий можно через такую конструкцию:

<!— текст_комментария —>. Пример комментариев: 

<!DOCTYPE html>
<html>
<head>
<!-- Комментарий в разделе head -->
</head>
<!-- Комментарий между блоками head и body-->
<body>
<!-- Комментарий в теле страницы -->
</body>
</html>

Комментарий может находиться в любой части сайта.

Комментировать можно всё, включая теги. Можно скрывать целые части страниц — ограничений нет.

Структура HTML-кода — Самоучитель HTML

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

Пример 4.1. Исходный код веб-страницы

Пример

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

<html>

 <head>

  <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

  <title>Пример веб-страницы</title>

 </head>

 <body>

  <h2>Заголовок</h2>

  <!— Комментарий —>

  <p>Первый абзац.</p>

  <p>Второй абзац.</p>

 </body>

</html>


Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41. html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.

 Рис. 4.1. Результат выполнения примера


 Далее разберем отдельные строки нашего кода.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее. 

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

 В дальнейшем будем применять преимущественно строгий <!DOCTYPE>, кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода.

 Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа. 

 <html>

 Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).

 <head>

 Заголовок документа, как еще называют блок <head>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <title>.

 <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

 Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

 <title>Пример веб-страницы</title>

 Тег <title> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).


Рис. 4.2. Вид заголовка в браузере

 Тег <title> является обязательным и должен непременно присутствовать в коде документа.

</head>

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

<body>

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

<h2>Заголовок</h2>

 HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h2> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h2>…<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

 <!— Комментарий —>

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

 Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом <!— и заканчиваются тегом —>. Все, что находится между этими тегами, отображаться на веб-странице не будет.

 <p>Первый абзац.</p>

 Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

 <p>Второй абзац.</p>

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

</body>

 Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.

</html>

 Последним элементом в коде всегда идет закрывающий тег </html>.

Структура html документа — разбор страницы с примерами

Вы узнаете какая должна присутствовать минимальная структура html документа.

Подробно и с примерами разберем каждый необходимый ее элемент.

Также поговорим о том, как правильно создавать файлы и страницы сайта.

Содержание:

  • Базовый каркас:
    • Doctype
    • HTML
    • Head:
      • Title
      • Meta
    • Body
  • Синтаксис
  • Как создать html документ:
    • Прописываем кодировку
    • Задаем кодировку самого документа
    • Как сохранить файл в html формате
  • Как открыть html документ
  • Смотрим исходный код сайта

Структура HTML документа

Давайте разберем структуру html документа чтобы понимать, как все работает.

Вы узнаете, какой каркас должен присутствовать на странице чтобы она считалась валидной (правильной).

Чтобы создать любую веб-страницу, в ней должен присутствовать минимальный набор тегов. Они расположены на примере ниже.

<!DOCTYPE html>
<html>
    <head>
        <title>Профессиональное создание сайта в интернете с примерами</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h2>Как создать сайт в интернете</h2>
        <p>Здесь размещается содержание документа, которое видно всем пользователям.
 
 </p>
    </body>
</html>

Браузер сам интерпретирует все эти теги и выводит их в одном для пользователя виде информации.

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

Визуальный пример html страницы

DOCTYPE html

Он всегда идет в самом начале веб-страницы.

Он необходим для указания типа текущего документа. А также помимо этого браузер понимает какая версия html используется.

В последней версии 5 он имеет такой вид:

<!DOCTYPE html>

Рекомендую его таким и использовать. С помощью данного элемента браузер дальше интерпретирует то, что мы ему напишем. То есть все теги в стандарте html 5.

Тег HTML

Тег html является контейнером, который заключает в себя все содержимое веб-страницы. Открывающие и закрывающие элементы в документе не обязательны.

Однако хороший стиль требует их использования.

Как правило, открывающий тег html идет вторым после определения документа при помощи doctype. Закрывающий всегда идет на странице последним.

Этот тег сообщает браузеру, где наш html документ начинается и где заканчивается.

Поэтому все остальные элементы (кроме doctype) должны быть вложены внутри этого контейнера.

Тег head

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

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

Содержимое head не отображается напрямую на веб-странице, кроме тега title. Он отвечает за заголовок страницы.

В общем, в этом элементе хранится вся техническая информация о странице. Например, тип кодировки html страницы.

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

Тег title

У head есть один обязательный компонент. Это тег title.

Он отвечает за то, как будет выглядеть html заголовок страницы. То, что вы напишите сюда, будет отображаться во вкладке браузера.

Отнеситесь к этому серьезно!

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

И обязательно вписываем сюда осмысленные слова. То есть конкретно пишем, о чем будет страница.

<head>
    <title>Профессиональное создание сайта в интернете с примерами</title>
</head>

Конечно же, при этом нужно вставлять ключевые слова и делать свое название более привлекательным. Иначе вы просто рискуете потерять трафик с поиска.

Тег meta

Еще один элемент, это тег meta. Он не парный и особой ценности не представляет. Однако наиболее важными элементами являются его атрибуты.

Таким образом, с помощью параметров и атрибутов, тег может хранить важную информацию о вашей странице.

Давайте к элементу я пропишу параметр charset и в нем укажу предпочтительную кодировку документа.

<head>
    <title>Профессиональное создание сайта в интернете с примерами</title>
    <meta charset="utf-8">
</head>

Обратите внимание, как указывается параметр.

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

Обязательно ее указывайте в своих документах. Иначе на вашем сайте вместо текста появятся некрасивые иероглифы (кракозябры).

Тег body

Чуть ниже идет тег body. Это основное тело документа.

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

Обратите внимание

Body всегда идет ниже тега head. То есть сначала идет техническая информация о странице и только потом основной контент для пользователя. Но никак не наоборот!

Внутри body обязательно должен присутствовать тег h2. Это заголовок материала. То есть, как будет называться ваша статья.

Рекомендую название делать не более 55 символов с пробелами.

Далее чуть ниже идут элементы текста. Это обязательно будет абзац (тег p), картинки, какие-то выделения и так далее.

Синтаксис html

Немного стоит упомянуть и про синтаксис html. Сразу старайтесь располагать теги в таком удобном виде, как на примере выше.

Конечно же, можно расположить их и в хаотичном порядке.

<!DOCTYPE html>
<html><head>
<title>Профессиональное создание сайта в интернете с примерами</title><meta charset="utf-8">
</head><body><p>Здесь размещается содержание документа, которое видно всем пользователям.</p></body>
</html>

Браузеру будет все равно. Он по-любому отобразит страницу правильно.

Но вам самим будет очень неудобно редактировать html код страницы. Поэтому рекомендую не лепить и делать аккуратно.

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

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

<!DOCTYPE html>
<html>
    <head>
        <title>Название документа</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h2>Название материала</h2>
        <p>Основной текст</p>
    </body>
</html>

То есть тег head должен идти отступом в одну табуляцию относительно тега html. Body идет на уровне с head поскольку он тоже вложен в контейнер html.

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

Исключение лишь могут составлять head и body.

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

<!DOCTYPE html>
<html>
<head>
    <title>Название документа</title>
    <meta charset="utf-8">
</head>
<body>
    <p>Основной текст</p>
</body>
</html>

При большой вложенности этот метод поможет сэкономить место и не потеряться в структуре html.

Как вы знаете, теги можно вкладывать друг в друга.

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

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

Важно четко соблюдать порядок!

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

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

Правильный пример:

<body>
    <p>Здесь размещается содержание документа, которое видно всем пользователям.</p>
</body>

Неправильный пример:

<body>
    <p>Здесь размещается содержание документа, которое видно всем пользователям.
</body>
    </p>

Кроме того, в один тег могут быть вложены несколько элементов. Но принцип тут тот же самый.

Сначала мы открываем его. Затем вкладываем туда несколько тегов и потом закрываем.

Для наибольшей удобности дополнительно можно использовать html комментарии в коде.

Например, прописать за что отвечает данный кусок кода. Это очень полезно при разработке.

Сам комментарий может быть, как однострочным, так и многострочным.

<!DOCTYPE html><!--Указываем тип документа-->
<html>
<head>
    <title>Название документа</title>
    <meta charset="utf-8"><!--Кодировка-->
</head>
<body>
    <!--Главное содержание страницы для пользователей-->
    <p>Основной текст</p>
</body>
</html>

Прописывается он между конструкциями <!— —>.

Как создать файл html

Возможно, некоторые из вас не знают, как создать файл html. Для этой задачи есть много специальных программ:

  • Brackets
  • Блокнот
  • Notepad++
  • Sublime Text
  • Atom и другие

Если у вас Windows, то Блокнот будет уже доступен по умолчанию. Но им не удобно пользоваться.

Рекомендую для начала использовать бесплатный редактор html страниц Notepad++.

В нем есть много возможностей для удобной работы с кодом.

Когда запустите редактор, то перед вами уже будет новый пустой файл.

Пропишите в нем тот скелет html страницы (каркас), который мы выше разбирали. Он должен всегда присутствовать.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Профессиональное создание сайта в интернете с примерами</title> 
        <meta charset="utf-8"> 
    </head> 
    
    <body> 
        <h2>Как создать сайт в интернете</h2> 
        <p>Здесь размещается содержание документа, которое видно всем пользователям.</p> 
   </body> 
</html>

Текст можете изменить под себя. В общем, это будет самая простая html страница.

HTML кодировка

При создании страниц всегда прописывайте кодировку в meta теге. Это служебный тег, который вставляют в head.

Вообще, этот meta элемент многогранный.

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

Сейчас у нас он играет роль указателя кодировки. Здесь есть специальная запись. Она говорит браузеру о том, что данный документ создан в кодировке utf-8.

<meta charset="utf-8">

Для чего вообще нужна кодировка?

Не секрет, что во всем мире пишут и разговаривают на разных языках.

Если мы создаем страницу и пишем на русском языке, то в Германии будут создавать и писать уже на немецком.

В других странах уже свой язык.

Раньше при создании html страницы нужно было указывать кодировку, что мы пишем на русском языке. Немцам нужно было указывать, что они пишут на немецком и так далее.

Когда заходим на страницу, браузер уже понимает, на каком языке написан сайт.

Также он понимает какой язык для текста используется. Соответственно, он пытается отобразить этот текстовый контент в зависимости от заданной кодировки.

К сожалению, это не всегда получалось.

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

То есть браузер просто не понимал, что это за символы.

Неправильно задана html кодировка

Как решение этой проблемы была создана универсальная кодировка utf-8.

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

Достаточно было указать универсальную utf-8 и у вас сайт отображался бы нормально во всех браузерах.

При этом упрощается еще работа и с базой данных. Поэтому здесь имейте в виду, что кодировку мы всегда будем указывать в utf-8.

Но тут нужно обратить свое внимание еще на одну вещь.

Сохраняем html utf-8

Чтобы все работало и браузер отображал страницу, желательно сохранить сам html документ в utf-8.

В этом программа Notepad ++ нам очень хорошо помогает.

Здесь есть пункт «Кодировки». Если у вас сейчас кодировка не стоит (как у меня на нижнем рисунке), то щелкните по пункту «Преобразовать в UTF-8 без BOM».

В этом случае ваш html файл будет преобразован в кодировку utf-8.

Сохраните изменения.

В правом нижнем углу вы найдете надпись «Dos\Windows ANSI as UTF-8». Это значит, что документ создан в режиме utf-8 и отображение будет нормальным.

И сразу такой совет!

Зайдите в «Опции» —> «Настройки». Здесь есть вкладка «Новый документ».

Сразу поставьте галочку на «UTF-8 без метки BOM». Так у вас все новые документы будут сразу создаваться в этой кодировке.

Как сохранить html страницу правильно

После того, как задали кодировку и структуру html страницы, вам нужно нажать на «сохранение». Заходим во вкладку «Файл» —> «Сохранить как…».

Имя файла может быть любое.

Но по умолчанию и особенно если это главная страница сайта, то сохраняйте ее как index.html.

Когда набираем адрес сайта без указания конкретной страницы, это значит, что мы запрашиваем страницу index. html.

То есть, когда мы обращаемся к серверу, он развернет именно индексную страницу.

Если же мы указываем какую-то конкретную страницу, то в итоге она и будет выводиться.

Но если адрес не указан, то будет возвращена индексная страница. Поэтому по умолчанию мы называем страницу index.html.

И как вы уже должны заметить, расширение файла должно быть html. То есть в типе файла выбираем «Hyper Text Markup Language» и нажимаем «Сохранить».

Как открыть html файл для просмотра страницы

Для этого используем любой браузер:

  • Google Chrome;
  • Opera;
  • Edge;
  • Mozilla Firefox;
  • Safari и другие.

Не зря мы сохраняем файлы с расширением html. Ведь только этот тип документа воспроизводят браузеры. А сам HTML — это стандарт разметки страницы для последующего воспроизведения браузерами.

В общем, кликаем по файлу правой кнопкой мыши.

В меню наводим на «Открыть с помощью» и выбираем нужный вариант браузера.

Если они не отобразятся, то кликаем на «Выбрать другое приложение». Там уже среди списка выбираем нужную программу для чтения html страниц.

Если же вам нужно отредактировать код, то выбираем подходящие редактор. Рекомендую использовать Notepad++.

Как посмотреть html код страницы в браузере

Это очень полезно на практике. Например, узнать, какую структуру html кода использует тот или иной сайт.

Посмотреть код очень просто. Достаточно нажать сочетание клавиш Ctrl + U. В новой вкладке вам откроется исходный код страницы сайта.

Еще можно в адресной строке прямо перед адресом страницы прописать:

view-source:

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

Еще в браузерах есть встроенный инструмент веб-разработчика.

Доступ к нему в меню у каждой программы будет разным. Однако клавишей F12 этот инструмент откроется в любом браузере.

Во вкладке «Elements» слева будет html код, а справа стили CSS.

Удобен такой инструмент тем, что в нем можно править код и сразу посмотреть результат.

Также при редактировании могут высвечиваться подсказки. Это тоже полезно.

На этом все!

Теперь вы знаете, как создать html страницу. Для этого мы рассмотрели саму структуру документа.

Также я дал вам некоторые инструменты для удобной работы с кодом. Еще были важные правила по кодировке и работе с файлами. Обязательно их соблюдайте!

Глобальная структура HTML-документа

Глобальная структура HTML-документа

 предыдущий следующий содержимое   элементы   атрибуты   индекс

Содержание

  1. Введение в структуру HTML документ
  2. Информация о версии HTML
  3. HTML элемент
  4. Головка документа
    1. ГОЛОВКА элемент
    2. НАЗВАНИЕ элемент
    3. название атрибут
    4. Метаданные
      • Указание метаданных
      • МЕТА элемент
      • Профили метаданных
  5. Тело документа
    1. КОРПУС элемент
    2. Идентификаторы элементов: id и класс атрибуты
    3. Блочные и встроенные элементы
    4. Группировка элементов: DIV и SPAN элементы
    5. Заголовки: h2 , h3 , h4 , х5 , Х5 , Х6 элементы
    6. АДРЕС элемент

7.

1 Введение в структуру HTML документ

Документ HTML 4 состоит из трех частей:

  1. строка, содержащая версию HTML информация,
  2. раздел декларативного заголовка (разделенный HEAD элемент),
  3. тело, содержащее фактическое содержимое документа. Тело может быть реализовано BODY элемент или элемент Элемент FRAMESET .

Пробелы (пробелы, новые строки, вкладки и комментарии) могут появляться перед или после каждого раздела. Разделы 2 и 3 должны быть разделены HTML элемент.

Вот пример простого HTML-документа:



   <ГОЛОВА>
      Мой первый HTML-документ
   
   <ТЕЛО>
      
Привет, мир!

Действительный документ HTML указывает, какая версия HTML используется в документе. Декларация типа документа называет определение типа документа (DTD), используемое для документа (см. [ИСО8879]).

HTML 4.01 определяет три DTD, поэтому авторы должны включать одно из следующих объявления типа документа в своих документах. DTD различаются по элементам они поддерживают.

URI в каждом объявлении типа документа позволяет агентам пользователя загружать DTD и любые наборы сущностей, которые нужный. Следующие (относительные) URI относятся к DTD и наборы сущностей для HTML 4:

  • «strict.dtd» — строгое DTD по умолчанию
  • «loose.dtd» — свободный DTD
  • «frameset.dtd» — DTD для набора фреймов документы
  • «HTMLlat1.ent» — сущности Latin-1
  • «HTMLsymbol.ent» — Сущности символов
  • «HTMLspecial.ent» — Специальные объекты

Связь между общедоступными идентификаторами и файлами может быть указана с помощью файл каталога в формате, рекомендованном Oasis Open Consortium (см. [ОАЗИСОТКРЫТ]). Образец файла каталога для HTML 4.01 включен в начало раздела, посвященного SGML. информация для HTML. Последние две буквы декларации указывают на язык DTD. Для HTML это всегда английский язык («EN»).

Примечание. Начиная с версии HTML 4.01 от 24 декабря, Рабочая группа HTML придерживается следующей политики:

  • Любые изменения будущих DTD HTML 4 не сделают документы, которые соответствуют DTD настоящей спецификации. Рабочая группа HTML оставляет за собой право исправлять известные ошибки.
  • Программное обеспечение, соответствующее DTD настоящей спецификации, может игнорировать функции будущих DTD HTML 4, которые он не распознает.

Это означает, что в объявлении типа документа авторы могут безопасно использовать системный идентификатор, который относится к последней версии HTML 4 DTD. Авторы также может выбрать использование системного идентификатора, который относится к конкретному (датированному) версия HTML 4 DTD, когда требуется проверка для этого конкретного DTD. W3C приложит все усилия, чтобы сделать архивные документы бессрочно доступными по адресу их первоначальный адрес в их первоначальной форме. 


 HTML  O O (%html.content;) -- корневой элемент документа -->

Начальный тег: необязательный , Конечный тег: опционально

Определения атрибутов

версия = cdata [CN]
Устарело. Значение этого атрибута указывает, какая версия HTML DTD управляет текущим документ. Этот атрибут устарел, поскольку он дублирует информацию о версии, предоставляемую типом документа. декларация.

Атрибуты, определенные в другом месте

  • язык (язык информация), дир (текст направление)

После объявления типа документа оставшаяся часть HTML-документа содержится в элементе HTML . Таким образом, типичный HTML-документ имеет это структура:

 01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

  ...Голова, тело и т.д. идут сюда...

7.4 Головка документа

7.4.1

ГОЛОВА элемент


 HEAD  O O (%head.content;) +(%head.misc;) -- заголовок документа -->
 профиль  %URI; #ПРЕДПОЛАГАЕТСЯ -- именованный словарь метаинформации --
  >

Начальный тег: необязательный , Конечный тег: опционально

Определения атрибутов

профиль = uri [CT]
Этот атрибут указывает расположение одного или нескольких профилей метаданных, разделены пробелом. Для будущих расширений пользовательские агенты должны учитывать значение должно быть списком, даже если эта спецификация рассматривает только первый URI должен быть значимым. Профили обсуждаются ниже в раздел о метаданных.

Атрибуты, определенные в другом месте

  • язык (язык информация), дир (текст направление)

Элемент HEAD содержит информацию о текущем документе, например как его название, ключевые слова, которые могут быть полезны поисковым системам, и другие данные это не считается содержанием документа. Пользовательские агенты обычно не отображают элементы, которые появляются в HEAD как содержимое. Однако они могут сделать информация в HEAD доступен пользователям через другие механизмы.

7.4.2

НАЗВАНИЕ элемент

 TITLE  - - (#PCDATA) -(%head.misc;) -- название документа -->

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • язык (язык информация), дир (текст направление)

Каждый документ HTML должен иметь НАЗВАНИЕ элемент в разделе HEAD .

Авторы должны использовать элемент TITLE для идентификации содержимого документ. Поскольку пользователи часто обращаются к документам вне контекста, авторы должны предоставлять контекстно-богатые заголовки. Таким образом, вместо заголовка, такого как «Введение», которое не дает большого контекстуального фона, авторы следует указать заголовок, например «Введение в средневековое пчеловодство». вместо.

Из соображений доступности пользовательские агенты всегда должны делать содержимое Элемент TITLE , доступный пользователям (включая TITLE элементы, встречающиеся в кадрах). Механизм для этого зависит от пользователя агент (например, как заголовок, разговорный).

Заголовки могут содержать символы (для символов с диакритическими знаками, специальных символов и т. д.), но не может содержать другие разметка (включая комментарии). Вот пример названия документа:

 w3.org/TR/html4/strict.dtd">

<ГОЛОВА>
Исследование динамики населения
  ... прочие элементы головки... 

<ТЕЛО>
  ... корпус документа...

7.4.3 Название

атрибут

Определения атрибутов

заголовок = текст [CS]
Этот атрибут предлагает консультативную информацию об элементе, для которого он установлен.

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

Значения атрибута title могут отображаться агентами пользователя по-разному. способов. Например, визуальные браузеры часто отображают заголовок как «инструмент». подсказка» (короткое сообщение, которое появляется, когда указывающее устройство останавливается над объект). Пользовательские аудиоагенты могут произносить информацию о заголовке аналогичным образом. контекст. Например, установка атрибута ссылки позволяет агентам пользователя (визуальные и невизуальные), чтобы сообщить пользователям о характере связанных ресурс:

  ...какой-то текст... 
Вот фото

   я нырял с аквалангом прошлым летом

  ...ещё текст...

Атрибут title играет дополнительную роль при использовании с LINK . элемент для обозначения внешняя таблица стилей. Подробную информацию см. в разделе о ссылках и таблицах стилей.

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

7.4.4 Метаданные

Примечание. W3C Структура описания ресурсов (см. [RDF10]) стала Рекомендация от февраля 1999 г. RDF позволяет авторам указывать машиночитаемые метаданные о HTML-документах и ​​других сетевых ресурсах.

HTML позволяет авторам указывать метаданные — скорее информацию о документе. чем содержание документа — разными способами.

Например, чтобы указать автора документа, можно использовать МЕТА элемент следующим образом:

Элемент META указывает свойство (здесь «Автор») и назначает ценность для него (здесь «Дэйв Рэггетт»).

Эта спецификация не определяет набор допустимых свойств метаданных. значение свойства и набор допустимых значений для этого свойства должны быть определенный в справочном словаре, называемом профилем. За Например, профиль, предназначенный для помощи поисковым системам в индексировании документов, может определять такие свойства, как «автор», «авторское право», «ключевые слова» и т. д.

Указание метаданных 

Как правило, указание метаданных включает два шага:

  1. Объявление свойства и значения для этого свойства. Это можно сделать за два способы:
    1. Из документа через элемент META .
    2. Извне документа, путем ссылки на метаданные через LINK элемент (см. раздел по ссылке виды).
  2. Ссылка на профиль, в котором свойство и его юридические значения определены. Для обозначения профиля используйте кнопку атрибут profile элемента HEAD .

Обратите внимание, что поскольку профиль определен для элемента HEAD , этот же профиль применяется ко всем элементам META и LINK в заголовке документа.

Пользовательские агенты не обязаны поддерживать механизмы метаданных. Для тех, кто выбрать поддержку метаданных, эта спецификация не определяет, как метаданные следует интерпретировать.

Элемент
META 
 META  - O EMPTY -- общая метаинформация -->
 http-equiv  ИМЯ #ПРЕДПОЛАГАЕТСЯ -- Имя заголовка ответа HTTP --
    имя  ИМЯ #ПРЕДПОЛАГАЕТСЯ -- имя метаинформации --
    content  CDATA #REQUIRED -- связанная информация --
    схема  CDATA #ПРЕДПОЛАГАЕТСЯ -- выберите форму содержания --
  >

Начальный тег: требуется , Конечный тег: запрещено

Определения атрибутов

Для следующих атрибутов допустимые значения и их интерпретация профиль зависимый:

имя = имя [CS]
Этот атрибут идентифицирует имя свойства. В этой спецификации не указаны допустимые значения для этого атрибута.
содержание = cданные [CS]
Этот атрибут определяет значение свойства. Эта спецификация не список допустимых значений для этого атрибута.
схема = cdata [CS]
Этот атрибут называет схему, которая будет использоваться для интерпретации значения свойства. (подробности см. в разделе о профилях).
http-equiv = имя [CI]
Этот атрибут можно использовать вместо имени атрибут. Серверы HTTP используют этот атрибут для сбора информации для HTTP. заголовки ответных сообщений.

Атрибуты, определенные в другом месте

  • язык (язык информация), дир (текст направление)

Элемент META можно использовать для идентификации свойств документа (например, автор, срок годности, список ключевых слов и т. д.) и присваивать значения тем характеристики. Эта спецификация не определяет нормативный набор характеристики.

Каждый Элемент META определяет пару свойство/значение. атрибут name идентифицирует свойство и атрибут Атрибут content указывает значение свойства.

Например, следующее объявление устанавливает значение для автора недвижимость:

Атрибут lang можно использовать с META , чтобы указать язык для значение атрибута содержимого . Это позволяет использовать синтезаторы речи. правила произношения, зависящие от языка.

В этом примере имя автора объявлено французским:

Примечание. Элемент META представляет собой общий механизм для указание метаданных. Однако некоторые элементы и атрибуты HTML уже обрабатывают некоторые фрагменты метаданных и могут использоваться авторами вместо META для укажите эти части: элемент TITLE , элемент ADDRESS , элемент ИНС и ДЕЛ элементы, атрибут title и атрибут cite .

Примечание. Когда свойство, указанное в META элемент принимает значение, которое является URI, некоторые авторы предпочитают указывать метаданные через LINK элемент. Таким образом, следующее объявление метаданных:

также может быть записано:
META и заголовки HTTP

Атрибут http-equiv может использоваться вместо атрибута имени и имеет особое значение, когда документы извлекаются через протокол передачи гипертекста (HTTP). HTTP серверы могут использовать имя свойства, указанное параметром . http-эквивалент для создания заголовка в стиле [RFC822] в HTTP-ответ. См. спецификацию HTTP ([RFC2616]) для сведения о допустимых заголовках HTTP.

Следующий образец декларации META :

приведет к заголовку HTTP:

Истекает: вторник, 20 августа 1996 г., 14:25:27 по Гринвичу.

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

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

META и поисковые системы

Обычное использование для META — указать ключевые слова, по которым будет выполняться поиск. движок может использовать для улучшения качества результатов поиска. Когда несколько Элементы META предоставляют зависящую от языка информацию о документ, поисковые системы могут фильтровать атрибут lang для отображения результатов поиска. результаты с использованием языковых предпочтений пользователя. Например,

<-- Для говорящих на американском английском -->

<-- Для носителей британского английского -->

<-- Для говорящих по-французски -->

Эффективность поисковых систем также можно повысить с помощью LINK элемент для указания ссылок на переводы документа на другие языки, ссылки на версии документа на других носителях (например, PDF), и, когда документ является частью коллекции, ссылки на соответствующую отправную точку для просмотр коллекции.

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

МЕТА и ФОТО Платформа для выбора интернет-контента (PICS, указанный в [PICS]) представляет собой инфраструктуру для связывания меток (метаданных) с интернет-контентом. Первоначально разработан, чтобы помочь родителям и учителям контролировать то, что дети могут доступ в Интернете, это также облегчает другие виды использования этикеток, в том числе подпись кода, конфиденциальность и управление правами на интеллектуальную собственность.

В этом примере показано, как можно использовать объявление META для включения Этикетка PICS 1.1:

<ГОЛОВА>
 
   <em> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/7/835856/slide_3.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/7/835856/slide_3.jpg' /></noscript> .. название документа ... </em>
META и информация по умолчанию

Элемент META может использоваться для указания информации по умолчанию для документ в следующих инстанциях:

  • Сценарий по умолчанию язык.
  • Таблица стилей по умолчанию язык.
  • Символ документа кодирование.

В следующем примере указывается кодировка символов для документа как ISO-8859-5
Профили метаданных 
Атрибут профиля HEAD указывает расположение профиля метаданных. Стоимость Атрибут профиля является URI. Пользовательские агенты могут использовать этот URI в двух способы:
  • Как глобально уникальное имя. Пользовательские агенты могут распознавать имя (фактически не извлекая профиль) и выполнять некоторые действия на основе известные соглашения для этого профиля. Например, поисковые системы могут предоставлять интерфейс для поиска по каталогам HTML-документов, где эти все документы используют один и тот же профиль для представления записей каталога.
  • В качестве ссылки. Пользовательские агенты могут разыменовывать URI и выполнять некоторые действия. на основе фактических определений в профиле (например, разрешить использование профиля в текущем документе HTML). Эта спецификация не определить форматы для профилей.

Этот пример относится к гипотетическому профилю, определяющему полезные свойства для индексации документов. Свойства, определенные этим профилем, включая «автор», «авторское право», «ключевые слова» и «дата» — их значения устанавливаются последующие Объявления META .

 
  Как заполнять титульные листы Меморандума

При написании этой спецификации общепринятой практикой является использование форматы даты, описанные в [RFC2616], раздел 3. 3. В качестве эти форматы относительно сложны для обработки, мы рекомендуем авторам использовать Формат даты [ISO8601]. Для получения дополнительной информации см. разделы, посвященные INS и ДЕЛ элементы.

Атрибут схемы позволяет авторам предоставлять пользовательские агенты больше контекст для правильной интерпретации метаданных. Временами такие дополнительная информация может иметь решающее значение, например, когда метаданные могут быть указаны в разные форматы. Например, автор может указать дату в (неоднозначный) формат «10-9-97»; это означает 9 октября 1997 года или 10 сентября 1997? Значение атрибута схемы «Месяц-День-Год» устранит неоднозначность этой даты ценность.

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

Например, следующее Объявление схемы может помочь пользовательскому агенту определить, что значением свойства «идентификатор» является код ISBN номер:

Значения атрибута схемы зависят от свойства имя и связанные с ним профиль .

Примечание. Одним из примеров профиля является Dublin Core (см. [DCORE]). Этот профиль определяет набор рекомендуемых свойств для электронных библиографических описаний и предназначен для продвижения интероперабельность между разрозненными моделями описания.

7.5 Корпус документа

7.5.1

КОРПУС элемент
 BODY  O O (%block;|SCRIPT)+ +(INS|DEL) -- тело документа -->
 при загрузке  %Script; #ПРЕДПОЛАГАЕТСЯ -- документ был загружен --
    при выгрузке  %Script; #ПРЕДПОЛАГАЕТСЯ -- документ был удален --
  >

Начальный тег: необязательный , Конечный тег: опционально

Определения атрибутов

background = uri [CT]
Устарело. значением этого атрибута является URI, обозначающий ресурс изображения. Изображение обычно мозаичный фон (для визуальных браузеров).
текст = цвет [CI]
Устарело. Это Атрибут устанавливает цвет переднего плана для текста (для визуальных браузеров).
ссылка = цвет [CI]
Устарело. Это Атрибут задает цвет текста, помечающего непросмотренные гипертекстовые ссылки (для визуального браузеры).
vlink = цвет [CI]
Устарело. Это атрибут задает цвет текста, помечающего посещенные гиперссылки (для визуального браузеры).
ссылка = цвет [CI]
Устарело. Это Атрибут задает цвет текста, помечающего гипертекстовые ссылки при выборе user (для визуальных браузеров).

Атрибуты, определенные в другом месте

  • id , class (идентификаторы всего документа)
  • язык (язык информация), дир (текст направление)
  • title (название элемента)
  • стиль (встроенный информация о стиле)
  • bgcolor (цвет фона)
  • при загрузке , при выгрузке (внутренние события)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Тело документа содержит содержимое документа. Содержание может быть представлены агентом пользователя различными способами. Например, для визуального браузерах, вы можете думать о теле как о холсте, на котором отображается содержимое: текст, изображения, цвета, графика и т. д. Для звуковых пользовательских агентов одно и то же содержимое можно говорить. Поскольку таблицы стилей теперь предпочтительный способ указать представление документа, презентационное атрибуты BODY были устарел.

УСТАРЕВШИЙ ПРИМЕР:
Следующий фрагмент HTML иллюстрирует использование устаревших атрибутов. Он устанавливает фон цвет холста на белый, цвет переднего плана текста на черный и цвет гиперссылок сначала на красный, на фуксию при активации и на темно-бордовый один раз посетил.



<ГОЛОВА>
 Исследование динамики населения

<ТЕЛО bgcolor="белый" текст="черный"
  ссылка = "красный" alink = "фуксия" vlink = "бордовый">
    . .. тело документа...

Тот же эффект при использовании таблиц стилей можно выполнить следующим образом:



<ГОЛОВА>
 Исследование динамики населения
 <СТИЛЬ type="text/css">
  ТЕЛО { фон: белый; черный цвет}
  A: ссылка {цвет: красный}
  A: посетил { цвет: темно-бордовый }
  A:активный {цвет: фуксия}
 

<ТЕЛО>
    ... тело документа...

Использование внешних (связанных) таблиц стилей позволяет гибко изменять презентация без редактирования исходного HTML-документа:



<ГОЛОВА>
 Исследование динамики населения
 <ССЫЛКА rel="stylesheet" type="text/css" href="smartstyle.css">

<ТЕЛО>
    ... тело документа...

Наборы фреймов и тела HTML. Документы, содержащие наборы фреймов заменяют элемент BODY на Элемент FRAMESET . Пожалуйста, обратитесь к разделу о фреймах для получения дополнительной информации.

7.5.2 Идентификаторы элементов:

id и класс атрибуты

Определения атрибутов

id = имя [CS]
Этот атрибут присваивает имя элементу. Это имя должно быть уникальным в документ.
класс = cdata-list [CS]
Этот атрибут присваивает элементу имя класса или набор имен классов. Любому количеству элементов может быть присвоено одно и то же имя класса или имена. Несколько имена классов должны быть разделены пробелами.
Атрибут id назначает уникальный идентификатор элемента (который может быть проверен синтаксическим анализатором SGML). Например, следующие абзацы отличаются своими id значения:
 Это абзац с уникальным названием. 


 Это также абзац с уникальным именем.

Атрибут id имеет несколько ролей в HTML:

  • В качестве селектора таблиц стилей.
  • В качестве целевого якоря для гипертекста ссылки.
  • Как средство ссылки на определенный элемент из скрипта.
  • Как имя объявленного элемента OBJECT .
  • Для обработки общего назначения пользовательскими агентами (например, для идентификации полей при извлечении данных из HTML-страниц в базу данных, переводе HTML документы в другие форматы и т. д.).

Атрибут класса , с другой стороны, назначает одно или несколько имен классов к элементу; можно сказать, что элемент принадлежит к этим классам. Имя класса может совместно использоваться несколькими экземплярами элемента. Класс атрибут имеет несколько ролей в HTML:

  • В качестве селектора таблицы стилей (когда автор хочет присвоить информацию о стиле набору элементов).
  • Для обработки общего назначения пользовательскими агентами.

В следующем примере ДИАПАЗОН элемент используется в сочетании с атрибутами id и class для разметки документировать сообщения. Сообщения появляются как на английском, так и на французском языках.



Переменная объявлена ​​дважды

Необъявленная переменная

Неверный синтаксис имени переменной
 


Переменная déclarée deux fois

Переменная indéfinie

Ошибка синтаксиса для переменной

Следующие правила стиля CSS указывают визуальным агентам пользователя отображать информационные сообщения зеленым цветом, предупреждающие сообщения желтым цветом и сообщения об ошибках красным:

SPAN.info { цвет: зеленый }
SPAN. warning { цвет: желтый }
SPAN.error { цвет: красный }

Обратите внимание, что французское «msg1» и английское «msg1» могут не отображаться в один и тот же документ, так как они имеют одно и то же значение id . Авторы могут в дальнейшем использовать из атрибут id для уточнения представления отдельных сообщений, сделать их целевые якоря и т. д.

Почти каждому элементу HTML можно назначить идентификатор и класс Информация.

Предположим, например, что мы пишем документ о программировании язык. Документ должен включать ряд предварительно отформатированных примеров. Мы используем Элемент PRE для форматирования примеров. Мы также назначаем фон цвет (зеленый) для всех экземпляров элемента PRE , принадлежащего классу «пример».

<ГОЛОВА>
 <em> ... название документа ... </em> 
<СТИЛЬ type="text/css">
PRE.example { фон : зеленый }


<ТЕЛО>
<ПРЕД>
  ...пример кода здесь. ..

Установив атрибут id для этого примера, мы можем (1) создать гиперссылку к нему и (2) переопределить информацию о стиле класса с помощью стиля экземпляра Информация.

Примечание. Атрибут id использует то же пространство имен, что и атрибут имя 9Атрибут 0016 при использовании для имен привязок. Пожалуйста обратитесь к разделу по анкерам с идентификатор для получения дополнительной информации.

7.5.3 Блочный и встроенный элементы

Некоторые элементы HTML, которые могут появляться в BODY , считаются «блочными», в то время как другие «встроенный» (также известный как «уровень текста»). Различие основано на несколько понятий:

Модель контента
Как правило, блочные элементы могут содержать встроенные элементы и другие элементы. элементы блочного уровня. Как правило, встроенные элементы могут содержать только данные и другие встроенные элементы. Этому структурному различию присуща идея о том, что блочные элементы создают «более крупные» структуры, чем встроенные элементы.
Форматирование
По умолчанию элементы блочного уровня форматируются иначе, чем встроенные элементы. Как правило, элементы блочного уровня начинаются с новой строки, встроенные элементы не надо. Для получения информации о пробелах, разрывах строк и форматировании блоков см. пожалуйста, обратитесь к разделу по тексту.
Направленность
По техническим причинам, связанным с двунаправленным [UNICODE] текстовый алгоритм, блочные и встроенные элементы различаются тем, как они наследуют информация о направленности. Подробнее см. в разделе о наследовании направления текста.

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

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

7.5.4 Элементы группировки:

DIV и ПРОЛЕТ элементов
 DIV  - - (%flow;)* -- универсальный контейнер языка/стиля -->

 SPAN  - - (%inline;)* -- универсальный контейнер языка/стиля -->

Начальный тег: требуется , Конечный тег: требуется

Атрибуты, определенные в другом месте

  • id , class (идентификаторы всего документа)
  • язык (язык информация), дир (текст направление)
  • title (заголовок элемента)
  • стиль (встроенный информация о стиле)
  • выравнивание (выравнивание)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

DIV и SPAN элементы в сочетании с id и атрибуты класса , предлагают общий механизм для добавления структуры к документы. Эти элементы определяют контент как встроенный ( ДИАПАЗОН ) или блочного уровня ( DIV ), но не налагает никаких других презентационных идиом на содержание. Таким образом, авторы могут использовать эти элементы в сочетании с таблицами стилей, атрибутом lang и т. д. для адаптации HTML для своих нужд и вкусов.

Предположим, например, что мы хотим сгенерировать HTML-документ на основе база данных клиентов. Поскольку HTML не включает элементы, идентифицировать такие объекты, как «клиент», «номер телефона», «адрес электронной почты» и т. д., мы используем DIV и SPAN для достижения желаемой структурной и презентационной последствия. Мы могли бы использовать элемент TABLE следующим образом, чтобы структурировать информация:



<ДЕЛ>

Информация о клиенте:
<ТАБЛИЦА>
Фамилия:Бойера
Имя:Стефан
Тел. :(212) 555-1212
Электронная почта:[email protected]
<ДЕЛ>

Информация о клиенте: <ТАБЛИЦА> Фамилия:Лафон Имя:Ив Тел.:(617) 555-1212 Электронная почта:[email protected]