Frage zum HTML Code

Jopo · 19. Januar 2015

Würde gerne wissen ob ich die html Übersichtlichkeit gestaltet habe.Ich denke schon.

HTML

<!--
	Website erstellt von Nikolas Thiel.
-->




<!DOCTYPE html>




<!--
Anfang vom HTML
-->




<html>
	<head>

<!--
 Anfang vom Titel 
 -->

		<title>
			Spielehelfer - Startseite
		</title>

<!--
 Ende vom Titel 
 -->

<!--
 Anfang von Meta Tags 
 -->

<!--
Anfang für Meta Tag "Rechte"
-->

		 <meta name="copyright" content=" (c) Nikolas Thiel">
		 <meta name="author" content="Nikolas Thiel">
		 <meta http-equiv="imagetoolbar" content="false">

<!--
Ende für Meta Tag "Rechte"
-->




<!--
Anfang für Spider,Crawler Befehle
-->

		 <meta name="revisit-after" content="14 days">
		 <meta name="robots" content="index,follow">

<!--
Anfang für Spider,Crawler Befehle
-->




<!--
Anfang für Textsprache und Sprache
-->

		 <meta http-equiv="Content-Type" content=
		"text/html; charset=utf-8">
		<meta http-equiv="language" content="deutsch, de">

<!--
Anfang für Textsprache und Sprache
-->




<!--
Anfang für Websitebeschreibung
-->

		 <meta name="audience" content="alle">
		 <meta name="page-topic" content="Download,Tipps und Tricks,Tutorials,Informationen,Spiele Tipps und Tricks">
		<meta name="description" content=
		"Viele Tipps undTricks zu Spielen.Tutorials zu HTML,CSS und vieles mehr.Die perfekte Spiele und Tutorial Website.Startseite von SpieleHelfer.1x.de">
		<meta name="keywords" content=
		"SpieleHelfer.1x.de,Spielehelfer.1x.de,spielehelfer.1x.de,Helfer,helfer,Hilfe,hilfe,Spiel,spiel,Spiele,spiele,Tips,tips,Tipps,tipps,Tipp,tipp,Trick,trick,Tricks,tricks,App,app,Apps,apps,GooglePlay,Googleplay,googleplay,IOS,ios,Android,android,iphone,Iphone,IPhone,IPad,Ipad,ipad,Games,games,HTML,html,CSS,css,PHP,php,Downloads,downloads,Download,download,PSP,psp,PPSSPP,ppsspp,Emulator,emulator,ISO,iso,Gamescon,gamescon,Video,Videos,video,videos,Tutorial,Tutorials,tutorial,tutorials,Website,website,Homepage,homepage,Cheat,cheat,Cheats,cheats, PS3,ps3,ps4,PS4,XBox,Xbox,xbox,Xbox 360,XBox 360,xbox 360,xbox360,Xbox360,XBox360,Ps2,PS1,Ps3,PS1,PS2,ps1,ps2,XBox One,XBox one,Xbox One,Xbox one,xbox One,xbox onePro,pro,Nintendo,nintendoWiiwii,Wii U,wii U,wii u,3ds,3DS,3ds xl,3DS XL"
		 lang="de">




		 
<!--
Enden für Websitebeschreibung
-->

<!--
 Ende von Meta Tags 
 -->


<!-- 
Anfang von CSS Datein 
-->

		<link href="http://localhost:8080/css/style.css" rel="stylesheet" type=
		"text/css">
		<link href="http://localhost:8080/css/bildoptimierung.css" rel="stylesheet" type=
		"text/css">
		<link href="http://localhost:8080/css/menu.css" rel="stylesheet" type="text/css">
		<link href="http://localhost:8080/css/platzhalter.css" rel="stylesheet" type=
		"text/css">
		<link href="http://localhost:8080/css/seiten-menu.css" rel="stylesheet" type=
		"text/css">
		<link href="http://localhost:8080/css/suchknopf.css" rel="stylesheet" type=
		"text/css">
		<link href="http://localhost:8080/css/uberschrift.css" rel="stylesheet" type=
		"text/css">
		<link href="http://localhost:8080/css/text.css" rel="stylesheet" type="text/css">
	</head>

