Не всё так просто. Подробнее об HTML-элементах

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

Классификация html-элементов (простой вариант)

Элементы делятся на две категории – блочные и строчные.

• Блочные являются структурными разделами контента и веб-страницы (шапка, списки, абзац, блочная цитата, боковая панель и др.) Они по умолчанию начинаются с новой строки. Следующий за ними контент тоже начинается с новой строки. Блочные элементы могут быть вложены только в другие блочные элементы (и то не всегда. Например, абзац нельзя вкладывать в абзац).
• Строчные элементы влияют лишь на небольшую часть контента в документе. Они часто вкладываются в блочные элементы и предназначены для выделения слов в абзаце, встраивания изображений и других целей.

Среди блочных и строчных элементов встречается особый подтип – пустые или void-элементы. Именно их структура не подходит под шаблон, который мы недавно разобрали. Пустые элементы не имеют содержимого и закрывающего тега.

Классификация элементов (упрощённая)

Атрибуты: что такое и как пишутся

Часто элемент содержит один или несколько атрибутов. Они прописываются в открывающем теге, влияют на отображение и поведение содержимого. При этом пользователь не видит ни имя атрибута, ни его значение.

Есть несколько правил написания атрибутов:

1. Они должны отделяться от тега и друг от друга пробелом.
2. После имени атрибута пишется знак равенства и открываются кавычки (у этого правила есть исключения)
3. В кавычках пишется значение атрибута.

Кавычки можно использовать как одинарные, так и двойные. При этом одни должны оборачивать значение, а другие – находится внутри.

Пример строчного void-элемента <img> с атрибутами src и alt

Дополнительно: спецсимволы или проблема с содержимым элементов

Некоторые символы могут отсутствовать на раскладке клавиатуры или путать браузер, выдавая себя за часть синтаксиса HTML. Как тогда правильно вписать их в документ? Ответ– ссылки мнемоники.

Ссылки мнемоники – это специальный код, который «приказывает» браузеру отобразить нужный символ. Такие ссылки имеют общие черты:

• Начинаются на «&» и заканчиваются на «;»
• Браузеры не ставят после них пробел, если он не прописан в коде.

Задание

1. Откройте список ссылок-мнемоников. Найдите код значка авторства (буква «с» в кружочке). Скопируйте его и перейдите на Mdn Playground.
2. Вставьте код в раздел «HTML» и через пробел напишите Copyrighted by «Ваше имя/ник» (без кавычек).

Поздравляю! Вы создали пометку о защите контента авторским правом. Примерно то же самое верстальщики прописывают в футере сайтов.