Добавить в корзинуПозвонить
Найти в Дзене
HTML/CSS для Чайника
10 подписчиков

"Это стандарт!"Рассказываем как правильно создавать первоначальный макет HTML документа.

16
1 мин
Для каждого документа HTML есть так называемый скелет,который нужен при любом создании веб-сайта. Чтобы HTML-документ был правильным, весь его текст должен содержаться внутри тэга <html>. То есть документ начинается с тэга <html> и заканчивается закрывающим тэгом </html>. Далее, внутри тэга <html> нужны ещё два обязательных тэга: <head> и <body>. В тэге <head> содержится служебная информация (которую покажу ниже на примере), а в тэге <body> – собственно сам документ, его тело. То есть, минимальный HTML-документ выглядит так: <!DOCTYPE html> <head> </head> <body> </body> </html> Тут есть новые странные слова, но ничего страшного. Разберём: <!DOCTYPE html> – это вообще не тэг. Это указание браузеру, что данный HTML-документ нужно отображать в стандарте HTML5 (актуальный на сегодня, более старые уже безнадёжно устарели). Просто вставьте это в начало документа и забудьте. <html lang="en"> – начало HTML-текста. Атрибут lang="en" говорит о том, что страница будет на английском языке (это ну

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

Чтобы HTML-документ был правильным, весь его текст должен содержаться внутри тэга <html>. То есть документ начинается с тэга <html> и заканчивается закрывающим тэгом </html>.

Далее, внутри тэга <html> нужны ещё два обязательных тэга: <head> и <body>. В тэге <head> содержится служебная информация (которую покажу ниже на примере), а в тэге <body> – собственно сам документ, его тело. То есть, минимальный HTML-документ выглядит так:

<!DOCTYPE html>
<head>
</head>
<body>
</body>
</html>

Тут есть новые странные слова, но ничего страшного. Разберём:

<!DOCTYPE html> – это вообще не тэг. Это указание браузеру, что данный HTML-документ нужно отображать в стандарте HTML5 (актуальный на сегодня, более старые уже безнадёжно устарели). Просто вставьте это в начало документа и забудьте.

<html lang="en"> – начало HTML-текста. Атрибут lang="en" говорит о том, что страница будет на английском языке (это нужно для онлайн-переводчиков, поисковых систем и т.п.). Можно написать lang="ru" и т.д.

В секции <head>:

<head>
<meta charset="utf-8">
</head>

<meta charset="utf-8"> – тэг <meta> для мета-информациии, атрибут charset="utf-8" указывает, что кодировка документа UTF-8 (для правильного отображения русских и других не-латинских символов). Кодировку, конечно, тоже можно указать другую, например, Windows-1251, но UTF-8 на данный момент – стандарт.

<title> – Содержимое элемента <title> это название страницы. Оно показывается на закладке браузера.

<head>
<title>*Название сайта*</title>
</head>

Ну а дальше закрывается тэг </head> и начинается тэг <body>, в котором мы можем написать Hello world. После чего закрывается тэг <body>, а за ним закрывается тэг <html>.

<body>
Hello world.
</body>

В итоге наш HTML документ выглядит так:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
Hello world.
</body>
</html>