<!--
 Ende von CSS Datein 
 -->

<!--
 Anfang vom Oberenbereich
 -->

	<body>
		<div id="templatemo_wrapper_outer">
			<div id="templatemo_banner">
			 <div id="templatemo_banner2">
			</div></div>

<!--
 Ende vom Oberenbereich 
 -->

<!--
 Anfang vom Drop-Down-Menü 
 -->

			<div id="templatemo_menu">
			<nav>
				<ul id="menu">
					<li class="cat1">
						<a href=
						"http://localhost:8080/">Startseite</a>
					</li>

<!--
Anfang vom PlayStation Untermenü
-->

					<li class="cat2">
						<a href="#">PlayStation</a> 
						<ul>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/playstation/ps1.html">PlayStation
								1</a>
							</li>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/playsation/ps2.html">PlayStation
								2</a>
							</li>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/playstation/ps3.html">PlayStation
								3</a>
							</li>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/playstation/ps4.html">PlayStation
								4</a>
							</li>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/playstation/psp.html">PlayStation
								Portable</a>
							</li>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/playstation/psvita.html">PlayStation
								Vita</a>
							</li>
						</ul>
					</li>

<!--
Ende vom PlayStation Untermenü
-->

<!--
Anfang vom Xbox Untermenü
-->

					<li class="cat3">
						<a href="#">Xbox</a> 
						<ul>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/xbox/xbox.html">Xbox</a>
							</li>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/xbox/xbox-360.html">Xbox
								360</a>
							</li>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/xbox/xbox-one.html">Xbox
								One</a>
							</li>
						</ul>
					</li>

<!--
Ende vom Xbox Untermenü
-->




<!--
Anfang vom Nintendo Untermenü
-->

					<li class="cat4">
						<a href="#">Nintendo</a> 
						<ul>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/nintendo/wii.html">Wii</a>
							</li>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/nintendo/wii-u.html">Wii
								U</a>
							</li>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/nintendo/nintendo-3ds.html">Nintendo
								3DS / 3DS XL</a>
							</li>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/nintendo/nintendo-64.html">Nintendo
								64</a>
							</li>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/nintendo/famicon.html">Famicon</a>
							</li>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/nintendo/super-famicon.html">Super
								Famicon</a>
							</li>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/nintendo/game-watch.html">Game
								and Watch</a>
							</li>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/nintendo/virtual-boy.html">Virtual
								Boy</a>
							</li>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/nintendo/gamecube.html">GameCube</a>
							</li>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/nintendo/gameboy.html">Game
								Boy/Advance</a>
							</li>
							<li>
								<a href=
								"http://localhost:8080/html/konsole/nintendo/pokemon-mini.html">Pokemon
								Mini</a>
							</li>
						</ul>

<!--
Ende vom Nintendo Untermenü
-->

					</li>
				</ul>
				</nav>
			</div>

<!--
Ende vom Drop-Down-Menü
-->

<!--
Anfang von der linken Seite
-->

			<div id="templatemo_content_wrapper">
				<div class="templatemo_left_bar margin_right_10">
					<div class="header_01">
						Men&uuml
					</div>

<!--
Anfang vom Menü auf der linken Seite
-->

					<ul>
						<li>
							<a href="http://localhost:8080/html/download/start.html">Downloads</a>
						</li>
						<li>
							<a href=
							"http://localhost:8080/html/gamescon/start.html">Gamescon</a>
						</li>
						<li>
							<a href=
							"http://localhost:8080/html/tutorial/html-css.html">HTML
							CSS</a>
						</li>
						<li>
							<a href="#">Bald verf&uumlgbar!</a>
						</li>
						<li>
							<a href=
							"http://localhost:8080/html/tipps-und-tricks/start.html">Tipps
							und Tricks</a>
						</li>
						<li>
							<a href=
							"http://localhost:8080/html/service/support.html">Support</a>
						</li>
						<li>
							<a href=
							"http://localhost:8080/html/service/donate.html">Donate</a>
						</li>
					</ul>

