Пользовательский заголовок <h21> хорошо отображается в Chrome и FireFox, но не в IE9

Question

В: Почему следующий заголовок отображается в IE9 иначе, чем я ожидаю в Chrome / Firefox (это вызывается из mvc3 / razor / css?

h21 
{
    font-size: 1.6em;
   padding-bottom: 10px;
    display: block;
}

<h21>Custom Defined Header as &lt;h21&gt;</h21>

На следующем снимке экрана: сверху - Chrome и Firefox (как и ожидалось), а снизу - IE9.

Answer 1

Не изобретайте свои собственные теги.Вместо этого придерживайтесь HTML.

Хотя вы можете убедить большинство браузеров отображать (и применять CSS) неизвестные элементы, они бессмысленны для большинства клиентов (включая программы чтения с экрана и поисковых роботов индексации) и генерируют многошум, когда вы используете валидатор для базового контроля качества.

Тем не менее, вы можете убедить IE применить CSS к неизвестному элементу, используя JS для генерации элемента этого типа (document.createElement('h21');).

Answer 2

Вы пометили вопрос 'html5', но факт заключается в том, что <h21> не является элементом HTML, включая HTML5.

Даже в соответствии с разрешающими правилами HTML5 браузеры не обязаны отображать что-либо, что не является распознанным элементом. Тот факт, что некоторые браузеры отображают его, больше не делает его действительным.

Смысл HTML5 не в том, чтобы сделать доступными бесконечные новые элементы. Да, они добавили в спецификацию довольно много элементов, но тщательно их отобрали, чтобы помочь вам придать смыслу документа смысл - т. Е. Теги становятся подсказками, помогающими поисковой системе или подобному боту расшифровать содержание страницы. Добавление собственных произвольных тегов не приведет к этому.

Вы бы лучше придерживались существующих тегов и давали им класс, чтобы определить, как они должны отображаться.

Answer 3

Есть только теги <h1> до <h6>, нет тега с именем <h21>. Браузеры, такие как Chrome и Firefox, игнорируют ваши ошибки и правильно отображают ваш сайт.