Различия в HTML4 и HTML5

Различия в HTML4 и HTML5

Мы немного поговорим о новых тегах в HTML5, их отличиях от тегов HTML4, их значении, преимуществах и недостатках их использования..

Во-первых, давайте проясним, что в этом руководстве мы действительно поговорим о HTML5, а не обо всем новом, что с ним связано. Начнем с того факта, что новейшие API-интерфейсы JS, предлагаемые современными браузерами, а также CSS3, представляют собой отдельные технологии, которые по-прежнему широко используются под общим знаменателем со всеми новыми функциями, предлагаемыми развивающимися стандартами Интернета. Именно это определение — развивающиеся стандарты Интернета — является наиболее правильным. Однако, хотя многие настаивают на технической «правильности» выступлений и т. Д., Я лично также готов говорить об общем знаменателе HTML5. Он короче и больше подходит для широкой публики, чем JS, CSS и «развивающиеся интернет-стандарты»..

Вернемся к настоящему HTML5 и новым тегам, которые в нем предлагаются. Чтобы получить полный список, всегда лучше обращаться к Google, как я только что сделал. Есть справочники и не обязательно все запоминать — всегда где-то написано. Вы наверняка легко найдете список новых тегов в HTML5, представленный на w3schools.com. Мы не будем здесь рассматривать их все. Только те, которые получили наибольшее внимание с момента их предложения о включении в новый стандарт..

Новые контейнеры

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

заголовок

header предназначен для замены div id = "header", который можно найти на любом сайте. Даже если у нас нет точного DIV с идентификатором со значением HEADER, у нас все равно будет какой-то контейнер заголовков на нашем сайте. Идея состоит в том, что этот тег должен облегчить поисковым системам обработку информации на нашем сайте. Это сделано для того, чтобы они могли более легко и правильно представить информацию людям, которые их используют..

нижний колонтитул

нижний колонтитул очень похож на верхний колонтитул, это примерно конец страницы.

раздел

Идея раздела состоит в том, чтобы удалить все ненужные div, заполняющие сайты. Вероятно, половина тегов на сайте — это DIV.!

Читать также:  Глубокие ссылки Часть 1

статья

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

в стороне

в стороне — один из самых запутанных тегов. Судя по названию, мы можем подумать, что он предназначен для боковых панелей. Даже в одном из первых уроков по выбору нового тега я прочитал, что он предназначен именно для этого. Да, однако, впоследствии стали появляться объяснения того, как фактическиAside следует использовать для дополнительных и менее важных элементов. Те, которые могут привносить в статью дополнительную информацию, но сами по себе не имеют прямого отношения к содержанию и могут быть проигнорированы. Наверняка вы читали статьи в газетах, вдоль которых есть небольшие разделы с фотографиями или интересной информацией. Однако сами по себе эти разделы не имеют ничего общего с фактическим содержанием. Его также можно прочитать самостоятельно. Это идея кислоты.

навигация

nav — последний тег в этой группе, который мы рассмотрим. Он предназначен для навигации по сайту. Может быть первичным или вторичным.

Некоторые другие теги HTML5

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

метр

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

  • круговая диаграмма
  • или просто тюбик, наполненный до определенного уровня
  • или любой визуально приятный способ представления контента
Читать также:  Заголовки закрытых и защищенных страниц в WordPress

прогресс

прогресс — если вы спросите меня — нет разницы от назначения счетчика.

отметка

mark — это просто тег, обернутый вокруг нескольких слов с идеей, что они затем представлены в CSS по-другому. У нас есть сильные и слабые стороны со времен более старых версий HTML. С их помощью мы можем выразить этот другой формат. Более того, эти теги также имеют связанный с ними текстовый формат. При необходимости мы можем изменить это через CSS. Однако сам по себе тег stgrong говорит о том, что у нас будет жирный текст, а em — текст курсивом. Если у нас не хватает тегов — у нас есть span. Он делает именно то, что отмечает. Отмечает фрагмент текста без применения специальных стилей. Вместо этого мы разрешаем CSS добавлять любые стили, которые захотим..

время

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

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

Нужны ли нам новые теги?

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

Вернемся к первой группе — header, footer, section, article, aside и nav. Первые два вместе со статьей представляют хорошую семантику. Основные недостатки новых тегов — это фактор, о котором я расскажу позже. Однако мне кажется нелепым то, как описан этот раздел. Идея состоит в том, чтобы заменить частое использование тегов div. Хорошо — представьте себе страницу, где каждый div уже является разделом. Хуже всего то, что я такое видел. И что толку — опять у нас есть страница, заполненная повторяющимися тегами. Функция снова состоит в том, чтобы быть просто контейнерами. раздел, однако, имеет один существенный недостаток по сравнению с div. Он написан более чем вдвое большим количеством букв. Это затрудняет чтение кода..

Кроме того, мы сказали, что это просто недоношенный ребенок в замешательстве. Это, безусловно, будет неправильно использовано. По этой причине они не будут считаться менее значимыми. Соответственно — пропадает весь смысл тега.

Читать также:  Запросы AJAX

Навигация звучит неплохо, но остается лишь контейнером для ссылок. Однако те, у кого есть опыт, знают, что просто ссылки в контейнере представляют собой проблему. Поэтому для навигации лучше использовать неупорядоченный список (ul). Что ж, давайте просто заключим список в тег навигации. Что мы получаем — у нас целая бирка больше! Если бы у нас были новые теги в дополнение к nav, элементы в нем имели бы смысл. Но опять же, идея была бы хромой, потому что у нас уже есть возможность для такой структуры. И от HTML5 мы хотели бы, чтобы новые функции, а не только новые теги, делали то же самое..

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

аудио, видео, холст

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

Для незнакомых я объясню, в чем функция холста. Дословно переводится как «холст» (для живописи). Это позволяет нам добавлять графическую информацию, созданную программно. В целом мы можем:

  • рисуем графики данных, которые представлены на странице
  • объединяем существующие фото
  • изменить цвет картинок и отобразить их на холсте
  • мы создаем «зеркало», когда тег холста находится рядом с изображением

Последнее не происходит само по себе. Для достижения этого эффекта вам нужны серьезные знания в области программирования..

Эти три тега лично для меня самые ценные в HTML5. Они действительно дают новые возможности.

Недостаток — в старых браузерах нет возможности добавить возможности этих тегов. Мы не сможем полностью использовать их функциональные возможности, если нам придется поддерживать старые браузеры..

Мы могли бы использовать Flash Player или другие функции замены. Например, Internet Explorer 7 и 8 не поддерживают Canvas, но поддерживают VML. С соответствующими библиотеками JavaScript мы можем перенести в них функциональность холста..

По этой теме можно сказать еще кое-что, но оставим это для второй части урока..

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?