Как правильно синтаксически оформить код (HTML5)?

Как правильно синтаксически оформить код? Есть такой вот блок с текстом как на изображении : fc2fc56c42f04f3b814b4c641e2f9aa7.png

Я сверстал его так - HTML :
<div class="container_block">

            <div class="button_mnu">
            <!--Интерактивная кнопка, раскрывающая меню -->
                <img src="img/buttn_mnu.png" width="33px" height="29px" alt="">
            </div>

            <div class="title_project">

                <div class="title_1">
                <p>Ali Sayed's</p>
                </div>

                <div class="title_2">
                <p>Web Designing</p>
                </div>

                <div class="title_3">
                <p>Project</p>
                </div>

            </div>

            <div class="text_info">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                euismod tincidunt ut laoreet dolore.</p>

                <p>quis nostrud exerci tation ullamcorper
                suscipit lobortis nisl ut aliquip ex ea ommodo consequat. Duis autem vel eum iriure dol.</p>
            </div>
        </div>

        </div>`


Но код выглядит слишком громоздким, много классов, также много css - кода получатся, понимаю, что можно сделать проще, но пока не могу додуматься как. Прошу помочь советом.

p.s. Кнопку меню оформил временно картинкой.
  • Вопрос задан
  • 339 просмотров
Решения вопроса 1
@metaf
Нельзя использовать h1-h6 для подзаголовков! Вот вам цитата из спецификации
h2–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.
w3c.github.io/html/common-idioms-without-dedicated...
А вот статья по вашей теме frontender.info/howto-subheadings/#razmetka-dlya-p... .
Единственное, что вам нужно исправить в вашем варианте - для title_project поменять тег на h2, дать подзаголовкам более семантичные имена и избавиться от лишней разметки (зачем громоздить p внутри div? и, кстати, div внутри h1-6 тоже не валиден, нужно использовать инлайновые элементы).
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
leshikgo
@leshikgo
<header class="title_project">
    <h1></h1>
    <h2></h2>
    <h3></h3>
</header>
<article class="text_info">
    <p>text</p>
</article>
Ответ написан
Комментировать
@zhainar
Гуглю за вас
есть теги h1, h2, h3, есть тег header, который может применяться не только к шапке сайта, тег nav, их и используй.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы