13.03.2013, 19:58

HTML5 - Сокращение кода



Для некоторых задач необходимо максимально сократить объем HTML кода. HTML5 дает возможность некоторых "маневров" для этих целей.
Убираем 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 или закрывающий ;
Закрывающие теги </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>,
    , или если больше нет содержания в родительском элементе и родительский элемент не <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, CSS, JS, JQ | Добавил: sold93 (13.03.2013) Просмотров: 2824 | Рейтинг: 5.0/6
Теги: HTML5, сокращение кода
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]