Przejrzystość kodu - znacznik div, a section

Witam, ostatnimi czasy, w ramach ćwiczeń, tworzę sobie stronę internetową. Problem w tym, ze ciągle mam wątpliwości, a w głowie rodzi mi się mnóstwo pytań w stylu "hmm, czy ten kod na pewno nie powinien być napisany inaczej?"

Np. ten kod:

                  <section>
				<nav class="gornemenu">
			
					<ul>
				
						<li>Strona główna</li>
						<li>Współpraca</li>
						<li>Kontakt</li>
						<li>Forum</li>
			

				
				</nav>
				
				</section>
	

			</ul>
	</header>
	
	<section>
		<nav class="menu">
			<ul>
				<h2>Portal</h2>
				<li>Strona główna</li>
				<li>Forum</li>
				<li>Kotankt</li>
				<li>Administracja</li>
				<section class="menunaw">
					<h2>Nawigacja</h2>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
					<li>C10</li>
				</section>
				<section class="Multimedia">
					<h2>Multimedia</h2>
					<li>Oi</li>
					<li>E</li>
					<li>ost</li>
				</section> 
               </nav>

Mam wrażenie, że jest tu totalny bałagan, a każdy profesjonalny webmaster wyśmiał by "to coś" i zadał sobie pytanie: "Co za idiota to pisał?"

Atrybut class używa się w przypadku gdzie jest więcej elementów? Czy w takim razie w <nav class="menu"> powinienem użyć <nav id="menu">?
Lub np. <section class="menunaw"> zmienić na <div class="menunaw"> lub <div id="menunaw">?

Mógłby ktoś mi wyjaśnić sytuacje, w których używa się tych znaczników tak, aby kod był jak najbardziej przejrzysty itd.

`dodanie znaczników ``` - @furious programming

Po co Ci te sekcje w nawigacji?? O ile wiem służą one do rozdzielanie tematycznego TREŚĆI. Zamień je na miłe dla oczu divy :) Poza tym masz w kodzie źle pozamykane tagi (wewnątrz listy domykasz nav i sekcję otwarte przed listą). Słowa w nazwach klas rozdzielaj myślnikami bądź podkreśleniami. Nie ładuj nic do do <ul> tagu prócz elementów listy

Ja bym to zrobił tak:

<header>
	<nav class="menu-top"> 
        <ul>
			<li>Strona główna</li>
			<li>Współpraca</li>
			<li>Kontakt</li>
			<li>Forum</li>
		</ul>
	</nav>
</header>
 
<nav class="menu-navbar">
	<h2>Portal</h2>
	<ul class="menu-main">
		<li>Strona główna</li>
        <li>Forum</li>
        <li>Kotankt</li>
        <li>Administracja</li>
	</ul>
	
    <h2>Nawigacja</h2>
    <ul class="menu-navigation">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>C10</li>
	</ul>
    
	<h2>Multimedia</h2>	
    <ul class="menu-multimedia">
        <li>Oi</li>
        <li>E</li>
        <li>ost</li>
	</ul>
</nav>

Dziękuję bardzo, własnie o coś takiego mi chodziło, żeby ktoś mnie nakierował jak porządkować znaczniki :)