[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Создание собственных тэгов/элементов на странице
sergeiss
В современных HTML5/CSS можно создать собственные элементы на странице, определив "свои" тэги, прописать для них стили. И всё будет работать. Вот только вопрос: насколько это правильно с точки зрения валидности страницы?

Поясняю. Вот была такая страница, на которой класс для ДИВа используется только для задания стилей:

<style>
.main_description {
width: 70%;
background-color: #ccc;
}
</style>

<div
class="main_description">
...
</div>


По-современному можно переписать так (естественно, для IE8 и более ранних версий ослика надо будет прописать document.createElement('main_description'), но вопрос не в этом):
<style>
main_description {
width: 70%;
background-color: #ccc;
}
</style>

<main_description>

...
</main_description>


Вроде бы, "семантически" это более верно, т.к. на странице у нас будет не куча ДИВов, а набор элементов с более осмысленными названиями. Особенно сложно разбираться, когда есть куча закрывающих ДИВов. Очень хочется, чтобы часть из них была не ДИВами :) Как минимум, читабельнее текст будет.

Еще раз вопрос: насколько это валидно?

Вопрос задан в тематическом разделе, но флуд в разумном количестве не возбраняется.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
volter9
sergeiss
Судя по всему, кастомные элементы не валидны в HTML5, наверное нужно будет свой DTD писать.
Код:
<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8"/>
<title>
Заголовок</title>
</head>

<body>
<main_description>

...
</main_description>
</body>
</html>

Не проходит HTML5 валидацию:
Цитата
Element main_description not allowed as child of element body in this context. (Suppressing further errors from this subtree.)

Здесь проверял: http://validator.w3.org/

А броузерам наверное пофиг: "не знаю этого бро, видимо этот бро контейнер, стили есть, круто, показываю его Мастеру".
P.S.: Сорри за заголовок "говнокод", о чем то думал и случайно написал в заголовок "говнокод" :(

_____________
Мой блог
sergeiss
volter9, то, что валидатор так считает, это я знаю. Но хрен его знает, может быть есть такие тенденции, которые пока еще не стали валидными? Я больше это имел ввиду - тенденции валидности. Ведь если есть возможность, весьма удобная, то почему бы её не использовать?
Вот возьмем HTML5. Там введено несколько новых элементов, чисто для улучшения семантики. Можно же было просто ДИВы использовать, но ведь нет же, ввели эти элементы. Так почему бы, с той же логикой, не сделать валидными (в ближайшем будущем) пользовательские элементы?

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
twin
sergeiss
Цитата
Вроде бы, "семантически" это более верно, т.к. на странице у нас будет не куча ДИВов, а набор элементов с более осмысленными названиями.
Мне попадался проект, почти полностью собранный их собственных тегов. Примерно так:
<header id="header" class="clearfix">
. . . . .
</header>
<nav
class="menu">
. . . . .
<nav class="menu">
Лично мне крайне не понравилось. Черт его знает, какие у них свойства. Не знаю кому как, но это только затрудняет разбор полетов.

_____________
Если вам недостаточно собственных заблуждений, можно расширить их мнениями экспертов.

Нужно уважать мнение оппонета. Ведь заблуждаться - его святое право.

Настаивал, настаиваю и буду настаивать на своем. На кедровых орешках.

user posted image
sergeiss
Николай, header и nav - это как раз элементы из HTML5 smile.gif Свойства которых известны.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
twin
Ну я для примера взял оттуда. Того проекта я сейчас не найду. smile.gif Это с нашего рабочего.

_____________
Если вам недостаточно собственных заблуждений, можно расширить их мнениями экспертов.

Нужно уважать мнение оппонета. Ведь заблуждаться - его святое право.

Настаивал, настаиваю и буду настаивать на своем. На кедровых орешках.

user posted image
volter9
sergeiss
С одной строны, это круто, семантика может сильно улучшится с помощью кастомных тэгов/элементов. С другой стороны эту семантику могут испортить новички которые могут на наделать элементов вроде abc, qadsdg и m1, m2 и m3 и угробить всю семантику.

Если хотите создавать свои элементы/тэги и что бы w3c validator парсил Вашу верстку без ошибок, можете почитать о том как создавать свои DTD файлы. Еще одна проблема которая может возникнуть это совместимость Ваших элементов и HTML5 "нативных элементов".

_____________
Мой блог
Hello
Цитата (sergeiss @ 24.02.2015 - 02:10)
Еще раз вопрос: насколько это валидно?

Зависит от валидатора.

_____________
VPS от 5$, первые 2 месяца - бесплатно.
FatCat
Цитата (sergeiss @ 24.02.2015 - 02:10)
Особенно сложно разбираться, когда есть куча закрывающих ДИВов.

Есть хоть один браузер, который неправильно отрабатывает код:
<div class="main_description">
...
</div class="main_description">
?

_____________
Бесплатному сыру в дырки не заглядывают...
sergeiss
Цитата (FatCat @ 24.02.2015 - 16:50)
Есть хоть один браузер, который неправильно отрабатывает код:

Это некрасиво smile.gif Да и букоФФ много. Я, вообще, этот вопрос поднял потому, что хочется код страницы иметь красивый и удобный. И чтобы еще и валидный был. И чтобы не было излишка кода.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
123456
Ни и к какому выводы пришли?
Использовать свои теги?
sergeiss
Цитата (123456 @ 26.02.2015 - 23:47)
Ну и к какому выводы пришли?
Использовать свои теги?

Чем глубже я вникаю в данный вопрос, тем больше понимаю, что ни чертА не понимаю smile.gif У меня пока нет окончательного решения, я сейчас знаю больше, а понимаю меньше, чем когда создал эту тему.
Изучаю всякую литературу, в т.ч. ссылки, данные в этой статье. Самое хреновое, что тут нет полной однозначности.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.