Главная » Файлы » Статьи для вебмастера » Статьи для вебмастера

Как HTML5 упрощает нам вёрстку
24.06.14, 16:24:35



Данная статья позволит полноценно использовать потенциал HTML5 и писать более компактный html код

Убираем type скриптов и стилей
Было:
Код
<link type="text/css" rel="stylesheet" href="test.css" />
<style type="text/css">
...
</style>

<script type="text/javascript">
...
</script>
Теперь можно:
Код
<link rel="stylesheet" href="test.css" />
<style>
...
</style>

<script>
...
</script>


Не закрываем одиночные тегиБыло:
Код
<link />
<img src="path" />
<input />
Стало:
Код
<link>
<img src="path">
<input>


Удаляем необязательные теги
Код
Тег <html> может быть опущен, если первый тег после не го не является комментарием и перед закрывающим тегом так же нет комментария;
  Тег <head> может быть опущен, если после него сразу идет тег и перед закрывающим нет комментария или пробела;
  Тег <body> может быть опущен, если псле него сразу идет тег (кроме style и script) и перед закрывающим нет комментария;
  Закрывающий тег </li>, если за ним идет следующий li или закрывающий [/list];
  Закрывающие теги </dt> и <dd>, если после идет следующий dt/dd. </dd> так же можно опустить, если он идет последним в родительском контейнере;
  Закрывающий тег </p> может быть опущен, если элемент  

  следует сразу за <address>, <article>, <aside>, <blockquote>, <dir>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1-h6>, <header>, <hgroup>, <hr>, <menu>, <nav>, <ol>,  

, <pre>, <section>, <table>, [list], или если больше нет содержания в родительском элементе и родительский элемент не <a>;
  Тег </rt> может быть опущен, если если элемент rt следует сразу за еще одним rt или rp элементом, или, если нет больше содержания в родительском элементе;
  Тег </rp> может быть опущен, если элемент rp следует сразу за еще одним rt или rp элементом, или, если нет больше содержания в родительском элементе;
  Тег </optigroup> может быть опущен, если элемент optigroup следует сразу за еще одним optigroup, или, если нет больше содержания в родительском элементе;
  Тег </option> может быть опущен, если элемент option следует сразу за еще одним option, или если он идет сразу после optigroup, или, если нет больше содержания в родительском элементе;
  Тег </colgroup> может быть опущен, если если первое, что внутри элемента colgroup является элементом col, и если перед элементом непосредственно не предшествует другой элемент colgroup, закрывающий тег которого был опущен;
  Тег </thead> может быть опущен, если элемент thead следует сразу за tbody или tfoot;
  Тег <tbody> может быть опущен, если первое, что внутри tbody является элементом tr, и если перед элементом непосредственно не предшествует другой tbody, thead, или tfoot, закрывающий тег которого был опущен. (Он не может быть опущен, если элемент является пустым;
  Тег </tbody> может быть опущен, если после элемента tbody сразу следует tbody или tfoot, или, если нет больше содержания в родительском элементе;
  Тег </tfoot> может быть опущен, если элемент tfoot следует сразу же за эелментом tbody, или, если нет больше содержания в родительском элементе;
  Тег </tr> может быть опущен, если элемент tr следует сразу же за еще одним элементом tr, или, если нет больше содержания в родительском элементе;
  Тег </td> может быть опущен, если элемент td следует сразу же за еще одним элементом td или th, или, если нет больше содержания в родительском элементе;
  Тег </th> может быть опущен, если элемент th следует сразу же за td или th, или, если больше нет содержания в родительском элементе
Т.е. например можно писать вот так:
Код
<ul class="pagination">
<li class="active">1
<li><a href="#">2</a>
<li><a href="#">3</a>
<li><a href="#">4</a>
</ul>


Просто имя атрибутаБыло:
Код
<input value="" disabled="disabled" />
Стало:
Код
<input value="" disabled>


Значения атрибутов без кавычекБыло:
Код
<img src="path-to-img/img.png" alt="картинка" width="100" height="100" />
Стало:
Код
<img src=path-to-img/img.png alt=картинка width=100 height=100>
Заметка

С кавычками нужно быть осторожным: если значение атрибута содержит пробелы, тогда код прочитается с ошибками как браузерами, так и валидатором. Например, в таких случаях кавычки обязательны:
Код
<img src=path-to-img/img.png alt="тестовая картинка" width=100 height=100 >
<input value="значение по умолчанию">
<div class="class1 class2">


Надеюсь, данная статья упростит вам работу с html кодами smile

Оригинальная статья находится ЗДЕСЬ
Категория: Статьи для вебмастера | Добавил: Apocalypse | Теги: HTML5, нам, Как, вёрстку, упрощает
Просмотров: 383 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: