Являются ли элементы div необходимыми для большинства элементов, поскольку существует абсолютное позиционирование?

Поэтому в последние несколько месяцев я научился веб-дизайну. Конечно, есть еще много уроков, но я чувствую, что у меня есть твердое понимание того, что я знаю до сих пор. Одна вещь, о которой я сейчас интересовался, - это то, насколько необходим div, особенно когда я в конечном итоге использую абсолютное позиционирование. Например, недавно я написал следующий код:

<section id="header-section">
        <header class="main-header">
            <h1>The Voice of Jeremy Donahue</h1>
                <nav class="main-navigation">
                    <ul>
                        <li><a href="http://www.thevoiceofjeremydonahue.com/about">About</a></li>
                        <li><a href="http://www.thevoiceofjeremydonahue.com/contact">Contact</a></li>
                    </ul>
                </nav>
        </header>
</section> 

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

Тем не менее, много раз я заканчиваю позиционирование своих элементов, используя свойство {position: absolute} и полностью игнорируя содержащий div. Поэтому я думаю, что если у меня есть H1, и я планирую позиционировать его, как я описал, то почему бы даже поместить его в div?, и то же самое для любого другого элемента, который я ставил бы таким образом. Почему бы им не стать свободными элементами? Мне интересно, если это по-прежнему хорошо по семантическим причинам, или если это просто считается лучшей практикой, чтобы группировать вещи таким образом. Я надеюсь, что мне было ясно, как я описал это.

Чтобы быть настолько описательным, насколько я могу, вот css, который я применил до сих пор для этой конкретной итерации этой страницы. Это не так близко к завершению (очевидно), но вы можете увидеть пару абсолютных позиций, которые я применил к этому разделу заголовка.

/*global*/

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    background: rgb(234, 234, 234);
}

body, .container {
    min-height: 100%;
}

.container {
    background: white;
    margin-top: 6.25em;
}

header {
    position: absolute;
    top: 0.625rem;
    background: transparent;
    text-align: center;

}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

/*typography*/

h1 {
    font-family: 'Parisienne', cursive;
    font-size: 2.5rem;
    color: #2713e7;
    position: relative;
    top: 1.25rem;

}

/*lists*/

.main-navigation {
    position: relative;
    top: 2.5rem;
}

.main-navigation li  {
    position: absolute;
    top: 10px;
    display: inline-block;
    margin-right: 10%;
    font-family: 'Atomic Age', cursive;
    font-size: 1.5625rem;

}

/*borders*/

.main-navigation {
    border: 2px solid black;
}

.main-navigation li  {
    display: inline-block;
    border: 2px solid black;


}