Лого www.SiteHere.ru

Функции, советы и методы HTML5

9 функций, советов и методов HTML5, которые Вы должны знать

Технология HTML5 развивается быстро — очень быстро! И для того чтобы не отставать в развитии, необходимо знать обо всех изменениях в данной технологии. Так что, если вы чувствуете что данная технология вам интересна и вы хотите повышать в ней свои навыки, обязательно прочтите данную статью.

Методы HTML5

1. Новая запись DOCTYPE

Раньше мы пользовались большой, громоздкой записью для определения DOCTYPE:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5 предоставляет нам возможность не писать все подробности, а объявить DOCTYPE следующим образом:

  <!DOCTYPE html>

На самом деле данный блок не является необходимым в HTML. Тем не менее, он необходим для старых браузеров, которые требуют указывать DOCTYPE. Браузеры, которые не понимают HTML5 будут показывать страницу в стандартном режиме. Так что, не волнуйтесь, переходить на HTML5.

2. Изображения и подписи к ним

Рассмотрим следующую разметку для изображений:

  <img src="images/love.png" alt="Прикольный смайл" />  
  <p>Прикольный смайл</p>

Раньше было тяжело сгрупировать изображение и подпись к нему.Там, к сожалению, нет легкого или семантического способа связать заголовок, завернутый в тег абзаца, с изображением самого элемента. HTML5 решает данную проблему, с введением <figure> элемента. В сочетании с <figcaption> элементом, теперь мы можем связать подписи с изображениями.

  <figure>  
      <img src="path/to/image" alt="About image" />  
      <figcaption>  
          <p>This is an image of something interesting. </p>  
      </figcaption>  
  </figure>

3. <small> переопределен

Раньше тег <small> использовался для уменьшения текста, но был редко использован веб-разработчиками, но всё таки не был удален разработчиками HTML5. Теперь данный тег используют для обозначения «мелкого текста» — то есть текста, который не привлекает сильного внимания. Например, предупреждение о запрещении копирования материала, помещенное в самом низу сайта, наподобие следующего:

  <small>Запрещено копировать материал с данного сайта!
         Данный материал защищен авторским правом.</small>

4. Отсутствие типов для тегов <script> и <link>

Раньше необходимо писать типы для тегов <script> и <link>, например:

  <link rel="stylesheet" href="style.css" type="text/css" />  
  <script type="text/javascript" src="script.js"></script>

В HTML5 больше нет необходимости писать данный атрибут:

  <link rel="stylesheet" href="style.css" />  
  <script src="script.js"></script>

5. Закрывать или не закрывать теги

Вот в чем вопрос. Помните, что HTML5 это не XHTML. Здесь необязательно писать значения атрибутов в кавычках. Вам не нужно закрывать некоторые теги. Если вас устраивает данный стиль написания, то можете применять его. Лично для меня теги должны закрываться, а значения атрибутов должны находиться в кавычках.

  <p class=content id=someText>Пример текста

Здесь важно лишь ваше мнение, и то как вам приятнее писать и видеть код. Если желаете более структурированный код, тогда пишите с закрывающими тегами.

6. Сделайте свой контент редактируемым

Редактируемый контент HTML5

Новые браузеры имеют классный новый атрибут, который может быть применен к элементам, называется contenteditable. Как следует из названия, это позволяет пользователю редактировать любой текст, содержащийся в элементе, в том числе и потомках.

  <ul contenteditable="true">  
      <li>Сделайте свой сайт.</li>  
      <li>Создание сайтов - это легко!</li>
      <li>У вас всё получится</li>  
  </ul>

7. Проверка поля E-mail

В HTML5 при использовании поля для ввода типа e-mail адреса, чтобы только с помощью браузера проверить корректность ввода адреса электронной почты. И это без всяких проверок с помощью javascript-ов. Но пока что мы не можем использовать данную функцию в наших сайтах по понятным причинам. Ведь в старых браузерах, которые не понимают HTML5, данные поля не будут проверяться.

  <form action="" method="get">  
      <label for="email">E-mail:</label>  
      <input id="email" name="email" type="email" />  
      <button type="submit">Отправить</button>  
  </form>

Проверка e-mail поля в HTML5

8. Заполнители

Раньше нам необходимо было использовать JavaScript для создания заполнителей для текстовых полей. Конечно, можно установить значение по умолчанию и данное значение будет удалено, как только пользователь поставит курсор в данное поле. Заполнитель решает эту проблему иначе и как всегда более просто:

  <input name="email" type="email" placeholder="test@gmail.com" />

Заполнитель в HTML5

9. Блоки HEADER и FOOTER

Ушли те времена:

  <div id="header">  
    ...  
  </div>  
 
  <div id="footer">  
    ...  
  </div>

В HTML5 данные блоки с атрибутами могут быть заменены соответствующими тегами:

  <header>  
    ...  
  </header>  
 
  <footer>  
    ...  
  </footer>

Постарайтесь не смешивать эти элементы с «заголовком» и «подвалом» вашего сайта. Они просто являются просто контейнерами.

Здесь мы закончим рассматривать методы HTML5, думаю вы даже на этом маленьком примере функций HTML5 ощутили удобство пользования данной технологией, а также то, с какой скоростью она развивается.

Успехов!

Функции, советы и методы HTML5 5.00/5 (100.00%) 4 голос(ов)

Понравилась статья - расскажи друзьям! :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *