Содержание
Для некоторых задач необходимо максимально сократить объем HTML кода. HTML5 дает возможность некоторых «маневров» для этих целей.
Убираем type скриптов и стилей
Для определения скриптов и стилей можно не указвать type, т.к. по умолчанию подразумевается, что подключается/используется CSS/Javascript.
Было:
<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 или закрывающий </ul>;
- закрывающие теги </dt> и <dd>, если после идет следующий dt/dd. </dd> так же можно опустить, если он идет последним в родительском контейнере;
- закрывающий тег </p> может быть опущен, если элемент <p> следует сразу за <address>, <article>, <aside>, <blockquote>, <dir>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1-h6>, <header>, <hgroup>, <hr>, <menu>, <nav>, <ol>, <p>, <pre>, <section>, <table>, <ul>, или если больше нет содержания в родительском элементе и родительский элемент не <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>
Просто имя атрибута
Для атрибутов, которые могут принимать только одно значение (например disabled, checked) можно оставлять только имя атрибута. Было:
<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">
ПО материалам: Optional tags
