Добавление HTML-элемента на веб-страницу

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

В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.

Примечание: Найти все мануалы этой серии можно по тегу html-practice.

Это руководство расскажет вам о том, как добавить элемент <head> на вашу веб-страницу. Этот элемент создает раздел, в который мы будем включать машиночитаемую информацию о нашем веб-документе. Такая информация в основном используется браузерами и поисковыми системами для интерпретации содержимого страницы. Контент, размещенный внутри элемента <head>, не будет отображаться на веб-странице.

Примечание: <head> является семантическим элементом, поскольку он сообщает браузеру и разработчику значение или цель своего контента. Семантические элементы используются для облегчения чтения HTML-документа человеком, предоставления браузеру дополнительной информации для интерпретации контента, улучшения доступности сайта (скрин-ридеры используют семантические теги). Также такие теги могут помочь в позиционировании SEO.

Поместите открывающий и закрывающий теги <head> внутри тегов <html>. Затем добавьте две дополнительные строки HTML-кода внутри тегов <head>, например:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Website</title>
</head>
</html>

Обратите внимание, вы вложили множество элементов HTML друг в друга. Элементы <title> и <meta> вложены внутри элемента <head>, а элемент <head> вложен внутри <html>. По ходу изучения HTML мы будем часто вкладывать элементы.

Давайте разберемся, какова же цель только что добавленного кода. Строка после открывающего тега <head> (<meta charset=”utf-8″>) определяет набор символов документа. В данном случае это будет UTF-8, формат Unicode, который поддерживает большинство символов из самых разных письменных языков.

Следующая строка кода устанавливает заголовок HTML-документа с помощью элемента <title>. Контент, который вы вставляете в этот элемент, будет отображаться на вкладке браузера и как заголовок веб-сайта в результатах поиска, но не будет отображаться на самой веб-странице. Не забудьте заменить «My First Website» своим именем или названием веб-сайта, который вы создаете.

Разработчики часто вставляют различную дополнительную информацию в раздел <head>, но для начала у нас уже есть достаточно информации, чтобы создать базовую веб-страницу HTML. Сохраните файл, прежде чем переходить к следующему мануалу данной серии. Если вы попытаетесь загрузить файл в браузере, вы получите пустую страницу.

Теперь вы знаете, каково назначение элементов HTML <head> и как добавить их в файл HTML.

Tags: ,

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