Семантическая разметка

Листинг 1.2. CSS-файл для страницы HTML5

body {
   background-color:#CCCCCC;
   font-family:Geneva,Arial,Helvet ica,sans-serif;
   margin: Opx auto;
   max-width:90Opx;
   border:solid;
   border-color:#FFFFFF;
   }
   header {
   background-color: #F47D31;
   display:block;
   color:#FFFFFF;
   text-align:center;
   }
   header h2 {
   margin: Opx;
   }
   hi {
   font-size: 72px;
   margin: Opx;
   }
   h2 {
   font-size: 24px;
   margin: Opx;
   text-align:center;
   color: #F4 7D31;
   }
   h3 {
   font-size: 18px;
   margin: Opx;
   text-align:center;
   color: #F47D31;
   }
   h4 {
   color: #F47D31;
   background-color: #fff;
   -webkit-box-shadow: 2px 2px 20px #888;
   -webkit-transform: rotate(-45deg);
   -moz-box-shadow: 2px 2px 20px #888;
   -moz-transform: rotate(-45deg);
   position: absolute;
   padding: Opx 150px;
   top: 50px;
   left: -120px;
   text-align:center;
   nav {
   display:block;
   width:25%;
   float:left;
   }
   nav a:link, nav a:visited {
   display: block;
   border-bottom: 3px solid #fff;
   padding: 10px;
   text-decoration: none;
   font-weight: bold;
   margin: 5px;
   }
   nav a:hover {
   color: white;
   background-color: #F47D31;
   }
   nav h3 {
   margin: 15px;
   color: white;
 }
 #container {
   background-color: #888;
   }
   section {
   display:block;
   width:50%;
   float:left;
   }
   article {
   background-color: #eee;
   display:block;
   margin: 10px;
   padding: lOpx;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: lOpx;
   }
   article header {
   -webkit-border-radius: lOpx;
   -moz-border-radius: lOpx;
   border-radius: lOpx;
   padding: 5px;
   article footer {
   -webkit-border-radius: lOpx;
   -moz-border-radius: lOpx;
   border-radius: lOpx;
   padding: 5px;
   }
   article hi {
   font-size: 18px;
   }
   aside {
   display:block;
   width:25%;
   float:left;
   }
   aside h3 {
   margin: 15px;
   color: white;
   }
   aside p {
   margin: 15px;
   color: white;
   font-weight: bold;
   font-style: italic;
 }
footer {
 clear: both;
 display: block;
 background-color: #F47D31;
 color:#FFFFFF;
 text-align:center;
 padding: 15px;
 }
 footer h2 {
 font-size: 14px;
 color: white;
 }
 /* links */
 a {
 color: #F47D31;
 )
 a:hover {
 text-decoration: underline;
 }

На рис. 1.2 показан пример страницы из листинга 1.1, к которой применены стили CSS (и некоторые стили CSS3). Имейте, однако, в виду, что такого понятия, как "типичная страница HTML5", не существует. На самом деле страница может быть любой, и новые дескрипторы используются в данном примере главным образом в иллюстративных целях.

Наконец, заметим, что у вас могло сложиться ложное впечатление, будто браузеры визуализируют содержимое так, как если бы они действительно понимали семантический смысл новых элементов. Истина же состоит в том. что если бы мы назвали эти элементы как-то иначе, например f оо и bar, но применили к ним те же стили, то они были бы визуализированы точно так же (хотя, безусловно, при этом были бы потеряны все преимущества в плане оптимизации работы поисковых систем). Единственным исключением является браузер Internet Explorer, который требует, чтобы элементы были частью DOM. Поэтому, если вы хотите увидеть эти элементы в Internet Explorer, их следует программным путем вставить в DOM и отобразить в виде блочных элементов.