# HTML 5 - body/head-Tag weg lassen



## the_black_hawk (9. Mai 2012)

Hallo Leute,

laut den aktuellen Googlerichtlinien soll man ja bei HTML-5 Dokumenten den head und body Tag weg lassen.

In modernen Browsern funktioniert das soweit super, aber bereits IE8 zeigt die Seite dann nichtmehr an (alles bis auf den Hintergrund wird ausgeblendet)

Ich möchte mich bei meinen aktuellen Projekten an den Google-Guidelines orientieren, aber trotzdem die Verfügbarkeit meiner Websites auf allen Browsern gewährleisten.

Wie bring ich das unter reinem Hut? (evtl. Lösung mit Javascript sind willkommen)


----------



## ByeBye 242513 (9. Mai 2012)

Versuch es mit ein wenig PHP (_User Agent ist das Stichwort_). PHP hat den Vorteil das Besucher es nicht deaktivieren können, wie JavaScript. Und sollte der User Agent mal nicht erkannt werden (weil er manipuliert wurde), einfach auf die Seite mit <head> und <body> umleiten. So kann jeder deine Seite besuchen.

_P. S. Ich würde mich nicht ausschließlich an Google-Richtlinien halten _


----------



## the_black_hawk (9. Mai 2012)

danke fürs feedback.
miz user_agent oder get_browser in pap zu arbeiten ist keine schlechte idee.
aber wie würde die prüfung denn aussehen wenn ich alles berücksichtigen möchte was niedriger als IE9 ist? oder noch besser, alles was HTML5 nicht unterstützt(gibts da ne prüfung?)


----------



## ByeBye 242513 (9. Mai 2012)

Ich bin momentan nicht zuhause, aber ich kann dir heute Abend einen Code dafür posten.


----------



## the_black_hawk (9. Mai 2012)

alles klar, dann warte ichg espannt auf dein feedback 

habe selbst schon folgenden ansatz:

```
if($browser['cssversion'] == 3) {}
```

allerdings haben mein Iron (chrome) und IE9 ein CSSversion von '0'. das bringt mir also leider auch nichts... hoffe gibt eine gute lösung


----------



## ByeBye 242513 (9. Mai 2012)

So, hier der Code:

```
function isOldBrowser() {
  $browser = array("useragent" => $_SERVER['HTTP_USER_AGENT'], "name" => "", "version" => "");
  $count = 1;
  
  while($count < 17) {
    // Internet Explorer
    if($count == '1') { $suchstring = 'MSIE 6.'; $browsername = "Internet Explorer"; $browserversion = "6"; }
    if($count == '2') { $suchstring = 'MSIE 7.'; $browsername = "Internet Explorer"; $browserversion = "7"; }
    
    // Google Chrome
    if($count == '3') { $suchstring = 'Chrome/2.'; $browsername = "Google Chrome"; $browserversion = "2"; }
    if($count == '4') { $suchstring = 'Chrome/3.'; $browsername = "Google Chrome"; $browserversion = "3"; }
    if($count == '5') { $suchstring = 'Chrome/4.'; $browsername = "Google Chrome"; $browserversion = "4"; }

    
    // Mozilla Firefox
    if($count == '6') { $suchstring = 'Firefox/3.'; $browsername = "Mozilla Firefox"; $browserversion = "3"; }
    if($count == '7') { $suchstring = 'Firefox/4.'; $browsername = "Mozilla Firefox"; $browserversion = "4"; }
    if($count == '8') { $suchstring = 'Firefox/5.'; $browsername = "Mozilla Firefox"; $browserversion = "5"; }
    
    // Opera
    if($count == '9') { $suchstring = 'Opera/9.3'; $browsername = "Opera"; $browserversion = "9.3"; }
    if($count == '10') { $suchstring = 'Opera/9.4'; $browsername = "Opera"; $browserversion = "9.4"; }
    if($count == '11') { $suchstring = 'Opera/9.5'; $browsername = "Opera"; $browserversion = "9.5"; }
    
    // Safari
    if($count == '12') { $suchstring = 'Safari/523.'; $browsername = "Safari"; $browserversion = "3.0"; }
    if($count == '13') { $suchstring = 'Safari/525.'; $browsername = "Safari"; $browserversion = "3.1"; }
    if($count == '14') { $suchstring = 'Safari/528.'; $browsername = "Safari"; $browserversion = "4"; }
    if($count == '15') { $suchstring = 'Safari/530.'; $browsername = "Safari"; $browserversion = "4"; }
    if($count == '16') { $suchstring = 'Safari/531.'; $browsername = "Safari"; $browserversion = "4"; }
  
    if(stristr($browser["useragent"], $suchstring) === FALSE) {
      return array("useragent" => $_SERVER['HTTP_USER_AGENT'], "name" => "", "version" => "");
    } else {
      return array("useragent" => $_SERVER['HTTP_USER_AGENT'], "name" => $browsername, "version" => $browserversion);
      break;
    }
    $count++;
  }
}
```
Und hier eine Liste, welcher Browser welche Informationen sendet.


