Во вводной статье мы упомянули об HTML-элементах и различиях в их структуре. Сегодня мы поговорим о них подробнее, более полно обсудим их «анатомию» и не только.
Классификация html-элементов (простой вариант)
Элементы делятся на две категории – блочные и строчные.
- Блочные являются структурными разделами контента и веб-страницы (шапка, списки, абзац, блочная цитата, боковая панель и др.) Они по умолчанию начинаются с новой строки. Следующий за ними контент тоже начинается с новой строки. Блочные элементы могут быть вложены только в другие блочные элементы (и то не всегда. Например, абзац нельзя вкладывать в абзац).
- Строчные элементы влияют лишь на небольшую часть контента в документе. Они часто вкладываются в блочные элементы и предназначены для выделения слов в абзаце, встраивания изображений и других целей.
Среди блочных и строчных элементов встречается особый подтип – пустые или void-элементы. Именно их структура не подходит под шаблон, который мы недавно разобрали. Пустые элементы не имеют содержимого и закрывающего тега.
Атрибуты: что такое и как пишутся
Часто элемент содержит один или несколько атрибутов. Они прописываются в открывающем теге, влияют на отображение и поведение содержимого. При этом пользователь не видит ни имя атрибута, ни его значение.
Есть несколько правил написания атрибутов:
- Они должны отделяться от тега и друг от друга пробелом.
- В кавычках пишется значение атрибута.
Кавычки можно использовать как одинарные, так и двойные. При этом одни должны оборачивать значение, а другие – находится внутри.
Дополнительно: спецсимволы или проблема с содержимым элементов
Некоторые символы могут отсутствовать на раскладке клавиатуры или путать браузер, выдавая себя за часть синтаксиса HTML. Как тогда правильно вписать их в документ? Ответ– ссылки мнемоники.
Ссылки мнемоники – это специальный код, который «приказывает» браузеру отобразить нужный символ. Такие ссылки имеют общие черты:
- Начинаются на «&» и заканчиваются на «;»
- Браузеры не ставят после них пробел, если он не прописан в коде.
Задание
- Откройте список ссылок-мнемоников. Найдите код значка авторства (буква «с» в кружочке). Скопируйте его и перейдите на Mdn Playground.
- Вставьте код в раздел «HTML» и через пробел напишите Copyrighted by «Ваше имя/ник» (без кавычек).
Поздравляю! Вы создали пометку о защите контента авторским правом. Примерно то же самое верстальщики прописывают в футере сайтов.