HTML-теги
HTML – это разметка для определенной веб-страницы. Поэтому необходимо, чтобы весь контент (текст, картинки или другие объекты страницы) появлялся конкретным образом в определенном порядке – у всех сайтов ведь разный дизайн. Например, вам может быть нужно, чтобы определенная часть текста была меньше, другая — больше, какая-то — жирной, курсивом или вообще в кавычках, оформленная как цитата. В HTML есть специальные «теги», благодаря которым можно сделать это в несколько кликов.
Теги могут быть парными (в них присутствует открывающий и закрывающий) и одиночными (используется самостоятельно).
Ниже, на картинке, представлены несколько тегов.
HTML-элементы
Элемент – это единица HTML-документа. Он состоит из открывающего тега, контента внутри и закрывающего тега. Некоторые элементы могут быть пустыми – это абсолютно нормально, это не ошибка. Это значит, что они не имеют закрывающего тега, но вместо него используют внутри себя ссылку на содержимое, которое нужно поместить на сайт/страницу.
Примером такого элемента может послужить <img>, который мы используем для помещения картинки на сайт/страницу.
HTML-элементы часто путают с тегами, и они в принципе могут заменить друг друга. Но все же между ними есть небольшое расхождение, о котором стоит знать. Элемент – это комбинация тегов (открывающего и закрывающего), в которой находится контент – то есть, содержимое используется внутри открывающего тега. А у тегов контент располагается между открывающим и закрывающим.
HTML-атрибуты
HTML-теги также имеют атрибуты – вспомогательные команды. Они помещаются внутрь открывающего тега и могут отвечать за стиль, класс, значение и многое другое. Стоит отметить, что один элемент не может содержать внутри два и более атрибута с одинаковым именем. Благодаря им можно передавать необходимые данные об элементе, производить определенные действия. Например, выполнять стилизацию элементов или манипулировать движениями с помощью языка JavaScript.
Структура базовой HTML-страницы:
Давайте подробнее рассмотрим кусочки кода по-отдельности:
<!Doctype html> – показывает, что нами в коде используется HTML5, а не какая-то другая версия. До введения в пользование HTML5 нужно было каждый раз прописывать, какую версию HTML использовали (кодировали). Например, HTML3.3, 3.2, 2.1 и т.д. Но теперь, к счастью, делать это нам больше не нужно. Когда в коде написано «html» и прописан основной тег, браузер автоматически определяет, что кодироваться будет HTML5.
<html></html> – его можно называть по-разному, и оба варианта правильны. Корневой элемент или элемент верхнего уровня – он пишется в каждом HTML-документе, без него не получится создать даже начальную структуру. Каждый следующий элемент должен быть внутри него, иначе он не прочитается и не будет замечен.
<head></head> – так называемая «голова» страницы. Это, определенно, одна из основных частей всего документа в целом. Потому что роботы, видя страницу, всегда заглядывают внутрь данного тега, чтобы получить необходимые для них данные о документе. Внутри находится различная информация – общий заголовок страницы, стили, метаданные для SEO и многое другое.
<meta /> – это пустой элемент, не отображающийся в браузере, однако он не менее важен для разработчиков. Он передает метаинформацию (структурные данные) о странице. Он тоже может содержать внутри разное. Например, автора, тип кодировки (почти всегда все используют UTF-8, она была принята повсеместно), описания, сущности и многое другое. Также как и в <head>, поисковые боты всегда ищут и проверяют метатег, чтобы получить всю нужную информацию. Впоследствии эти данные необходимы будут для оптимизации страницы в поиске.
<title></title> – это заголовок веб-страницы. Он всегда отображается в самом верху, во вкладке браузера.
<body></body> – это «тело». Оно несет в себе абсолютно все содержимое документа. Вся информация и контент, который попадает на страницу, должен быть внутри данного тега, иначе он не прочитается браузером. Важное замечание – на всей странице может быть только один тег <body>.
Вы легко сможете повторить то же самое, что написано у меня в коде.
