HTML семантика / CSS

Question

столкнулся с небольшой проблемой при стилизации, поэтому я перестал думать о своей семантической разметке.Это мое текущее состояние.

H1 - site logo 
H2 - page title - eg: contact page
H3 - title of each shop
H4 - Description title

Теперь приходит часть, в которой я не уверен: H4 - повторяется и используется для,

1) "Open Close" title
2) "Services" title
3) "Location" title
4) "Ratings" title 
5) "Comments" title 

1 до 5 - все заголовки для информации, так как вывидно, что в настоящее время у меня есть 6 элементов H4 на магазин, 2 3 4 и 5 имеют одинаковый стиль, 1 имеет другой стиль, а H4 для заголовка описания также имеет другой стиль.

Одним из способов является использование до H6, но H5 для «Open Close» меньше по размеру шрифта, что означает, что H5 будет меньше, чем H6.Вместо того, чтобы просто стилизовать текущий код, я бы лучше отредактировал элементы, чтобы улучшить семантику моего кода.Спасибо

Answer 1

Если вы хотите перейти на территорию HTML5, вы можете поместить вещи в <hgroup> следующим образом:

<header>
<hgroup>
    <h1>Site Title</h1>
    <h2>Sub Heading</h2>
  </hgroup>
</header>

<section>
  <hgroup class="shop">
    <h1>Shop Name/Title</h1>
    <h2>Description</h2>
    <h3>Open/Close</h3>
    <h3>Services</h3>
    <h3>Etc.</h3>
  </hgroup>
</section>

Использование <hgroup> позволит вам повторно использовать элементы <h> семантически.

Answer 2

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

Вам следует разделить процесс проектирования на две фазы.Во-первых, вы думаете ТОЛЬКО о семантике - вы можете попытаться НЕ смотреть страницы в браузере.Посмотрите на необработанный HTML-код и подумайте, хорошо ли выглядит код .

В HTML5 у вас есть теги <section> и <article>.Используйте их, чтобы сгруппировать содержимое в разделы, и в каждом разделе поместите тег <h1>.Это будет семантически хорошо.

В случае, если вы используете HTML4, вы можете использовать <div class="..."> для маркировки разделов и использовать <h1> .. <h6> в качестве заголовков, но все равно не думатьо размере шрифта!

После того, как вы это сделаете, вы можете начать думать о презентации .Присвойте класс каждому разделу и определите заголовки в соответствии с разделом, в котором находится заголовок. Пример:

<article>
  <h1><img src="logo" alt=""/>Page title</h1>
  <section class="shop">
    <h1>Shop 1</h1>
    <section class="items">
      <h1>Open Close</h1>
      <!-- something -->
    </section>
    <section class="items">
      <h1>Services</h1>
      <!-- something -->
    </section>
    <!-- more sections... -->
  </section>
  <section class="shop important">
    <h1>Shop 2</h1>
    <!-- and so on... -->

И тогда вы можете свободно стилизовать заголовки, используя полная мощность CSS-селекторов , где это уместно.

article > h1 { // Page header
  font-size: 200%;
}
section.shop  > h1 { // Shop title
  font-size: 150%;
}
section.shop + section.shop > h1 {  // All but the first..
  color: gray;
}
section.items > h1 { // item title
  font-size: 110%;
}
section.shop.important > section.items:first-child > h1 {
  color: red;
}

Вероятно, класс "items" следует называть по-разному, но я не уверен, какова цель разделов раздела "shop".Он был приведен только в качестве примера, потому что вы можете вообще не указывать класс, и вы все равно можете стилизовать его, используя соответствующие селекторы:

section.shop > section > h1 {
  // format of the "items" section
}

Answer 3

Если вы заботитесь о SEO, для заголовка страницы следует использовать H1.Проверьте теги H1, SEO и семантику

Answer 4

Вы можете использовать CSS для стилизации различных заголовков, чтобы вы могли иметь что-то вроде

<h1>The sites title</h1>
<h2>This is the contacts page</h2>
<h3>Address</h3>
our address
<h3>Phone nunbers</h3>
phone numbers

и т. Д.

Тогда в css вы можете иметь

h1
{
    font-size: 10pt;
}

h2
{
    font-size:15pt;
}

так далее.(что делает теги h2 большего размера!)

Answer 5

Вы можете создавать классы для размеров шрифта, скажем -

CSS

.large {
    font-size: 2em;
}

.larger {
    font-size: 22.5em;
}

.huge {
    font-size: 3em;
}

Точно так же вы можете создавать разные обертки с разными идентификаторами для разных страниц. А затем используйте там идентификаторы для стилизации элементов.

Для заголовков вы можете сделать класс .desc (или что-нибудь еще, что вам нравится). Тогда вы можете иметь div s как

1. #services
2. $about-us
3. #contact

Теперь вы можете специально стилизовать свой элемент h4, добавив к нему класс .desc.

HTML

<h4 class="desc">
</h4>

CSS

#services h4.desc {
    /*The styling comes here*/
}
#about-us h4.desc {
    /*The styling comes here*/
}
#contact h4.desc {
    /*The styling comes here*/
}