Структура html документа (html5 тема 01 - структура html...
TRANSCRIPT
Структура HTML документаСтажировка HTML5
Света Шарипова
HTML5<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>HTML5</title><link rel="stylesheet"
href="main.css"><script
src="app.js"></script></head><body>...</body></html>
<body><header>...</
header><main>...</
main><footer>...</
footer></body>
или<body>
<header>...</header>
<div class="main">...</div>
<footer>...</footer></body>
HTML5
HTML5<header><h1>...</h1></header>
<div class="main"><section>
<article><h1> Заголовок
статьи1 </h1></article><aside></aside>
</section><section>
<article><h1> Заголовок
статьи2 </h1></article>
</section></div>
Семантические теги нельзя использоватьне по назначению
<section><section>
<section>
…
</section></section>
</section>
HTML5<header><h1>
<a href="./index.html">
<img src="..." alt="...">
</a></h1><nav>
<ul>
<li><a>...</a></li>
<li><a>...</a></li></ul>
</nav></header>
Браузерная поддержка
section, article, aside, footer, header, nav, hgroup { display: block;}
Стилизация для браузеров с частичной поддержкой
<!--[if lt IE 9]> <script> document.createElement("header ); document.createElement("footer"); document.createElement("section"); document.createElement("aside"); document.createElement("nav"); document.createElement("article"); document.createElement("hgroup"); document.createElement("time" ); </script><![endif]-->
Полифил для IE<9
Условные комментарии IE
Все условные комментарии поддерживаются в IE<10
Подключение css “для всех IE” (т.е. до 9 включительно):<!--[if IE]>
<link rel="stylesheet" href="all-ie-only.css" /><![endif]-->
Подключение css для IE8 и ниже:<!--[if lt IE 9]>
<link rel="stylesheet" href="ie8-and-down.css" /><![endif]-->
Условные комментарии IE
Подключение css “для всех не IE” (т.е. для IE10+ и всех других браузеров):
<!--[if !IE]><!--><link rel="stylesheet" href="not-ie.css" />
<!--<![endif]-->
Условные классы IE<!DOCTYPE html><!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="iem7"> <![endif]--><!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class=" ie6 oldie"> <![endif]--><!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="ie7 oldie"> <![endif]--><!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="ie8 oldie"> <![endif]--><!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US"><!--<![endif]-->
Полезные ссылки:
Статьи про HTML5:https://developer.mozilla.org/ru/docs/HTML/HTML5
Справочник по всем элементам:https://developer.mozilla.org/ru/docs/Web/HTML/Element
Проверка браузерной поддержки:http://caniuse.com
HTML5 полифил (включая <main>) для IE6-9, Safari 4.x и FF 3.x:https://github.com/aFarkas/html5shiv