Menü-Button für responsives HTML

[Gunnar Bittersmann]

@@Semi1717

Damit es anschaulicher für euch ist, hier die komplette HTML+CSS-Datei:

Was für die Anschaulichkeit des Ganzen zu tun wäre, hatte ich ja schon gesagt.

Hab aber schonmal das HTML angeschaut:

			<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"

Das fehlende > ist noch der kleinere Fehler. Der größere ist user-scalable=no. Weg damit! Nutzer sollen zoomen können, wenn sie es wollen. Oder müssen, um die Seite lesen zu können.

			<section id="menubar">
				<ul>
					<li><a class="menubutton" href="#menu"><img src="images/menu.png"></a>
				</ul>
			</section>

Das ist wohl keine section.

Und das ist wohl keine Liste.

Wie bereits verlinkt muss der Button innerhalb des nav-Elements sein.

Apropos Button: Wieso ist das ein a-Element und kein button?

Dem img fehlt der notwendige alt-Text.

			<header>
				<h1>Microsoft</h1>
			</header>
			<nav class="nav">
				<ul>
					<li><a href="index.html">Startseite</a></li>
					<li><a href="steckbrief.html">Steckbrief</a></li>
					<li><a href="geschichte.html">Geschichte</a></li>
					<li><a href="microsoft_heute.html">Microsoft heute</a></li>
					<li><a href="quellen.html"class="active">Quellen</a></li>
				</ul>
			
			</nav>

h1 sollte nicht die Website-Kennung verwendet werden, sondern für die jeweilige Seiten-Überschrift.

Ich würde das nav-Element mit in den header setzen.

Vor class="active" fehlt ein Leerzeichen. Die Klasse ist überflüssig; die aktuelle Seite sollte im Menü mit aria-current="page" gekennzeichnet werden – das lässt sich auch zum Stylen nutzen.

Die aktuelle Seite sollte nicht verlinkt sein. Wenn ein Link, dann zum Hauptinhalt:

<li><a tabindex="0" aria-current="page">Quellen</a></li>

bzw.

<li><a href="#main" aria-current="page">Quellen</a></li>

			<section id="main">

Ein sicheres Zeichen, dass das keine section ist, sondern der Hauptinhalt der Seite: <main id="main">

				<article>
					<h2>Quellen</h2>

Nein, kein article. Und das wäre dann die h1.

					<img src="images/cortanagif.gif" alt="msgif">		

Auch für dieses Bild fehlt ein sinnvoller Alternativtext.

LLAP 🖖