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

Question

[Роман Фридман]

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

Я сверстал его так - 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. Кнопку меню оформил временно картинкой.

Answer 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 тоже не валиден, нужно использовать инлайновые элементы).

Answer 2

[axblue]

<header class="title_project">
    <h1></h1>
    <h2></h2>
    <h3></h3>
</header>
<article class="text_info">
    <p>text</p>
</article>

Answer 3

[Zhainar]

есть теги h1, h2, h3, есть тег header, который может применяться не только к шапке сайта, тег nav, их и используй.