This article has been localized into Russian by the community.
Ваша первая веб-страница
Вот пример одного из самых простых документов HTML5, которые вы можете создать. Он начинается с doctype HTML5, за которым следует заголовок страницы, а затем некоторое содержимое, в данном случае один абзац.
<!DOCTYPE html>
<title>Your first HTML5 Document</title>
<p>Okay, now we’re going somewhere!</p>Вы должны иметь представление о том, как это будет выглядеть в браузере - заголовок документа «Ваш первый документ HTML5» и текст «Хорошо, теперь мы куда-то идем!» написано в левой верхней части страницы.
Объявление doctype сообщает всем, кто читает документ, о том, что следует HTML-контент.
<!DOCTYPE html>Если вы просматривали разметку документов HTML ранее, возможно, вы видели объявление типа документа, которое выглядело примерно так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Даже профессиональные веб-разработчики копируют и вставляют этот длинный doctype из одного документа в другой - новый более простой тип документа легко запомнить, и, поскольку не объявлена конкретная версия, все новые будущие функции будут автоматически доступны для вашей страницы.
Для чего нужен DOCTYPE?
Но почему вообще существует DOCTYPE? Все браузеры имеют два разных способа чтения вашего документа - стандартный режим и причудливый. Если вы не скажете им, с каким документом они работают, он перейдет в причудливый режим. Это как старый способ чтения вашего документа - могут быть некоторые недостатки, и вы можете быть уверены, что не все браузеры читают ваш документ одинаково. Объявление DOCTYPE заставляет браузеры переходить в стандартный режим - «новый» способ чтения вашего документа. Используя стандартный режим, большинство браузеров будут читать ваш документ одинаково, и они на самом деле поймут, что вы пишете.
Чтобы облегчить ваше понимание документа HTML5, используете 2 секционных элемента: <head> и <body>. Используя эти разделы, вы четко отделяете информацию о вашей странице (заголовке, head) от фактического содержания (тела, body). Используя их, ваша веб-страница будет выглядеть так:
<!DOCTYPE html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<p>Okay, now we’re going somewhere!</p>
</body>Как вы думаете, что случилось с отступом? Независимо от того, хотите ли вы использовать отступ, это ваш собственный выбор, но он визуализирует структуру вашей страницы и позволяет легко увидеть ее с первого взгляда.
Последнее, что вы хотели бы добавить, это & lt; html & gt; элемент и он помещается сразу после объявления doctype.
<!DOCTYPE html>
<html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<p>Okay, now we’re going somewhere!</p>
</body>
</html>Поздравляю! Вы только что создали вашу первую HTML5 веб-страницу! Вы заметили, как элемент <p> находится внутри элемента <body>? Это называется вложенными элементами и является очень важной частью структуры HTML. Я пока оставлю это здесь, но я просто хотела представить вам идею вложенности элементов.
Чему вы научились
- Всегда объявляйте doctype - <!DOCTYPE html>
- Используйте элемент <head>, чтобы отделить информацию о вашей странице
- Используйте элемент <body>, чтобы отделить фактическое содержание вашей веб-страницы
- Использовать <html>, <head>, и <body> это вопрос стиля при использовании HTML5, но он делает структуру страницы более понятной для вас
- Отступ облегчает понимание вашего кода
- Вы можете вложить один элемент в другой элемент
