Теги, атрибуты и элементы

Хотя основой HTML является обычный текст, нам нужно немного больше, чтобы сделать его красивым HTML-документом.

Теги

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

Измените свой документ так, чтобы он выглядел следующим образом:

<!DOCTYPE html>
<html>
<body>
    Это моя первая страница
</body>
</html>

Теперь сохраните документ ещё раз, вернитесь в браузер и перезагрузите страницу.

Внешний вид страницы вообще не изменится, но целью HTML является применение значения, а не представления, и в этом примере теперь определены некоторые фундаментальные элементы веб-страницы.

Первая строка вверху <!DOCTYPE html> ─ это объявление типа документа, и она позволяет браузеру узнать, какой вариант HTML вы используете (в данном случае HTML5). Очень важно придерживаться этого. Если вы этого не сделаете, браузеры будут считать, что вы на самом деле не знаете, что делаете, и поведут себя своеобразно.

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

Закрывающие теги

</body> И </html> закрывают соответствующие им элементы (подробнее об элементах чуть позже).

Не у всех тегов есть закрывающие теги, подобные этому (<html></html>) некоторые теги, которые не охватывают содержимое, закроются сами. Тег с разрывом строки, например, выглядит так: <br>.

Разрыв строки не содержит никакого содержимого, поэтому тег спокойно сидит сам по себе. Мы встретимся с этими примерами позже. Все, что вам нужно помнить, это то, что все теги с содержимым между ними должны быть закрыты в формате открывающий тег → содержимое → закрывающий тег.

Строго говоря, это не всегда требование, но это соглашение, которое мы используем в этих руководствах, потому что это хорошая практика, которая приводит к получению более чистого и понятного кода.

Вы можете столкнуться с “самозакрывающимися” тегами, при которых br тег, например, будет выглядеть как “<br />” вместо просто “<br>». Это остаток XHTML, формы HTML, основанной на другом языке разметки, называемом XML. HTML5 намного проще, чем XHTML, и его устроит любой формат. Некоторые разработчики предпочитают один способ, некоторые ─ другой. Мы бросили монетку и решили придерживаться более простой версии.

Атрибуты

Теги также могут иметь атрибуты, которые являются дополнительными битами информации. Атрибуты отображаются внутри открывающего тега, а их значения заключены в кавычки. Они выглядят примерно так <tag attribute=»value»>Margarine</tag>. С тегами с атрибутами мы столкнёмся позже.

Кавычки не всегда необходимы, но это общепринятое соглашение, которое необходимо для обеспечения согласованности и ясности. Мы предлагаем вам сделать то же самое.

Элементы

Теги отмечают начало и конец элемента. Элементы — это биты, из которых состоят веб-страницы. Можно сказать, например, что всё, что находится между тегами <body> и </body> (и включает в себя), является элементом body. В качестве другого примера, в то время как “<title>” и “</title>” являются тегами, “<title>Новости</title>” ─ это элемент заголовка.

Страницы в тему:

 

Добавить комментарий