Базовая структура HTML страницы

Всем доброго времени суток! Сегодня мы научимся создать каркас нашей первой HTML страницы. А точнее разберемся с базовой структуры html страницы, узнаем, из чего она состоит. Но прежде всего, поговорим немного о тегах.

Что такое тег в HTML?

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

Существует два типа тегов это парные теги и одинарные теги:

Парные теги это теги, которые состоит из открывающего тега и закрывающего тега. По короче это теги, которые имеют закрывающего тега. Примеры: <html> и </html>; <title> и </title>; <head> и <head>; <body> и </body>; <p> и </p>;
Одинарные теги это теги, которые не имею закрывающего тега. Примеры одинарных тегов: <br />. <hr />

У html страницы есть базовая структура. Базовая структура на всех страницах сайта, выглядит одинаково. Единственное что может отличаться в базовой структуре страниц от сайта к сайту, это элемент DOCTYPE. Для того чтобы узнать что такое DOCTYPE и какие типы существуют, прочитайте эту статью Что такое DOCTYPE и зачем он нужен . Если не укажем этот элемент то браузер отобразит страницу некорректно.

Вот как выглядит базовый каркас html страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="Описание страницы. Не менее 160 символов. " />
        <meta name="keywords" content="Здесь указываем список ключевых слов, разделенные запятой." />
        <title>Главная страница</title>
    </head>
    <body>

    </body>
</html>

Сейчас если откроем данную страницу в браузере, то она будет пуста. Теперь добавим пару строк кода внутри тега body, и откроем еще раз эту страницу в браузере.

<div>
    <p>Моя первая html страница</p>
    <!-- Это комментарий. Он не отображается на странице в браузере. -->
</div>

Вот как выглядит страница в браузере после того как изменили ее код:

Анализируем данный пример

В начале страницы, перед тегом html всегда указываем DOCTYPE, то есть тип документа.

Каждая html страница начинается с тега <html> и заканчивается тегом </html> и состоит из заголовка <head></head> и тела <body></body>.

Внутри заголовка пишется служебные элементы, которые не отображаются на странице в браузере. В основном это:

Мета теги. Главные из них это мета-тег кодировки, через которого указываем кодировку страницы (<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>), мета теги для поисковых систем, это мета-тег c описанием страницы (description) и ключевые слова для страницы (keywords).
Заголовок страницы, который указывается внутри тега <title></title>. Этот заголовок отображается во вкладке браузера.
Блок с внутренними стилями. <style type=”text/css”>Внутренние стили. </style>
Одинарный тег <link />, через которого подключаем внешние файлы.
А также блок <scriptsrc="library.js" type="text/javascript"> </script> в котором пишутся различные скрипты JavaScript.

Внутри тега <body></body> пишется контент страницы. Контент может содержать текст, изображения, таблицы, списки, ссылки и другие элементы которые отображаются на странице в браузере.

Имена тегов можно писать в любом регистре, то есть если напишем <BODY>, <bOdY>,<Body> или <body>, то результат будет один и тот же, но рекомендуется всегда писать в нижнем регистре, то есть <body>.

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

Видео:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

<< Предыдущая статья Следующая статья >>

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в: