<nav> вниз по левой части страницы

Question

Одним из преимуществ HTML 5 являются семантические теги, такие как <header>, <nav> и <main>.

К сожалению, я не нашел способа их стилизовать, поэтому <nav> идет вниз по левой части страницы, не без родительского <div>, во всяком случае. Мне кажется, что такая <div> портит семантику, и я не уверен, что это технически правильный HTML.

<header>My Page</header>
<div class="nav-main"> <!-- I don't like this -->
    <nav>
        <a href="/foo.html">Foo</a>
        <a href="/bar.html">Bar</a>
    </nav>
    <main>
        <h1>My Main Content</h1>
        <p>Blah.</p>
    </main>
</div>
<footer>ⓒ Not really copyright</footer>

CSS:

div.nav-main {
    display: flex;
}
nav {
    width: 10em;
}
nav a {
    display: block;
}

Есть ли чистый способ сделать это, без <div>?

Я не думаю, что старая школа float: left - это решение, потому что я не хочу, чтобы <main> оборачивался вокруг <nav>, если он выше, и я не хочу добавлять произвольные высоты или другие хаки. Я просто хочу, чтобы <main> и <nav> имели естественную высоту и одинаковую ширину, а <footer> должна быть под обоими.

В противном случае, если кто-то сможет процитировать уверенность в том, что завершение <nav> и <main> в <div> в порядке, я просто поблагодарю вас и продолжу ... хотя это все еще не выглядит для меня очень элегантно.

Answer 1

Вы слишком стараетесь добиться минималистской разметки. То, что у вас там, чрезвычайно просто по сравнению практически с любым сайтом. Если это работает, чтобы иметь пару элементов div для макета, это не проблема.

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

Answer 2

Я до сих пор не нашел «официального» (W3C) слова о том, может ли <div> быть законным родителем для <nav> или <main>, но я доверяю веб-документация Mozilla ,Они утверждают, что:

• <nav> может иметь элемент '[a] ny, который принимает содержимое потока ' в качестве родителя, и
• <main> родительским элементом может быть любой элемент '[w], здесь ожидается поток содержимого, но только если это иерархически правильный main элемент '.

Так что в этом примере <div> в порядке.

Answer 3

Так что <div> - это несемантический элемент, так что у вас есть технически правильный html здесь.Но я понимаю, что не хочу, чтобы дивы везде.Вы можете поместить flex на тело, установить ширину верхнего и нижнего колонтитула на 100%, чтобы они находились на отдельной строке.Так что это будет

body 
{
 display:flex;
 flex-flow: row wrap;
}
header, footer
{
 width:100%
}

Надеюсь, это поможет!