Четверг, 10.07.2025, 19:15

Интернет Мир

Форма входа
Поиск
Категории раздела
Мои статьи [8]
HTML5 [9]
JAVASCRIPT [0]
CSS3 [1]
Наш опрос
Что полезное Вы находите в Интернете? (Можно выбрать несколько вариантов ответов)

Всего ответов: 1
Статистика
Язык сайта
Меню сайта
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Главная » Статьи » HTML5

    Эффект экономии от использования HTML 5

    У меня в школе был весьма придирчивый (но все же очень хороший) учитель ма-тематики. Случалось, что он не приходил на занятия, и тогда весь класс облегчен-но вздыхал, поскольку те, кто подменял «Мистера Придирчивость», обычно ока-зывались покладистыми и добродушными людьми, которые ладили с нами без
    криков и постоянной нервотрепки. Они не настаивали на тишине, пока мы зани-мались делом, и не очень беспокоились насчет того, насколько аккуратно выгля -дели наши решения задач в тетрадях. Для них были важны лишь ответы. Если бы
    1
    Для русскоязычных сайтов подходящей будет кодировка windows-1251. — Примеч. ред.
    4.2. Как писать HTML5-страницы 119
    HTML5 был учителем математики, то его можно было представить вот таким до-бродушным временным заместителем постоянного учителя. Я поясню эту причуд-ливую аналогию…
    Если вы обратите внимание на то, как пишете код, то заметите, что в основном
    используете нижний регистр, заключаете значения атрибутов в кавычки и объяв -ляете type для сценариев и таблиц стилей. Например, вы могли бы указать ссылку
    на таблицу стилей так:
    <link href="CSS/main.css" rel="stylesheet" type="text/css" />
    HTML5 не требует такой детальности и позволяет указать все это следующим
    образом:
    <link href=CSS/main.css rel=stylesheet >
    Знаю, знаю. Мне это тоже кажется странным. Нет закрывающего тега/слеша,
    кавычек вокруг значений атрибутов и объявления type. Однако добродушному
    HTML5 все равно. Второй пример будет таким же валидным, как и первый.
    Подобный нестрогий синтаксис допускается во всем документе, а не только
    в отношении привязываемых CSS -файлов и JavaScript -элементов. Например, если
    хотите, можете указать <div> следующим образом:
    <div id=wrapper>
    Это абсолютно валидный HTML5-код. Аналогичным образом дело обстоит и со
    вставкой изображений:
    <img SRC=frontCarousel.png aLt=frontCarousel>
    Это тоже валидный HTML5-код. Никакого закрывающего тега/слеша, кавычек
    и комбинации символов в верхнем и нижнем регистрах. Вы даже можете пренебречь
    открывающим тегом <head>, и ваша страница все равно сможет пройти валидацию.
    Что обо всем этом «сказал» бы XHTML 1.0!
    Разумный подход к написанию HTML 5-разметки
    Несмотря на то что при работе с нашими адаптивными веб-страницами и дизайна -ми мы стремимся придерживаться принципа «сперва проектируем для мобильной
    платформы», я не могу перестать думать о создании наиболее оптимальной раз-метки (здесь я руководствовался стандартами разметки XHTML 1.0, которые под- XHTML 1.0, которые под- 1.0, которые под -разумевают XML-синтаксис). Да, мы можем сделать наши страницы чуть меньше
    по объему благодаря эффекту экономии, который достигается при использовании
    HTML5, однако, откровенно говоря, если потребуется, то я лучше уберу из дизай- 5, однако, откровенно говоря, если потребуется, то я лучше уберу из дизай -на то или иное изображение, чтобы добиться экономии!
    Мне кажется, что ради удобочитаемости кода все же стоит печатать дополни -тельные символы (слеши в конце и кавычки вокруг значений атрибутов). Поэтому
    при написании HTML5-документов я стремлюсь выбирать нечто среднее между
    старомодным стилем создания разметки (который обеспечивает валидную разметку
    с точки зрения HTML5, хотя валидаторы/инструменты для проверки соответствия
    120 Глава 4. HTML5 для адаптивных веб-дизайнов
    могут выдавать предупреждающие со общения) и эффектом экономии, который
    дает HTML5. Например, если говорить о ссылке на таблицу стилей CSS , которая
    приводилась чуть ранее, то для нее я бы написал следующий код:
    <link href="CSS/main.css" rel="stylesheet"/>
    Я сохранил закрывающий тег и кавычки, но исключил атрибут type. Здесь
    важно подчеркнуть, что вы можете сами определить, какой именно уровень вас
    устраивает. HTML5 не станет кричать на вас, демонстрировать вашу разметку
    перед всем классом и ставить вас в угол за то, что она не проходит валидацию.
    Приветствуем великий тег <a>
    Еще одна особенность HTML5, которая обеспечивает реальную экономию, состо- HTML5, которая обеспечивает реальную экономию, состо- 5, которая обеспечивает реальную экономию, состо-ит в том, что теперь мы наконец-то можем заключать в тег <a> множественные эле -менты. Раньше, если вы хотели, чтобы ваша разметка смогла пройти валидацию,
    приходилось заключать каждый элемент в его собственный тег <a> . Например,
    взгляните на следующий фрагмент кода:
    <h2><a href="index.html">The home page</a></h2>
    <p><a href="index.html">This paragraph also links to the home page</a></p>
    <a href="index.html"><img src="home-image.png" alt="home-slice" /></a>
    Однако мы можем убрать все индивидуальные теги <a> и взамен расположить
    группу элементов так, как показано в приведенном далее фрагменте кода:
    <a href="index.html">
    <h2>The home page</h2>
    <p>This paragraph also links to the home page</p>
    <img src="home-image.png" alt="home-slice" />
    </a>
    Однако следует иметь в виду, что, как вполне понятно, нельзя заключать один
    тег <a> в другой тег <a>, а также нельзя заключать <form> в тег <a>.
    Устаревшие HTML -функции
    Существуют атрибуты HTML, к использованию которых вы, возможно, привыкли,
    но теперь они считаются устаревшими в HTML5. Важно осознавать, что есть два
    «лагеря» устаревших параметров в HTML5: соответствующие и не соответству -ющие требованиям. Соответствующие требованиям элементы по-прежнему смогут
    работать, однако валидаторы будут генерировать предупреждающие сообщения.
    Вам следует избегать их применения на практике, если это возможно, однако не-беса не рухнут, если вы все же добавите их в разметку. В определенных браузерах
    параметры, не соответствующие требованиям, будут обработаны, однако их ис-пользование считается весьма скверной практикой и может иметь отрицательные
    последствия!
    Примером устаревшего, но соответствующего требованиям параметра является
    атрибут border, который указывается в теге <img>. Исторически он применялся для
    4.3. Новые семантические HTML5-элементы 121
    того, чтобы вокруг изображений не выводилась рамка синего цвета, если они вло -жены в ссылку. Например, взгляните на следующий код:
    <img src="frontCarousel.png" alt="frontCarousel" border="0" />
    Вместо этого для обеспечения аналогичного эффекта я рекомендую вам исполь-зовать CSS .
    Устаревших и не соответствующих требованиям параметров довольно много.
    Признаюсь, мне не доводилось использовать многие из них (а с некоторыми
    я даже ни разу не сталкивался!). Возможно, в вашем случае все сложится похожим
    образом. Однако если вам интересно, то вы сможете найти полный список уста -ревших и не соответствующих требованиям элементов и атрибутов по адресу
    http://dev.w3.org/html5/spec/Overview.html#non-conforming-features. К числу примеча -тельных не соответствующих требованиям элементов относятся strike , center , font ,
    acronym, frame и frameset.
    4.3. Новые семантические HTML 5-элементы
    В имеющемся у меня словаре семантике дается следующее определение: «раздел
    языкознания, изучающий содержание, информацию, передаваемые языковыми еди-ницами». В нашем случае семантика — это процесс придания значения нашей раз-метке. Почему это важно? Я рад, что вы спросили. Взгляните на структуру текущей
    разметки сайта And the winner isn’t…:
    <body>
    <div id="wrapper">
      <div id="header">
        <div id="logo"></div>
        <div id="navigation">
          <ul>
            <li><a href="#">Why?</a></li>
          </ul>
        </div>
      </div>
      <!-- содержимое -->
      <div id="content">
      </div>
      <!-- врезка -->
      <div id="sidebar">
      </div>
      <!-- нижний колонтитул -->
      <div id="footer">
      </div>
    </div>
    </body>
    Большинство специалистов, занимающихся написанием разметки, заметят
    общие соглашения по идентификационным именам используемых элемен-тов <div> — header, content , sidebar и т. д. Однако, взглянув на сам код, любой
    122 Глава 4. HTML5 для адаптивных веб-дизайнов
    пользовательский агент (браузер, экранный диктор, поисковый робот и др.) не смо -жет наверняка сказать, в чем заключается назначение каждого раздела <div>. HTML5
    стремится решить эту проблему с помощью новых семантических элементов.
    Элемент <section >
    Элемент <section> используется для определения универсального раздела доку-мента или приложения. Например, вы можете захотеть разбить на части имеющее-ся у вас содержимое; один раздел будет служить для контактных данных, другой —
    для новостных лент и т. д. Важно понимать, что элемент <section> не предназначен
    для использования в целях стилизации. Если вам потребуется заключить тот или
    иной элемент во что-то просто для стилизации, то продолжайте использовать <div>,
    как делали это раньше.
     СОВЕТ
    По адресу http://dev.w3.org/html5/spec/Overview.html#thesection-element вы сможете узнать,
    что говорится в спецификации HTML5 консорциума W3C об элементе <section>.
    Элемент <nav >
    Элемент <nav> используется для определения главных навигационных блоков —
    ссылок на другие страницы или части в рамках конкретной страницы. Этот элемент
    не предназначен для использования лишь в нижних колонтитулах (хотя может)
    и т. п., где группы ссылок на другие страницы являются обычным делом.
     СОВЕТ
    По адресу http://dev.w3.org/html5/spec/Overview.html#the-navelement вы сможете узнать, что
    говорится в спецификации HTML5 консорциума W3C об элементе <nav>.
    Элемент <article>
    Элемент <article> вместе с <section> могут легко привести к путанице. Мне, в част -ности, пришлось прочитать, а затем перечитать спецификации, касающиеся каж -дого из этих элементов, прежде чем до меня все дошло. Элемент <article> исполь-зуется для обособленной части содержимого. При структурировании страницы
    задайтесь вопросом: можно ли будет взять все содержимое целиком, которое вы
    намереваетесь поместить в тег <article> , и вставить его в другой сайт, чтобы при
    этом оно осталось абсолютно понятным? Здесь можно рассуждать и по-другому:
    будет ли содержимое, расположенное в <article>, в действительности представлять
    собой отдельную статью в RSS -ленте? Наглядным примером содержимого, которое
    следует заключать в элемент <article>, является блог-пост. Знайте, что при вложе -нии элементов <article> предполагается, что такие вложенные элементы будут
    связаны с внешним <article>.
    4.3. Новые семантические HTML5-элементы 123
     СОВЕТ
    По адресу http://dev.w3.org/html5/spec/Overview.html#thearticle-element вы сможете узнать,
    что говорится в спецификации HTML5 консорциума W3C об элементе <article>.
    Элемент <aside >
    Элемент <aside> используется для второстепенного по значению контента. На прак-тике я часто применяю его для добавления врезок (когда они включают соответ-ствующее содержимое). Он также считается подходящим для размещения цитат,
    рекламы и групп навигационных элементов (вроде списков ссылок на другие бло -ги и т. д.).
     СОВЕТ
    Что еще говорится в спецификации HTML5 консорциума W3C об элементе <aside>, вы смо -жете узнать по адресу http://dev.w3.org/html5/spec/Overview.html#theaside-element.
    Элемент <hgroup>
    Если у вас имеется несколько заголовков, слоганов и подзаголовков в <h1>, <h2>,
    <h3> и последующих тегах, то рассмотрите возможность заключить их в тег <hgroup> .
    Сделав это, вы скроете вторичные элементы от алгоритма определения иерархи -ческой структуры HTML5, в результате чего только первый заголовочный элемент
    в <hgroup> будет «участвовать» в иерархической структуре документа.
    Алгоритм определения иерархической структуры HTML5. HTML5 позволяет
    каждому контейнеру иметь свою отдельную иерархическую структуру. Это озна -чает, что больше не нужно постоянно думать о том, на каком уровне тега <header>
    вы находитесь. Например, в блоге я могу сделать так, чтобы для размещения на-званий моих постов использовался тег <h1>, как и для размещения названия само-го блога. В качестве примера взгляните на следующую структуру:
    <hgroup>
      <h1>Ben’s blog</h1>
      <h2>All about what I do</h2>
    </hgroup>
      <article>
        <header>
          <hgroup>
            <h1>A post about something</h1>
            <h2>Trust me this is a great read</h2>
            <h3>No, not really</h3>
            <p>See. Told you.</p>
          </hgroup>
        </header>
      </article>
    124 Глава 4. HTML5 для адаптивных веб-дизайнов
    Несмотря на наличие нескольких заголовков <h1> и <h2>, иерархическая струк -тура по-прежнему будет выглядеть так:
     Ben ’s blog
    y A post about something
    Вам не нужно отслеживать тег <header> , который требуется использовать. Вы мо -жете просто выбрать любой уровень тега <header> в каждом из разделов, и алгоритм
    определения иерархической структуры HTML5 выполнит соответствующее упо- HTML5 выполнит соответствующее упо- 5 выполнит соответствующее упо -рядочение.
    Можете проверить иерархическую структуру своих документов с помощью
    специальных инструментов, располагающихся по следующим адресам:
     http://gsnedders.html5.org/outliner/;
     http://hoyois.github.com/html5outliner/.
    На рис. 4.1 показана страница HTML5 Outliner.
    Рис.  4.1.  Страница HTML5 Outliner
    4.3. Новые семантические HTML5-элементы 125
     СОВЕТ
    Что еще говорится в спецификации HTML5 консорциума W3C об элементе <hgroup>, вы
    сможете узнать по адресу http://dev.w3.org/html5/spec/Overview.html#thehgroup-element.
    Элемент <header>
    Элемент <header> не задействуется при выполнении алгоритма определения иерар-хической структуры, поэтому не может использоваться для секционирования
    содержимого. Вместо этого его следует применять для введения в содержимое.
    На практике элемент <header> может использоваться в «шапке» верхнего колонти -тула сайта, а также для введения в другое содержимое, например то, что распола -гается в элементе <article>.
     СОВЕТ
    По адресу http://dev.w3.org/html5/spec/Overview.html#theheader-element вы сможете узнать,
    что говорится в спецификации HTML5 консорциума W3C об элементе <header>.
    Элемент <footer>
    Как и <header>, элемент <footer> не задействуется при выполнении алгоритма
    определения иерархической структуры, поэтому не может использоваться для сек-ционирования содержимого. Вместо этого его следует применять для размещения
    информации о разделе, в котором он располагается. Элемент <footer> может содер -жать, например, ссылки на другие документы или информацию об авторских пра -вах. Как и <header>, он может неоднократно задействоваться в рамках страницы,
    если потребуется. Скажем, его можно использовать для размещения нижнего ко-лонтитула блога, а также нижнего колонтитула в <article> блог-поста. Однако
    в спецификации HTML5 отмечается, что контактные данные автора того или ино- HTML5 отмечается, что контактные данные автора того или ино- 5 отмечается, что контактные данные автора того или ино -го блог-поста следует заключать в элемент <address>.
     СОВЕТ
    По адресу http://dev.w3.org/html5/spec/Overview.html#thefooter-element вы сможете узнать,
    что говорится в спецификации HTML5 консорциума W3C об элементе <footer>.
    Элемент <address >
    Элемент <address> предназначен конкретно для размещения контактных данных
    для своего ближайшего предшествующего элемента <article> или <body>. Чтобы
    не запутаться, помните, что элемент <address> не используется для размещения поч -товых адресов и т. п., если только они в действительности не являются контактными
    126 Глава 4. HTML5 для адаптивных веб-дизайнов
    адресами, которые относятся к соответствующему содержимому. Вместо этого
    почтовые адреса и прочие произвольные контактные данные следует заключать
    в старые добрые теги <p>.
     СОВЕТ
    По адресу http://dev.w3.org/html5/spec/Overview.html#theaddress-element вы сможете узнать,
    что говорится в спецификации HTML5 консорциума W3C об элементе <address>.

    Категория: HTML5 | Добавил: evglenkor (05.05.2014)
    Просмотров: 535 | Рейтинг: 0.0/0
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]