2013-07-26 3 views
-1

Есть ли недостаток в использовании CSS на <section>, <header>, <article> и <footer> элементов? Некоторое время назад я читал, что эти элементы не предназначены для стилизации, но я не могу найти источник, и я не могу думать о причине не использовать их.Применение стилей к html 5 элементов

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

Позвольте мне показать пример того, что я использую:

<body> 

    <header> 
     Header of the page 
    </header> 

    <div class="wrap"> 

     <div class="content-list"> 
      <article> 
       <header> 
        <h1>Article title</h1> 
       </header> 
       <p></p> 
       <p></p> 
       <footer> 
        <a href="#">Read more</a> 
       </footer> 
      </article> 
     </div> 

    </div> 

    <footer> 
     Footer of the page 
    </footer> 

</body> 

Иногда в DIV с классом контента списка есть улица с в литиево статья, так же, как теперь отображается. Заголовок (в статье), например, всегда белый, а нижний колонтитул всегда содержит ссылку для чтения (по крайней мере, выходную ссылку). p - это содержимое.

Причина, по которой я прошу об этом, заключается в том, что я строю h1 внутри заголовка и якоря внутри нижнего колонтитула, но h1 можно разделить, если я просто создал сам заголовок.

+4

Я думаю, на это уже было дан ответ [здесь] (http://stackoverflow.com/questions/3549765/styling-html5-elements) –

+1

Единственным недостатком является то, что они не работают по умолчанию в IE8, но вы можете легко использовать их, включая html5shiv, кроме того, что вы можете думать о них как divs со значением. –

ответ

0

нет недостатка с использованием css с <section>, <header>, <article>, <footer>. Это элементы HTML5. Цель этих элементов - сделать сайт дружественным к SEO.

<section> означает основное содержание должно быть запущено, <header> означает часть заголовка веб-сайта, <aside> означает боковую панель или что-то вроде этого, <footer> означает колонтитула веб-сайта и <article> означает конкретный блок контента или пункта.

+0

Но это также означает, что я использую верхний колонтитул? Я не уверен, что я делаю это неправильно. (сделал редактирование на главной записи) – Gideon

+0

вам нужно удалить

и использовать
после концов заголовка – Vipul

1

<section>, <header>, <article>, <footer> (а также другие теги HTML5) имеют каноническое значение, но это не значит, что вы не можете их стиль.

A <footer>, например, не должен реализовывать визуальный стиль по умолчанию на каждой странице, на которой он включен; поэтому CSS входит в игру, создавая стили, как вы этого хотите (учитывая ваше приложение). Просто имейте в виду, что он называется <footer> по какой-то причине и не должен содержать контент, который должен находиться в <p> или <article>.

+0

Означает ли это, что я использую элементы не так? – Gideon

+0

@ Gideon: Нет, вы сделали это [правильно] (https: //developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) (статья может иметь нижний колонтитул). Я просто просто говорю, что использую его, когда имеет смысл (находясь в пределах html). –

+0

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

0

Ну, главное, чтобы иметь в виду, что css каскады, и вы устанавливаете правила для тегов, которые являются родителями для других элементов.

Нет проблем с этим, вам просто нужно это запомнить.

В конце концов, все сводится к тому, чего вы пытаетесь достичь, и к простейшему способу добраться туда.

Смежные вопросы