Webdesign

HTML-Grundgerüst mit HTML5

5. 02. 2014

HTML5 und CSS3 naht.

Und obwohl es noch nicht alle Browser unterstützen, gibt es bereits doch einige Vereinfachungen, die bereits genutzt werden können. Dies soll hier einen kurzen Überblick liefern. Details, warum, finden sich in der Quelle „Dive into HTML 5“.

HTML-Grundgerüst alt

Hier ein Beispiel, wie eine HTML-Datei zur Zeit aufgebaut sein könnte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Meine Website</title>
  <link rel="stylesheet" href="style-original.css" type="text/css" />
  <link rel="alternate" type="application/atom+xml" title="My Weblog feed" href="/feed/" />
  <link rel="shortcut icon" href="/favicon.ico" />
</head>
 
<body>
Blafasel
</body>
</html>

HTML-Grundgerüst neu

Und hier, wie es vereinfacht auch alle Browser verstehen:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="utf-8" />
  <title>Meine Website</title>
  <link rel="stylesheet" href="style-original.css" />
  <link rel="alternate" type="application/atom+xml" title="My Weblog feed" href="/feed/" />
  <link rel="shortcut icon" href="/favicon.ico" />
</head>
 
<body>
Blafasel
</body>
</html>

Erweitertes Beispiel

Hier ein Beispiel, wie ein „modernes“ Grundgerüst mit einigen wichtign Tools aussehen könnte:

<!DOCTYPE html>
<html lang="de">
 
<head>
    <title>Site-Titel</title>
 
    <!-- Einige grundlegende Einstellungen -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="favicon.png">
 
    <!-- Modernizr: HTML5-Elemente nutzen -->
    <!-- Quelle: http://modernizr.com/ -->
    <script type="text/javascript" src="http://oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js"></script>
 
    <!-- Normalize: Normalisieren der Browser-Darstellung -->
    <!-- Quelle: http://necolas.github.io/normalize.css/ -->
	<link rel="stylesheet" type="text/css" href="styles/normalize.css">
 
    <!-- FontAwesome: Definition von Icons -->
    <!-- Quelle: http://fontawesome.io/3.2.1/ -->
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
 
  	<!-- User-Styles -->
  	<link rel="stylesheet" href="styles/site-styles.css" />  
</head>
 
<body>
	<div id="wrapper">
           ...
	</div>
</body>
</html>

Weiteres Beispiel

Hier ein Beispiel, wie es „HTML5 Boilerplate“ angeht:

<header id="header">    
  <h1>HTML5 Layout</h1>    
  <nav>      
    <ul>        
      <li class="active"><a href="#">Home</a></li>        
      <li><a href="#">Link1</a></li>        
      <li><a href="#">Link2</a></li>      
    </ul>    
  </nav>  
</header>  
 
<section id="content">    
  <article>      
    <h2>Artikel Überschrift</h2>      
    <p>Lorum ipsum...</p>    
  </article>  
</section>  
 
<aside>    
  <h2>Sidebar</h2>    
  <p>Lorum ipsum...</p>  
</aside>
 
<footer>    
  <a href="#">Impressum</a>  
</footer>

Quellen

image_print
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
Loading...

Author

Manuel

Ich bin Manuel Wurm, IT-Consultant und Blogger. Ich mag es, verschiedenste Dinge auszuprobieren. Vor allem mit Retro-Computern, Bierbrauen, Bogenschießen und Schlagzeug spielen verbringe ich gerne meine Zeit. Kochen zählt zu meinen größten Hobbys - das spiegelt sich auch auf wurmweb.at wieder, wo ich gerne Rezepte teile und hilfreiche Tipps für Interessierte festhalte.

Related Posts