HTML-Grundgerüst mit HTML5

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

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne

Loading…
Avatar von manuel

AUTOR

manuel