Структура веб страницы

Что такое html

Html - это язык гипертекстовой разметки(HyperText Markup Language). Это декларативный язык. Html используется для описания структур веб страниц. Html документ состоит из набора html элементов, которые записываются при помощи открывающий скобок < и закрывающих />.

<!--Основной тег html. С него начинается и заканчивается любой html документ. -->
<html> <!-- Открывающий тег-->

</html> <!-- закрывающий тег-->

Внутри тега html обязательно располагаются еще 2 тега - head, body.

<html>
<!-- сначало  тег head-->
    <head>
        <!-- Внутри тега head, у нас будет по сути настройки нашей страницы-->
        <title> Заголовок на вкладке </title> <!-- Например title - это заголовк нашей страницы.
        title будет виден на вкладке страницы в браузере
        Так же в head будут подключаться стили, файлы css. Разные meta теги. Иконки favicon и тд-->
    </head>
<!-- далее тег body
    В body находится все то, что отображается на самой странице
-->
    <body>
        <!-- Так создается заголовок - Это самый большой. h2 будет меньше h3 еще менье и так далее до h6 -->
        <h1> Заголовк на странице </h1> 
        <p> <!-- Этот элемент используется для отображения параграфа-->
        Какой то абзац текста. 
        Всем привет, ТУт что-то есть.
        Я текст, ты текст, мы текст. БЛА БЛА БЛА.
        Текст тут может быть очень большой
        </p> 
        <p> 
        Какой то абзац текста номер 2. 
        Всем привет, ТУт что-то есть.
        Я текст, ты текст, мы текст. БЛА БЛА БЛА.
        Текст тут может быть очень большой
        </p> 
    </body>
</html>

Вот как сейчас выглядит наша страница.

Давайте еще что нибудь напишем.

<html>
    <head>
        <title> Заголовок на вкладке </title> 
    </head>
    <body>
        <h1> Заголовк на странице </h1> 
        <p>
        Какой то абзац текста. 
        Всем привет, ТУт что-то есть.
        Я текст, ты текст, мы текст. БЛА БЛА БЛА.
        Текст тут может быть очень большой
        </p> 
        <p> 
        Какой то абзац текста номер 2. 
        Всем привет, ТУт что-то есть.
        Я текст, ты текст, мы текст. БЛА БЛА БЛА.
        Текст тут может быть очень большой
        </p>
        <h2>Всем привет!</h2> <!--Сделаем заголовоки-->
        <h3>Всем пока</h3>  
        <h4>Всем не привет</h4> 
        <h5>Всемда  привет</h5> 
        <h6>Всем просто не да привет</h6> 
        <div> <!-- Это div спец элемент. Некий блок в который мы поместим все что нам нужно-->
            <ul>  <!-- ul Это элемент для создания списка, он принимает в себя элмент li-->
                <li>Элемент списка</li> <!-- Это сам элемент списка -->
                <li>Элемент списка</li>
                <li>Элемент списка</li>
            </ul>
        </div> <!-- Зачем нужен div станет понятно при изучении css-->
    </body>
</html>

Необходимые элементы страницы

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

<!DOCTYPE html> <!-- С помощью этого тега указывается, что это html документ 5 версии. Современный html документ -->
<html lang="ru"> <!-- Указыаем какой язык будет использоваться внутри этого документа -->

<head>
    <!--Указываем кодировку документа. указывает, какой набор символов используется в документе --->
    <meta charset="UTF-8"> 
    <!--  viewport сообщает браузеру о том, как именно обрабатывать размеры страницы, и изменять её масштаб -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Документ</title> 
</head>

<body>
    <!-- Контент -->
</body>

</html>

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

Отредактировать эту страницу

Html

Структура веб страницы

Теги

Что такое html

Необходимые элементы страницы