<!--
Ende vom Menü auf der linken Seite
-->




<div class="margin_bottom_20 horizontal_divider"></div> 
			<div class="margin_bottom_20"></div>

                <div class="cleaner"></div>

<!--
Anfang vom YouTube Video 1
-->




					<div class="latest_news">
						<div class="header_01">
							Kingdom Hearts 3 Trailer
						</div><iframe width="180" height="140" src=
						"https://www.youtube.com/embed/AtLkym8-RXU"
						frameborder="0" allowfullscreen="true" alt=
						"Leider unterst ützt der Browser das Video nicht. :-("></iframe>

						<p>
							Ein Trailer von Kingdom Hearts 3.Wird wohl SquareEnix dieses Jahr mit KH3 Marktf&uumlhrer.
						</p>
					</div>

<!--
Ende vom YouTube Video 1
-->




<div class="margin_bottom_20 horizontal_divider"></div> 
			<div class="margin_bottom_20"></div>

                <div class="cleaner"></div>

<!--
Anfang von der Suchoption
-->

					<div class="header_01">
						Suche
					</div>
					<form id="search" method="get" action=
					"http://localhost:8080/suchen.php">
						<p>
							<input type="text" name="q" id=
							"suchbegriff" value=""> <input type=
							"submit" id="search_button" align=
							"center">
						</p>
					</form>
					<div class="margin_bottom_20"></div>
				</div>

<!--
Ende von der Suchoption
-->




<!--
Ende vom Menü auf der linken Seite
-->




<!--
Anfang vom Mittelstück
-->

				<div class="templatemo_content margin_right_10">
					<div class="content_section">
						 <div class="header_02">
							Herzlich Wilkommen auf meiner Website!
						</div>
						<img src="http://localhost:8080/images/wilkommen.jpg" width="440px"/>					
						<p>
							<span>Hier findest du zu sehr viele
							Spiele Tipps und Tricks und
							Tutorials.Viel Spa&szlig; beim
							durchst&oumlbern.</span></br></br>
						</p>
					</div>

Alles anzeigen

Und so weiter.Was denkt ihr?

Nitamud · 19. Januar 2015

Ich finde das ganze vor allem am Anfang ein wenig zu überkommentiert(Begin Html, Kopf...) , dies kann auch ohne die Kommentare aus dem Quellcode erkannt werden.

Prüf den Code allgemein mal auf die Validiät, mir scheint es so als ob ein paar Ending-Tags fehlen würden... Verzichte allgemein auf dieses Gedive und nutz stattdessen die neueren, semantisch besseren HTML 5 Tags zur Auszeichnung der Sectioning-Bereiche. Zudem hoffe ich, dass der Orginal-Quellcode besser strukturiert und eingerückt ist.

Die Css-Dateien würde ich nicht alle einfach so einbinden , sonder zuerst in einenr zentralen Datei kapseln und nur diese dann einbinden. Zudem würde ich auch die Stylesheets außerhalb des Document-Roots aufbewahren(ist aber wohl Ansichtssache). Zudem sollte bei den Styleseehts nicht mit absoluten Pfaden gearbeitet werden, denn wenn du diese Seite online stellen willst, wirst du sehen wieviel Zeit das anpassen in Anspruch nimmt

Das wars erstmals von mir,

Mfg Nita

Edit:

Die Namen der Ids/Klassen sind in meinen Augen auch ein wenig unpassend. Diese sollten nicht das Aussehen , sondern den Inhalt/die Bedeutung des Abschnitts kennzeichen, da sich das Aussehen ja ändern kann

wolf · 19. Januar 2015

