Все основные особенности html 5, новые теги, основные изменения, правильная семантическая разметка.


HTML 5 особенности синтаксиса и семантическая разметка

Последней актуальной версией языка HTML на момент написания этой статьи является 5 версия, а так как она последняя у нее есть свои отличия и улучшения. В этом уроке я хотел бы поделиться с вами основными синтаксическими особенностями и новыми тегами примененные в этом стандарте.

Я не спорю, HTML 5 уже давно появился, но далеко не все сайты в интернет свёрстаны именно на нем и при переходе на этот стандарт языка, невольно возникают вопросы, а что именно в нем нового и что хорошего мы от него получим, собственно, именно об этом я и расскажу далее.

Давайте для начала начнем с того, что изменилось и стало не актуальным и что улучшилось. В html 5 при присвоении значения атрибутам тега можно не использовать кавычки “” например:

<div class=wrapper> И <div class=”wrapper”>

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

Далее для тега подключения Javascript и CSS таблицы стилей больше не нужен атрибут type:

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

В html 5:

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

Будет работать, это намного удобнее и код получается короче и менее запутанным. Кстати, при проверке валидатором он обязательно будет ругаться если вы не уберете атрибут type.

проверке валидатором он обязательно будет ругаться если вы не уберете атрибут type. Больше не нужно закрывать не парные теги с помощью «/»
Было:

<img src=”images/img.jpg” alt=”” />

Стало:

<img src=”images/img.jpg” alt=””>

Снова синтаксис упростился, что в свою очередь ускорит написание кода.

Еще интересное нововведение атрибут для полей required он делает поле обязательным для заполнения, пример:

<input type=”text” name=”username” required>

Здесь мы уже избавляемся от лишнего JavaScript кода. Из этой же темы вы можете использовать autofocus.

На данный момент тег <b> устарел вместо его старайтесь использовать тег <strong>, он придает логику и усиливает значение текста. Так же тег <i> устарел вместо него используем <em>.

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

Тег <header>

Это парный закрывающийся логический тег, который сообщает браузеру что в нем находится шапка сайта. Как правило в нем находится логотип, название, навигация и т.д. Запрещается вкладывать этот тег в теги типа <footer> и <address>.

Тег <nav>

Это тоже парный закрывающийся логический тег, означающий навигацию на сайте. Все панели навигации, ссылки на разделы и страницы, необходимо вкладывать в него. Его можно на странице объявлять несколько раз.

Тэг <main>

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

Тэг <aside>

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

Тэг <section>

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

Тэг <article>

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

Тэг <address>

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

Тэг <footer>

Это подвал страницы, в нем как правило размещается контактная информация, блоки навигации и т.д. Тэг парный и требует закрытия.

Это основные теги, которые нужны для семантической разметки сайта, в первоисточнике конечно сложно понять, что и к чему, но я тут постарался описать все как можно понятнее. Для наглядности я нарисовал схему семантической разметки сайта на HTML 5. На самом деле в интернете очень много подобных схем, но для меня лично оптимальным вариантом является следующий:

Семантическая разметка сайта

А вот так будет выглядеть данная семантическая разметка на html:

<body>
    <header>
        <!-- logo -->
        <nav>
            <ul>    
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </nav>
    </header>

    <main>
        <div class="container">
            <article>
                <section></section>
                <section></section>
                <section></section>
            </article>
            <aside>
                <!-- Lorem ipsum dolor, sit amet consectetur adipisicing elit. -->
            </aside>
        </div>
    </main>

    <footer>
        <nav>
            <ul>    
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </nav>
        <address>
            <!-- Lorem ipsum dolor sit. -->
        </address>
    </footer>
</body>

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

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

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

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

И последний на сегодня тег

       <audio controls>
            <source src="audio/music.ogg" type="audio/ogg; codecs=vorbis">
            <source src="audio/music.mp3" type="audio/mpeg">
            Тег audio не поддерживается вашим браузером. 
            <a href="audio/music.mp3">Скачайте музыку</a>.
          </audio>

Тут так же все элементарно и просто, подключаем аудио файл, прописываем кодек.

Как вы могли заметить из вышеперечисленного, в html 5 много, что улучшили, добавили, и как известно ни что не стоит на месте. В этой статье я постарался рассказать вам о основных моментах, которые мне показались наиболее интересными и применимыми на практике, безусловно это не все что там есть, ну а если вам будет интересно, изучайте и все получится. Искренне надеюсь, что данная статья будет для вас полезна.

Дата: 2023-11-24
Автор: Алексей Мезенцев
Laravel от А до Я

Видеокурс по фреймворку Laravel

Профессиональный видеокурс с примером создания сайта на Laravel

Кликни сюда