HTML (HyperText Markup Language) — это язык гипертекстовой разметки, на котором строятся все современные веб-страницы. С его помощью браузер понимает, где на странице должен располагаться заголовок, где абзац текста, а где — дополнительные элементы. Одним из основных понятий в HTML являются теги. Они задают структуру документа и определяют, как именно будет отображаться содержимое. В этом уроке мы рассмотрим самые простые теги и разберём их назначение.
Что такое тег в HTML
Теги в HTML пишутся только латинскими буквами и заключаются в угловые скобки < >. Большинство тегов являются парными: они состоят из открывающего (<тег>) и закрывающего (</тег>). Между ними помещается содержимое, которое нужно отобразить.
Важно помнить, что пробелы между угловыми скобками и именем тега не допускаются. То же самое касается символа слэша / в закрывающем теге.
Пример тега заголовка <h1>
Рассмотрим заголовок первого уровня:
<h1>Добро пожаловать!</h1>
Здесь текст «Добро пожаловать!» заключён в тег <h1>. Это говорит браузеру, что данная строка является главным заголовком страницы.
Тег <h1> используется для самых крупных заголовков. Он помогает не только визуально выделить текст, но и играет важную роль в SEO (поисковой оптимизации).
Тег абзаца <p>
Другим часто используемым элементом является тег абзаца. Он помогает структурировать текст:
<p>Это моя первая веб-страница.</p>
В данном случае браузер выведет обычный текстовый абзац. Так как тег <p> является парным, мы используем открывающий и закрывающий вариант.
Основные служебные теги документа
В предыдущем примере HTML-файла у нас встречались и другие элементы:
<!doctype html>
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
</body>
</html>
Разберём их по порядку:
- <!doctype html> — указывает браузеру, что используется стандарт HTML5 (последняя версия на сегодняшний день).
- <html>...</html> — контейнер, внутри которого хранится весь код страницы.
- <head>...</head> — технический блок: в нём задаётся заголовок страницы, подключаются стили и скрипты.
- <title> — заголовок, который отображается во вкладке браузера.
- <body>...</body> — основная область, в которой размещается видимое содержимое сайта.
Рекомендации по написанию кода
Чтобы ваш код был удобным и читаемым:
- размещайте каждый заголовок и абзац на отдельной строке;
- не объединяйте в одну строку разные теги (например, заголовок и абзац);
- если текст слишком длинный, допускается его переносить на несколько строк, но браузер всё равно сам будет выполнять перенос при отображении.
Пример аккуратного кода:
<h1>Заголовок страницы</h1>
<p>Это первый абзац текста.</p>
<p>А это второй абзац, который расположен отдельно.</p>
Такой стиль записи делает разметку более понятной и облегчает работу с документом в будущем.
Теги — это основа HTML и главный инструмент для структурирования веб-страниц. Они помогают браузеру понять, как именно нужно отображать текст и другие элементы. Мы рассмотрели базовые примеры: заголовок <h1>, абзац <p>, а также служебные теги документа. Освоив их, вы сможете создавать простые, но уже полноценные HTML-страницы, которые корректно открываются в любом браузере.
0 Комментарий(я)
Зарегистрируйтесь чтобы оставить комментарий