Also von über 400 Zeilen mal auf 154 Zeilen abgespeckt und noch immer mindestens genauso übersichtlich meiner Meinung nach.
Du solltest darauf achten nicht so viele unnötige ID's zu vergeben und wenn schon dann schreib alles auf Englisch oder auf Deutsch bei Klassen/ID Namen (Englisch bevorzugt..)
Weiter solltest du Sematisch, logische HTML5 Tag's verwenden wie header,main,footer ... und deine Tag's SCHLIESSEN!
Deine MEAT-Tag's .. naja, wems gefällt, ich denke man kann es auch übertreiben aber ja, aknn auch daran liegen das da gefühle 20 CSS links stehen
Nicht jeder Inhalt eines Tag's muss eingerückt werden -> siehe deine Navigation -> war nicht überblickbar

Soviel von mir erstmal

Hier noch die abgespeckte Version wo ich mal ein bisschen kommentiert habe..

HTML

<!-- Website erstellt von Nikolas Thiel. -->
<!DOCTYPE html>
<html>
    <head>
        <title>Spielehelfer - Startseite</title>

        <!-- Nicht mit Metas übertreiben -->
        <meta name="copyright" content=" (c) Nikolas Thiel">
        <meta name="author" content="Nikolas Thiel">
        <meta http-equiv="imagetoolbar" content="false">




        <meta charset="utf-8"><!-- HTML5 meta zum Charset -->
        <meta http-equiv="language" content="deutsch, de">

        <meta name="revisit-after" content="14 days">
        <meta name="robots" content="index,follow"> 
        <meta name="audience" content="alle">
        <meta name="page-topic" content="Download,Tipps und Tricks,Tutorials,Informationen,Spiele Tipps und Tricks">
        <meta name="description" content="Viele Tipps undTricks zu Spielen.Tutorials zu HTML,CSS und vieles mehr.Die perfekte Spiele und Tutorial Website.Startseite von SpieleHelfer.1x.de">
        <!-- lieber auf 1-10 Tag's beschränken!! -->
        <meta name="keywords" content="SpieleHelfer.1x.de,Spielehelfer.1x.de,spielehelfer.1x.de,Helfer,helfer,Hilfe,hilfe,Spiel,spiel,Spiele,spiele,Tips,tips,Tipps,tipps,Tipp,tipp,Trick,trick,Tricks,tricks,App,app,Apps,apps,GooglePlay,Googleplay,googleplay,IOS,ios,Android,android,iphone,Iphone,IPhone,IPad,Ipad,ipad,Games,games,HTML,html,CSS,css,PHP,php,Downloads,downloads,Download,download,PSP,psp,PPSSPP,ppsspp,Emulator,emulator,ISO,iso,Gamescon,gamescon,Video,Videos,video,videos,Tutorial,Tutorials,tutorial,tutorials,Website,website,Homepage,homepage,Cheat,cheat,Cheats,cheats, PS3,ps3,ps4,PS4,XBox,Xbox,xbox,Xbox 360,XBox 360,xbox 360,xbox360,Xbox360,XBox360,Ps2,PS1,Ps3,PS1,PS2,ps1,ps2,XBox One,XBox one,Xbox One,Xbox one,xbox One,xbox onePro,pro,Nintendo,nintendoWiiwii,Wii U,wii U,wii u,3ds,3DS,3ds xl,3DS XL" lang="de">




        <!-- Nicht alles brauch seine eigene Datei (platzhalter,[menu - seiten-menu]<- Unterschied? :D,suchknopf,uberschrift, text)-->
        <link href="/css/style.css" rel="stylesheet" type="text/css">
        <link href="/css/bildoptimierung.css" rel="stylesheet" type="text/css">
        <link href="/css/menu.css" rel="stylesheet" type="text/css">
        <link href="/css/platzhalter.css" rel="stylesheet" type="text/css">
        <link href="/css/seiten-menu.css" rel="stylesheet" type="text/css">
        <link href="/css/suchknopf.css" rel="stylesheet" type="text/css">
        <link href="/css/uberschrift.css" rel="stylesheet" type="text/css">
        <link href="/css/text.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="templatemo_wrapper_outer">
            <!-- <header> -->
                <div id="templatemo_banner">
                    <div id="templatemo_banner2"></div>
                </div>
                <div id="templatemo_menu"><!-- dat div kannst dir sparen, hast doch das nav ..wie so oft.. ?! -->
                    <nav>
                        <ul id="menu">
                            <li class="cat1">
                                <a href="/">Startseite</a>
                            </li>           
                            <li class="cat2"><!-- Hierunter steht doch schon der Menü-Name?! -->
                                <a href="#">PlayStation</a> 
                                <ul>
                                    <li><a href="/html/konsole/playstation/ps1.html">PlayStation1</a></li>
                                    <li><a href="/html/konsole/playsation/ps2.html">PlayStation2</a></li>
                                    <li><a href="/html/konsole/playstation/ps3.html">PlayStation3</a></li>
                                    <li><a href="/html/konsole/playstation/ps4.html">PlayStation4</a></li>
                                    <li><a href="/html/konsole/playstation/psp.html">PlayStationPortable</a></li>
                                    <li><a href="/html/konsole/playstation/psvita.html">PlayStationVita</a></li>
                                </ul>
                            </li>       
                            <li class="cat3">
                                <a href="#">Xbox</a> 
                                <ul>
                                    <li><a href="/html/konsole/xbox/xbox.html">Xbox</a></li>
                                    <li><a href="/html/konsole/xbox/xbox-360.html">Xbox 360</a></li>
                                    <li><a href="/html/konsole/xbox/xbox-one.html">Xbox One</a></li>
                                </ul>
                            </li>
                            <li class="cat4">
                                <a href="#">Nintendo</a> 
                                <ul>
                                    <li><a href="/html/konsole/nintendo/wii.html">Wii</a></li>
                                    <li><a href="/html/konsole/nintendo/wii-u.html">WiiU</a></li>
                                    <li><a href="/html/konsole/nintendo/nintendo-3ds.html">Nintendo3DS / 3DS XL</a></li>
                                    <li><a href="/html/konsole/nintendo/nintendo-64.html">Nintendo64</a></li>
                                    <li><a href="/html/konsole/nintendo/famicon.html">Famicon</a></li>
                                    <li><a href="/html/konsole/nintendo/super-famicon.html">SuperFamicon</a></li>
                                    <li><a href="/html/konsole/nintendo/game-watch.html">Gameand Watch</a></li>
                                    <li><a href="/html/konsole/nintendo/virtual-boy.html">VirtualBoy</a></li>
                                    <li><a href="/html/konsole/nintendo/gamecube.html">GameCube</a></li>
                                    <li><a href="/html/konsole/nintendo/gameboy.html">GameBoy/Advance</a></li>
                                    <li><a href="/html/konsole/nintendo/pokemon-mini.html">PokemonMini</a></li>
                                </ul>       
                            </li>
                        </ul>
                    </nav>
                </div>
            <!-- </header> -->




            <div id="templatemo_content_wrapper">
                <!-- <aside> -->
                <div class="templatemo_left_bar margin_right_10">
                    <!-- <nav> -->
                        <div class="header_01">Menü</div><!-- wieso verwendest du keine h-tag's ? -->
                        <ul>
                            <li><a href="/html/download/start.html">Downloads</a></li>
                            <li><a href="/html/gamescon/start.html">Gamescon</a></li>
                            <li><a href="/html/tutorial/html-css.html">HTMLCSS</a></li>
                            <li><a href="#">Bald verfügbar!</a></li>
                            <li><a href="/html/tipps-und-tricks/start.html">Tippsund Tricks</a></li>
                            <li><a href="/html/service/support.html">Support</a>
                            </li><a href="/html/service/donate.html">Donate</a></li>
                        </ul>
                    <!-- </nav> -->




                    <!-- also hier bei diesem gedive verliere ich die Übersicht!! -->
                    <div class="margin_bottom_20 horizontal_divider"></div> 
                    <div class="margin_bottom_20"></div>
                    <div class="cleaner"></div>
                    <div class="latest_news">
                        <div class="header_01">
                            Kingdom Hearts 3 Trailer
                        </div>
                        <iframe width="180" height="140" src="https://www.youtube.com/embed/AtLkym8-RXU" frameborder="0" allowfullscreen="true" alt="Leider unterst ützt der Browser das Video nicht. :-("></iframe>
                        <p>
                            Ein Trailer von Kingdom Hearts 3.Wird wohl SquareEnix dieses Jahr mit KH3 Marktführer.
                        </p>
                    <!-- </div> -->
                    <div class="margin_bottom_20 horizontal_divider"></div> 
                    <div class="margin_bottom_20"></div>
                    <div class="cleaner"></div>
                    <div class="header_01">Suche</div>
                    <form id="search" method="get" action="/suchen.php">
                        <p>
                            <input type="text" name="q" id="suchbegriff" value="">
                            <input type="submit" id="search_button" align="center"><!-- align="center" - really?!?! -->
                        </p>
                    </form>
                    <div class="margin_bottom_20"></div>
                </div>
                <!-- </aside> -->




                <!-- <main> -->
                <div class="templatemo_content margin_right_10">
                    <div class="content_section">
                         <div class="header_02">
                            Herzlich Wilkommen auf meiner Website!
                        </div>
                        <img src="/images/wilkommen.jpg" width="440px"/>                    
                        <p>
                            <span>
                                Hier findest du zu sehr viele
                                Spiele Tipps und Tricks und
                                Tutorials.Viel Spaß beim
                                durchstöbern.
                            </span>
                            </br></br><!-- <- dat da, macht man nicht! :p -->
                        </p>
                    </div>
                <!-- </div> -->
                <!-- </main> -->




                <!-- <footer> -->




                <!-- </footer> -->
            <!-- </div> dein content-wrap -->
        <!-- </div> dein page-wrap -->
    <!-- </body> -->
<!-- </html> -->

Alles anzeigen

EDIT:
achja, dein Ranking wird durch so viele Keywords aufjedenfall nicht besser bei Google..

Jopo · 19. Januar 2015

Danke für euere Kommentare.Habe die Struktur mehr angepasst.Bei den Stellen mit den vielen div's sind wichtig.Zum richtigen darstellen.Aber danke :p

wolf · 19. Januar 2015

Also das sie wichtig sind glaube ich NICHT! du kannst genauso dem element selber magrgin-top 20px geben! -oder eine entsprechende Klasse u.ä.
Das Argument zählt nicht!

Nitamud · 19. Januar 2015

Was mir grad auch noch aufgefallen ist:

Wenn du konsequent UTF-8 verwendest , musst du die Umlaute nicht mehr durch Entinities umschreiben

Jopo · 19. Januar 2015

sicher ist sicher

wolf · 19. Januar 2015

Nein, das was du machst ist nicht sicher, da du sie falsch schreibst

Code

Du: Text&xumlText
Richtig: Text&xuml;Text

-Deswegen lieber einfach gleich normale umlaute tippen..
nh?

Jopo · 20. Januar 2015

Jep das bruacht man immer

Basi · 20. Januar 2015

Vielleicht nimmst du Kritik auch einfach an wenn du schon danach fragst. Wenn du es sowieso besser weißt dann brauchst du nicht zu fragen.

Jopo · 20. Januar 2015

Ich mache es einfach aus Sicherheit.Möchte einfach kein ungewollten Fehler zu lassen.Ich fühle mich so einfach sicherer.
Aber nochmal danke für euere Kritik und Tipps.Die HTML hat nur noch 140 Zeilen.Und ist noch sehr übersichtlich.Einige Kommentare waren wirklich unnötig.
Sorry für das gedive was ihr nicht versteht.
Kenne mich mit HTML5 noch nicht aus.
Werde aber mal im nächstem Monat mal anfangen bisschen zu gucken.

Danke an alle

Frage zum HTML Code

Jetzt mitmachen!

Teilen