----------



## CPoly (9. Mai 2012)

Das funktioniert bei mir auch im IE 6 einwandfrei. Immerhin sind auch bei HTML4 schon seit jeher diverse Tags optional. Poste bitte deinen Code.

Ich denke es ist auch nicht im Sinne des Styleguides, dass jemand um 27bytes zu sparen ein PHP Skript einbaut. Das zerstört doch jeglichen Vorteil.


----------



## Parantatatam (9. Mai 2012)

Nur mal so: wo steht da in den Richtlinien, dass man den HEAD- und BODY-Tag weglassen soll? Das ist absoluter Unsinn und dazu auch noch invalides HTML!


----------



## CPoly (9. Mai 2012)

einfach nur crack hat gesagt.:


> Nur mal so: wo steht da in den Richtlinien, dass man den HEAD- und BODY-Tag weglassen soll? Das ist absoluter Unsinn und dazu auch noch invalides HTML!



Hier steht's: http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#Optional_tags

Das ist übrigens 100% valide und überhaupt kein Unsinn.


----------



## Parantatatam (9. Mai 2012)

Da steht nur etwas von optionalen Tags, ja, aber nicht, dass dazu der HEAD- und BODY-Tag gehört. Dafür möchte ich bitte einen Beweis sehen. Sollte man mir den erbringen, wäre das erneut ein Grund für mich starke Kritik an HTML5 zu äußern.


----------



## CPoly (9. Mai 2012)

Wie bereits oben geschrieben, ist das bereits in HTML4 schon immer erlaubt gewesen (http://meiert.com/en/blog/20080601/optional-tags-in-html-4/). Ich habe doch direkt zur Stelle verlinkt, da steht


```
<!-- Not recommended -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>

<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
```

Und einen Beweis dafür gibt es nicht, weil es in der Spezifikation einfach festgelegt wurde. Diese ist ebenfalls auf der Google Seite verlinkt http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#syntax-tag-omission



> A body element's end tag may be omitted if the body element is not immediately followed by a comment.


----------



## Parantatatam (9. Mai 2012)

Oh, verzeih mir. Ich habe nicht gesehen, dass man auf die Pfeile klicken kann.


----------



## the_black_hawk (10. Mai 2012)

gut, wenn jetzt geklärt ist, dass es nach googlerichtlinien wünschenswert ist die besagten tags wegzulassen, hier mein quellcode(auf ein minimum reduziert):


```
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>title</title>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/ie_html5.js"></script>
<![endif]-->
<div class="wrapper">
  <header> header </header>
  <section>
    <div class="mainContainer">
      <nav>
        <ul>
          <li> link
        </ul>
      </nav>
      <div id="contentContainer"> content </div>
    </div>
  </section>
</div>
<footer>
  <div id="footerMenu">
    <ul>
      <li>link
    </ul>
  </div>
</footer>
```
Der Fehler tauch bei allen unter IE9 auf. Meine Tests haben ergeben, dass die eingebundene ie_html5.js das Problem verursacht. Woran kann das liegen?

Hier der code der .js:

```
(function(){
var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|');
for(var i = 0; i < html5elmeents.length; i++){
  	document.createElement(html5elmeents[i]);
  	}
}
)();
```


----------



## CPoly (10. Mai 2012)

Fehlerkonsole sagt "syntax error". Da ist eine schließende geschweifte Klammer, die da nicht hin gehört.


----------



## the_black_hawk (10. Mai 2012)

kann keinen fehler erkennen, es werden 2 klammern geöffnet und 2 geschlossen
ein syntax error wird bei mir ebenfalls nicht angezeigt

edit:
selbst wenn ich den script abänder funktioniert die seite nichtmehr

```
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("section");
```

jedes element was hier erstellt wird, wird im IE(unter 9)ausgeblendet(*aber nur wenn der bodytag fehlt*) - wieso?


----------



## CPoly (10. Mai 2012)

Sorry, mein Fehler.


Enthält deine CSS Datei für alle diese Elemente auch folgende Regel?


```
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
}
```

Mehr: https://github.com/h5bp/html5-boilerplate

Denn die Elemente sind dem alten IE unbekannt und deshalb ist display default auf "none".


----------



## the_black_hawk (10. Mai 2012)

ja habe die angaben bereits in meiner css drin
edit:
wenn ich die page im IE untersuche, sehe ich dass er head und bodytag automatisch setzt(glaub soll auch so sein) - allerdings befinden sich alle meine html5 elemente im head tag(weswegen diese nicht angezeigt werden)


----------



## CPoly (10. Mai 2012)

Wenn du das Skript ans Ende des Dokumentes setzt, dann funktioniert alles. JavaScript sollte sowieso ans Ende des Dokumentes.


----------



## the_black_hawk (10. Mai 2012)

perfekt, danke das wars!

habe gedacht, dass dieser script noch bevor die entsprechenden elemente benutzt werden eingebunden werden muss - dem ist wohl nicht so^^ danke nochmal funktioniert jetzt prima


----------

