Xiper

Сокращаем HTML5 код

Автор: Евгений Рыжков Дата публикации:

Для некоторых задач необходимо максимально сократить объем 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