Картинки по запросу вёрсткаСтандарт HTML5 постоянно развивается наравне с CSS3. Однако, не смотря на то, что HTML5 полностью (или почти) совместим с HTML 4.0 и HTML 4.1 (возможно даже с ещё более ранними версиями, а CSS3 поддерживает стили, разработанные ещё для CSS2, существует одна огромная проблема, которую W3C (World Wide Web Consotrium) пытается решить уже не первый год. Это разметка как таковая. То есть, раньше, во времена когда по земле бродили мамонты, люди жили в пещерах а Netscape и Microsoft воевали за доминирование на рынке браузеров, для логическоро распределния контента использовались блочные элементы с уникальным идентификатором «id», который от схожего «class» отличался тем, что может быть применён только к одному элементу на странице. Так, теперь подробнее о том, что такое логическое распределение. В общем:

<!DOCTYPE html>
<html>
<head>
<title>Мой сайт</title>
</head>
<body>
<img src = «http://https://www.google.ru/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png» />
<p>
Это логотип гугла! Я нашёл!
</p>

<img src = «https://yastatic.net/www/_/x/Q/xk8YidkhGjIGOrFm_dL5781YA.svg» />
<p>
А это логотип яндекса! Я его тоже нашёл!!!
</p>
</body>
</html>

Казалось бы, что не так? Но проблема в том, что страница представляет из себя просто поток всякого рода информации, как изображений, так и текста, они никак не распределены и придать общий стиль им достаточно проблематично и долго, а теперь, сделаем ровно то же самое с добавлением пары новых элементов:

<!DOCTYPE html>
<html>
<head>
<title>Мой сайт</title>
</head>
<body>
<div id = «google»>
<img src = «http://https://www.google.ru/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png» />
<p>
Это логотип гугла! Я нашёл!
</p>
</div>
<div id = «yandex>»
<img src = «https://yastatic.net/www/_/x/Q/xk8YidkhGjIGOrFm_dL5781YA.svg» />
<p>
А это логотип яндекса! Я его тоже нашёл!!!
</p>
</div>
</body>
</html>

Да, всё что мы сделали — распределили контент по контейнерам (условно) и теперь можем благодаря наследованию (родительские и дочерние элементы) задавать всем входящим в конкретный div элементам задавать нужные только дня них стили. Хорошо? Да! Зачем? Скажем так, мир меняется, меняетесь вы и ваши вкусы и когда-нибудь вы всё равно захотите переделать вашу странциу под современные нужды или веянья моды и благодаря контейнерам, предоставлющим вам логическое распределение контента на странице.

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

Эту проблему были призваны решить новые теги, появившиеся в HTML5. <section>, <footer>, <header>, <aside> и так далее. Не скажу, что это панацея от всех болезней вёрстки сайтов и веб-разработки, но большой шаг в этом направлении. В случае вёрстки собственноручно постарайтесь использовать эти новые теги, они облегчат чтение кода и вам и ботам индексации, что есть хорошо. Удачи!

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

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

очиститьОтправить