Проверка на семантику [27/32] результат 100%

Курсы §15. Сетки
1 
<body>
    <div class="header">
        <div class="layout-positioner">
            <div class="head hidden">
                Header
            </div>
            <div class="menu hidden">
                Menu
            </div>
            <div class="promo layout-promo1 hidden">
                Promo 1
            </div>
            <div class="promo layout-promo2 hidden">
                Promo 2
            </div>
        </div>
    <div class="features">
        <div class="layout-positioner">
            <div class="layout-column1 hidden">
                Left
            </div>
            <div class="layout-column2 hidden">
                Main
            </div>
            <div class="layout-column3 hidden">
                Right
            </div>
        </div>    
    <div class="footer">
        <div class="layout-positioner">
            Footer
        </div>
    </div>
</body>
</html>

**

**
.layout-positioner::after {
display: table;
content: “”;
clear: both;
}
.header {
background: #34495e;
height: 160px;
padding-top: 10px;
}
.head {
background: #c0392b;
width: 340px;
height: 25px;
margin: 0px auto;
padding: 5px;
}
.menu {
background: #3498DB;
height: 30px;
margin-top: 10px;
padding: 5px 0px 0px 55px;
}
.layout-promo1 {
float: left;
background: #c0392b;
width: 160px;
height: 50px;
margin: 10px 0px 10px 50px;
padding: 5px;
}
.layout-promo2 {
float: left;
background: #c0392b;
width: 160px;
height: 50px;
margin: 10px 0px 10px 10px;
padding: 5px;
}
.layout-column1 {
background: #3498DB;
float: left;
width: 60px;
height: 100px;
margin: 10px 0px 10px 50px;
padding: 5px;
}
.layout-column2 {
background: #3498DB;
float: left;
width: 180px;
height: 100px;
margin: 10px 0px 10px 10px;
padding: 5px;
}
.layout-column3 {
background: #3498DB;
float: left;
width: 60px;
height: 100px;
margin: 10px 0px 10px 10px;
padding: 5px;
}
.footer {
background: #34495e;
height: 25px;
padding: 5px 5px 5px 55px;
}

2

Сначала расскажите, что значит с вашей точки зрения слово “семантика”?

3


здесь был поднят этот вопрос.

4

Хорошо. Тогда о какой семантике может идти речь в вашем коде, если я не вижу ни одного семантического тега html5?

5

В теории по обучении упоминалось о правильность(качестве) использования имен классов, и правльности использования подходов в решении определенных задач (например с clearfix::after ) так же о правильности оформления css составляющей.
Хочется научится писать и HTML и CSS сразу же правильно что бы потом себя не переучивать, поэтому прошу проанализировать с точки зрения проффесионала, как бы вы написали и какие бы поправки внесли… в частности в этом смысле использовал термин семантика.
Спасибо.

6

у вас очень много где в коде фигурирует класс hidden, который в CSS вы потом не используете.

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

и про очень удобный класс-центровщик вы забыли

и использование везде height не очень хорошая практика - блоки должны тянуться под содержимое (иначе, при переполнении содержимое будет просто “выпадать”), поэтому лучше - если уж совсем необходимо обозначить высоту - использовать min-height

2 лайка
7
  1. "у вас очень много где в коде фигурирует класс hidden, который в CSS вы потом не используете."
    Согласен , что он был лишним, но представил что осуществляю верстку сетки с реальным содержимым, и для практики и чтобы осел в памяти прописал его.
    /* Стили содержания */
    .hidden {
    display: none;
    }

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

3 "и про очень удобный класс-центровщик вы забыли"
Тала прошу Вас если возможно напомните, какой конкретно.

4 "и использование везде height не очень хорошая практика - блоки должны тянуться под содержимое (иначе, при переполнении содержимое будет просто “выпадать”), поэтому лучше - если уж совсем необходимо обозначить высоту - использовать min-height"
Это очень полезное замечание- спасибо учту.
Тала, спасибо за обратную связь.

8

это когда используется блока-обертка с правым и левым маргином auto (и шириной меньше ширины родителя, разумеется) - в результате, содержимое за счет этих одинаковых маргинов располагается по центру. (вместо дополнительного блока-обертки, в зависимости от кода, можно добавить класс с margin: 0 auto; к уже существующему блоку)
вы это использовали один раз, для .head, в остальных же случаях использовали левые отступы (внутренние либо внешние) в 50-55px. Но если ширина боди изменится, то ваши блоки уже не будут находится по центру. А при использовании margin: 0 auto; центровка будет сохранятся всегда.

1 лайк
9

Вы несколько неверно восприняли заголовок моей темы. Что когда применять - это не определение семантики. В той теме речь идёт о конкретных новых тегах, которые несут дополнительную информацию для поисковых роботов о структуре и логике сайта.

Наверное это понятие можно применить в смысле - логичность кода, но пока что, оценку правильности применения тех или иных операторов, могут дать только Академики и участники форума. Если я правильно понимаю, система сличает лишь эталонное изображение с полученным Вами результатом. А насколько оптимален Ваш код - такое действие системой проверки не предусмотрено (а создавать такую систему, как по мне, не целесообразно).