- Сколько html тэгов вы знаете?
- Сколько из них используете?
- А что будет, если вы ошибётесь в названии тэга?
А ничего не будет, любой браузер прекрасно "проглотит" вашу самодеятельность. Главное чтоб разметка была валидной, как XML. Ведь по сути, вначале был придуман XML, исключительно для передачи информации в чётко структурированном виде, а потом уже он перерос в HTML.
Если вы давно занимаетесь вёрсткой, то помните, что в html5 были добавлены новые тэги, такие как article, header, footer, aside и другие.
Точно так же и вы можете ввести свой тэг.
Например вам нужно отрисовать на странице три коричневых квадрата. Для этого в создадите 3 дива, укажите им размеры, фон и позиционирование.
Скажем так:
<div class="bl bl-1"></div>
<div class="bl bl-2"></div>
<div class="bl bl-3"></div>
<style>
.bl {
width: 50px;
height: 50px;
background-color: brown;
position: absolute;
}
.bl-1 {
top: 100px;
left: 35px;
}
.bl-2 {
top: 110px;
left: 135px;
}
.bl-3 {
top: 5px;
left: 50px;
}
</style>
Выглядеть это будет так:
Если у вас будет множество различных фигур-вам может быть не очень удобно ориентироваться в названиях классов и тогда вы можете ввести свой тэг.
Пусть это будет brown-square.
В вёрстке он будет таким:
<brown-square></brown-square>
Передадим ему такие-же свойства, что и классу bl, я лишь подкрасил в другой цвет.
<style>
brown-square{
width: 50px;
height: 50px;
background-color: #a59460;
position: absolute;
}
</style>
И размещаем на странице:
<div class="bl bl-1"></div>
<div class="bl bl-2"></div>
<div class="bl bl-3"></div>
<brown-square></brown-square>
Смотрим:
Таки работает.
Если проверить в дебагере браузера - свойство display у нашего элемента будет иметь значение block, как у дива по-умолчанию. Нас это устраивает.
Вот теперь, если вы не знали, вы знаете ещё один способ изобретения велосипеда, пользуйтесь с умом.
Код на pastebin https://pastebin.com/T6iAF9Zf
Ваш пост поддержали следующие Инвесторы Сообщества "Добрый кит":
max-max, svetlanaaa, phoenix, galina1, tristamoff, vadbars, olga-olga, semasping, arystarch, vika-teplo, amelina.elena, del137, hellen-g, kertar, ifingramota, oksi-m, mp42b, zhenek, magformers, kanalex, kr-alexey, irisworld
Поэтому я тоже проголосовал за него!
Узнать подробности о сообществе можно тут:
Разрешите представиться - Кит Добрый
Правила
Инструкция по внесению Инвестиционного взноса
Вы тоже можете стать Инвестором и поддержать проект!!!
Если Вы хотите отказаться от поддержки Доброго Кита, то ответьте на этот комментарий командой "!нехочу"
dobryj.kit теперь стал Делегатом! Ваш голос важен для всего сообщества!!!
Поддержите нас:
Спасибо. Полезный пост, с версткой сайтов мало имею дел, но все равно интересно
Рад, что вам это было интересно)
Интересно.
Где-то читал примеры тегов новых, только взаимодействие с ними было через javascript. И назывались они шаблонами (Темплетами), причём описано было так всё замудрённо, что практически сразу всё, что там было рассказано, забыл.
ННа Хабре она была.
Конечно, с css из-за зрения мне трудно работать, но сам факт возможности такого создания тегов интересна.
Хорошая работа! Подписался, надеюсь на взаимность