Понимание HTML5 и CSS3 для веб-дизайна

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

HTML5 и CSS3 дает веб-разработчику широкие инструменты для самовыражения, вот основной обзор того, что они собой представляют, чтобы вы могли создавать лучшие веб-сайты.

Навигационный тег nav

Это часто упускаемая из виду область HTML5. Короче говоря, вы всегда должны пытаться обернуть навигационные ссылки в теги <nav>. Это важно, если вы рассматриваете перспективы SEO оптимизации для вашего сайта.

<nav>
 <ul>
 <li><a href="index.html">Главная</a></li>
 <li><a href="contacts.html">Контакты</a></li>
 </ul>
</nav>

SEO (поисковая оптимизация) - это обеспечение того, чтобы популярные поисковые системы, как Яндекс и  Google, забрали ваш сайт в свой список. Чем выше вы появляетесь в этом списке, тем больше онлайн-трафика вы, вероятно, получите и тем больше бизнеса вы можете ожидать.

Ссылки в вашей навигации, вероятно, будут хорошим показателем для сканеров, а использование тега Nav означает, что вы явно говорите: “Это самые важные ссылки на сайте” и помогаете ботам понять, о чем ваш сайт. Это не значит, что вы будете наказаны за то, что не используете навигационный тег, но вы должны приложить все усилия, чтобы помочь поисковым роботам любым возможным способом.

Эти теги довольно просты, но служат важной цели. Верхние и нижние колонтитулы, <header> и <footer> соответственно, хорошо работают с SEO. Теги отделяют элементы верхнего и нижнего колонтитулов от основного контента.

<header>
 <h1>Заголовок документа</h1>
</header>

<article>
 <header>
 <h1>Заголовок документа</h1>
 </header>
 <p>Используйте тег header , чтобы отметить заголовок статьи</p>
</article>

<footer>
 <p>Автор: Иван Иванов</p>
</footer>

Верхний и нижний колонтитулы отличаются от простого тега <div>, поскольку, идентифицируются как нечто другое и поисковые системы могут отличать информацию внутри этих тегов от другого контента и соответственно ранжировать ваш сайт.

Video и audio

Мультимедиа становится все более популярным среди пользователей, и прошли те дни, когда посетители могут потреблять информацию только в виде текста. Теги для видео  <video> и аудио <audio> просты в реализации, а HTML5 позволяет полностью настраивать JavaScript и различные кодеки - так что вы можете легко получить контент, работающий так, как вы хотите.

 <video width="400" height="300" controls="controls" poster="video/duel.jpg">
     <source src="video/video.ogv" type='video/ogg; codecs="theora, vorbis"'>
     <source src="video/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
     <source src="video/video.webm" type='video/webm; codecs="vp8, vorbis"'>
     Тег video не поддерживается вашим браузером. 
     <a href="video/video.mp4">Скачайте видео</a>.
 </video>

Предоставление вашим посетителям выбора в том, как они потребляют ваш контент, важно, если вы хотите охватить все различные типы потребителей. Для тех, кто любит хорошую статью, есть тег <article>.

Разработчики могут использовать тег <article> для разметки отдельных частей контента, таких как сообщение в блоге, уменьшая необходимость в бесконечных тегах Div. Дальнейшее разделение основного текста сайта после заголовка и перед нижним колонтитулом с помощью тега <article> означает более четкий код и потенциальную оптимизацию для поисковых систем.

Тег <article>, вероятно, является одним из самых полезных тегов с точки зрения SEO. Google любит контент, и, заключая ваш текст в тег <article>, вы говорите Google, что у вас есть контент на сайте, что поможет вашему сайту занять более высокое место. Также может случиться так, что ключевые слова/якорные тексты в теге <article> будут иметь больший вес, чем ключевые слова вне этого тега. Вы также можете помочь SEO, указав атрибуты заголовка статьи <title>, по той же причине.

 <article title="Статья об НЛО"> 
        <h1>Заголовок статьи</h1>
        <p>История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.</p>
        <article title="Комментарии к статье об НЛО">
            <p>Это первый комментарий</p>
        </article>
 </article>

Canvas

Теги <canvas>, используемые для вставки различной графики, являются более модернизированной функцией HTML 5. Тег позволяет настраивать графику, изображения или диаграммы, чтобы сделать дизайн веб-сайта более четким, а ваш код менее загроможденным.

 <canvas id="smile" width="200" height="200"> 
      <p>Ваш браузер не поддерживает рисование.</p>
</canvas> 

figure и figcaption

Эти два тега идут рука об руку и делают длительный процесс намного короче. Используя тег <figure>, вы можете изолировать графику или изображение. Тег <figcaption> затем может использоваться для предоставления текста субтитров для конкретного рисунка. Это значительно облегчает задачу объединения соответствующего текста с изображением, так как теги <figcaption> помогают определить, где должен быть заголовок (очевидно, что рядом с изображением).

 <figure> 
    <img src="images/thumb1.jpg" alt="" />
    <figcaption>Софийский собор</figcaption> 
</figure> 

Вы также можете использовать эти теги в тех же целях, что и верхние и нижние колонтитулы, статьи и разделы.

Подробные сведения - details

Если вы не слышали об этом теге, это потому, что он всё ещё не основная функция, но, тем не менее, становится все более распространенным. Короче говоря, <details> позволяет легко включать выпадающий текст.

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

Селекторы и атрибуты псевдоклассов

Селекторы псевдоклассов могут использоваться для добавления дополнительной информации об объектах к тегам и подразделениям. Они легко узнаваемы, поскольку им предшествует двоеточие. Например, Hover - это простой селектор, который может добавлять отображаемый текст при наведении курсора мыши на данный тег.

В CSS3 вы можете определить элемент :root в документе. В HTML это всегда было <html>, но теперь эта функция более широко представлена в CSS3. Дополнительные селекторы классов в CSS3 позволяют лучше контролировать соответствие между братьями и сестрами. Это сочетается с большей гибкостью, которая обеспечивает большие функции между связанными элементами. Это делает весь процесс более интуитивным и взаимосвязанным, что делает общий результат гораздо более впечатляющим.

:root {
  background-color: #ff8800
}

Точно так же новые селекторы атрибутов дают вам больший контроль над различными конкретными битами ваших элементов. Вы можете проверить совпадения с другими элементами или назначить атрибуты для создания этого эффекта. Для выбора атрибутов используется следующий формат: element[att^=val].

Таким образом, реальный пример может выглядеть так:

<p title="SEO контент">
    Контент страницы
</p>

p[title^="SEO"] 
{
   color: #ff6699
}

Этот селектор находит любые теги абзацев <p> с атрибутом <title>, который начинается с ”SEO” и изменяет цвет текста.

Селекторы атрибутов соответствия подстрок

Коснёмся силы CSS3 с помощью селектора атрибутов соответствия подстрок, начинающегося с “^”. На самом деле вы можете использовать селектор подстрок “$” и селектор подстрок “*”, чтобы еще больше сузить выбор атрибутов для стиля.

p[title$="SEO"] 
{
   color: #ff6699
}