Как работать с недопустимой разметкой заголовка Semantic-ui?

Question

Примеры Semantic-ui для компонента заголовка помещают тег div внутри тега h2, что является недопустимой разметкой.

Замена внешнего h2 на div действительна, но больше не стирается одинаково (она намного меньше).

Как вы справляетесь с этой разметкой?

<h2 class="ui header"> 
    <i class="settings icon"></i> 
    <div class="content"> 
    Account Settings 
    <div class="sub header">Manage your preferences</div> 
    </div> 
</h2> 

(от http://semantic-ui.com/elements/header.html)

Answer 1

Если то, что вы хотите достичь, чтобы иметь свой заголовок визуально такие же, как тот, в примере, но с действительной разметкой, все, что вам нужно сделать, это сделать, это изменить h2 в div и укажите размер (это позволит устранить проблему с тем, что он намного меньше). <h2 class="ui header"> соответствует <div class="ui large header"> поэтому действительный код будет:

<div class="ui large header"> 
    <i class="settings icon"></i> 
    <div class="content"> 
    Account Settings 
    <div class="sub header">Manage your preferences</div> 
    </div> 
</div> 

Edit: Я просто взглянули на вопрос трекера Semantic UI и заметил this one, который адресует эту точную проблему (не уверен, если вы тот, кто открыл его). Короче говоря, в будущей версии семантического интерфейса, следующие должны иметь один и тот же результат, но с использованием фактических тегов заголовков:

<h2 class="ui header"> 
    <i class="settings icon"></i> 
    <span class="content"> 
    Account Settings 
    <span class="sub header">Manage your preferences</span> 
    </span> 
</h2> 

Раствор выше с ДИВ тег остается в силе, хотя, если вы не» t необходимо использовать фактическую метку h2.