Не работают теги html5

Почему не работает HTML5?

Последнее время я стал с завидной регулярностью получать вопросы, сводящиеся к одному: «Почему не работает HTML5?«. Помимо этого, я стал видеть большое количество заказчиков вёрстки, которые требуют, чтобы всё было написано на HTML5. И чтобы было поменьше таких вопросов и не было таких безграмотных заказчиков (которым всегда радуются всякие мошенники на фрилансе, понимая, что заказчик не смыслит ничего), я и решил ответить на вопрос, почему не работает HTML5.

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

Из вышесказанного следует, что HTML5 не работает, поскольку он ещё просто не поддерживается браузерами. Но идёт постепенное внедрение данной технологии, и уже сейчас есть достаточно много тегов, которые уже можно использовать. Вы можете проверить, насколько Ваш браузер «продвинут» в HTML5, здесь: тестирование браузера на поддержку HTML5. Мой браузер (Firefox 15.0.1) набрал 346 очков, что, конечно, очень далеко до полной поддержки. Причём у меня стоит самая свежая версия Firefox. Думаю, у других современных браузеров ситуация не лучше.

Также не надо забывать, что даже, когда через пару лет, все современные браузеры будут полностью поддерживать HTML5, останется ещё очень большая доля людей, которые будут пользоваться старыми браузерами. Что делать с ними? Чтобы уменьшить количество пострадавших, об HTML5 придётся подзабыть ещё на пару лет. И уже только потом можно будет делать вёрстку с использованием этой технологии.

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

Очень надеюсь, что количество жертв мошенников на фрилансе станет меньше (уж больно у многих написано в портфолио «Верстаю на чистом HTML5«, что является ложью).

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

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

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 16 ):

Могу ли я верстать на HTML 5 с 437 (Google Chrome) баллами просто для тренировки?

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

да где-то уже написан конверт с HTML5 на 4.

448 баллов у меня!

Ой Пашка мы все тут так рады за способнобности браузера которым пользуешся))))

Привет всем.Я могу ответить на твой вопрос Виталий,у Пашки Google Chrome 24.

(Firefox 18.0.2) набрал 393 (+10bonus) IE 8.0.6 набрал 42 points (((

IE 10 набрал 320 очков

463 Google Chrome

Михаил,а зачем вы пишите про HTML, если большинство нормальных людей пишут на XHTML

XHTML — это скорее doctype, а не язык для написания сайтов. А сайты пишутся на HTML, только с соблюдением стандартов XHTML.

463 на хроме, на Maxthon 4.0 перейти что-ли 🙂

А у меня 500 и 15 дополнительных баллов

А у меня 474 балла у браузера, у меня Opera 18.

А самый прогрессивный оказался китаец «Maxthon 4» набрав 513.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник

HTML 5 в Internet Explorer

Вкратце: как заставить новые теги из HTML 5 работать в Internet Explorer.

Любой веб-разработчик смотря на HTML 5 плачет от счастья, которое наконец-то пришло в наш дом. Для большинства функций (такие как WebGL, многопоточность и веб-сокеты) придётся ждать поддержки от браузеров (а в самых правильных эти возможности уже есть), но новые удобные теги мы можем использовать уже сейчас.

Однако Internet Explorer (даже последней, 8-ой версии) и тут сумел споткнуться — новые теги вне HTML 4 он просто не замечает — на них нельзя повесить стили.

В IE проблем даже две — отдельно нужно включать поддержку HTML 5 тегов в обычном документе, и отдельно в содержимом, которое добавляется динамически (например, через AJAX).

Преимущества

Новые теги HTML 5

IE как проблема

Сложно сказать, является ли это проблемой или особенностью Internet Explorer, но теги, которые он не знает, он просто не замечает. Конечно, можно сказать, что они нарушают стандарт HTML 4, который поддерживается в IE, но тем не менее, проблемы есть проблемы — даже в самой последней версии IE на новые теги из HTML 5 просто так не повесить стили CSS. В IE 9 это исправят, но у него пока не вышла даже бета-версия.

И как всегда под IE приходиться писать с помощью хаков :). Если создать элемент в JavaScript document.createElement(‘article’) , то IE начинает видеть новый тег.

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

Решение

Код включения HTML 5 тегов в IE уже написан и выложен, так что, чтобы не изобретая велосипед, вставляем в (перед любыми новыми тегами):

Большинство HTML 5 сайтов использует скрипт по этому URL, так что велика вероятность, что он уже окажется в кеше браузера.

Решение innerHTML уже оформлено в виде компактного JS-скрипта. Скачайте его, подключите к своему сайту, и весь добавляемый HTML оборачивайте с функцию innerShiv(html5) .

Пример для jQuery:
$(‘#example’).append(innerShiv(» jQuery «))

Пример на чистом JS:
var s = document.createElement(‘section’);
s.appendChild(innerShiv(» &ltPlain JS «));
document.getElementById(‘example’).appendChild(s);

Для записи $(html5).appendTo(‘#example’) , нужно в innerShiv вторым аргументов передавать false , чтобы она возвращала результат в нужном для jQuery формате:
$(innerShiv(html5, false)).appendTo(‘#example’)

Но я просто сделал себе функцию $5 , заодно убрав лишний код для нормальных браузеров:

И пишу:
$5(html5).appendTo(‘#example’)

Источник

Неработающие теги

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Теги SVG и path. Для чего и что за теги?
Добрый день! Наткнулся на тег SVG , а потом и path. Ищу по ним информацию, но так, чтобы доступно.

CSS-стили неработающие в MS Edge
Доброго времени суток, никто из гуру не подскажет, какие из этого списка css нужно с префиксом.

, которые Вы считаете правильными.

теги HTML
Всем привет.Подскажите пожалуйста какие теги вообще учить надо в HTML?!А то их очень много а люди.

Title — необязательный параметр
Свежая опера ее не держит и мозила тоже проверял специально а IE он всегда странно все поддерживал И что интересно CuteFTP 8 тоже не поддерживает этот тег Он там при редактировании кода не подчеркивает этот тег Хотя вроде CuteFTP 6 выделял

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

Необязательный. но без этого параметра от тега толку нет. Валидацию в формате XHTML 1.0 Strict проходит. а значит, тег не является устаревшим.

и вправду работает значит дело в title Смотрел ща мануалы вроде везде title необязательный параметр.

Задача этого тега — это показывать расшифровку какой-нибудь аббревиатуры при наведении мыши. А если не указана расшифровка, то тег становится бессмысленным.

Знаешь ты прав я просто раньше считал что смысл тега показать что данное слово является аббревиатурой Например : КОБРА (комитет общественной безопасности. бла бла) что именно это какая то там организация а не ЗМЕЯ)) а параметр Title второстепенный так как расшифровку не всегда надо показывать например если слово КОБРА повторяется в каждом предложении .

Но не суть разработчики думают иначе видать. Спасибо большое ситуацию разжевали полностью Думаю обсуждать этот тег дальше не имеет смысла

HTML 4
XHTML: 1.0 1.1

Internet Explorer с 8.0 (не очень коректно отображается параметр title)
Netscape с 8.0
Opera с 7.0
Firefox с 1.5

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

По умолчанию, текст заключенный в контейнере подчеркивается пунктирной линией.

Закрывающий тег
Обязателен.

HTML 4
XHTML: 1.0 1.1

Расширенное описание элемента. Оно отображается на веб-странице в виде всплывающей подсказки при наведении курсора мыши на аббревиатуру.

Но тему не закрывайте я думаю еще Теги найдутся сомнительные

Источник

Ошибка HTML5 как исправить?

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

Особенности HTML5

HTML5 являет собой современный цифровой язык для структурирования и демонстрации информации в всемирной паутине (World Wide Web). Как следует из его названия, он являет собой пятую версию HTML, которая активно используется в работе браузеров ещё с 2013 года.

Цель разработки ХТМЛ5 – улучшение работы с мультимедийным контентом. В частности, благодаря ей можно вставлять видео на страницах различных сайтов, и проигрывать данное видео в браузерах без привлечения сторонних плагинов и расширений (Flash Player, Silverlight, Quicktime).

Данная технология поддерживает множество видеоформатов, отличается довольно стабильной работой и качеством воспроизведения, потому некоторые разработчики (например, компания Google) практически отказались от Adobe Flash в пользу ХТМЛ5. Узнать об отличиях HTML5 от HTML4 можно здесь.

Причины ошибки

Но, как известно, ничто не бывает идеальным, потому некоторые из пользователей при попытке воспроизвести какое-либо видео в сети могут встретиться с ошибкой языка разметки гипертекста. Обычно она возникает при сбое в функционале ХТПЛ5 и может быть вызвана следующими причинами:

• Некорректная работа браузера (случайный сбой в его работе);
• Устаревшая версия браузера (браузер своевременно не обновляется);
• Неполадки на требуемом сетевом ресурсе (сбой работы ресурса, технические работы на нём и так далее);
• Влияние сторонних расширений браузера, блокирующих нормальную работу последнего с ХТМЛ5 (к примеру, Adblock).

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

Как исправить ошибку HyperText Markup Language, version 5

Чтобы избавиться от ошибки в пятой версии HTML рекомендую выполнить следующее:

1. Для начала попробуйте просто обновить страницу браузера (нажав, к примеру, на F5). Сбой в просмотре видео может иметь случайную природу, и обновление страницы может помочь исправить ошибку;
2. Попробуйте уменьшить разрешение видео в его настройках, иногда это может оказаться эффективным;
3. Очистите кэш и куки вашего браузера. К примеру, в браузере Мозилла это делается переходом в настройки браузера, затем во вкладку «Приватность» и нажатием на «Удалить вашу недавнюю историю» (в определении временного периода нужно выбрать «всё»);

Чистим кэш и куки в браузере

Установите самую свежую версию браузера. Обычное обновление браузера с помощью встроенного функционала не всегда оказывалось эффективным, потому рекомендую скачать самую свежую версию браузера с сайта разработчика, и инсталлировать данный продукт на ваш ПК;

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

Попробуйте отключить на время сторонние расширения браузера (в частности, Adblock). Некоторые из них могут препятствовать корректному воспроизводству видео вХТМЛ5;

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

Заключение

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

Источник

Избегаем распространенных ошибок в HTML5 разметке

Уважаемые хабровчане, представляю вам вольный перевод статьи Avoiding common HTML5 mistakes. Здесь мы рассмотрим частые ошибки в HTML5 разметке с точки зрения семантики, и как их избежать.

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

Не используйте тег в качестве обёртки для оформления

‘ы не умерли, и именно они отлично подходят в этом случае.

Принимая во внимание все вышесказанное, было бы хорошо разметить пример выше с использованием HTML5 так:

Если Вы не уверены, какой элемент использовать, то я советую Вам воспользоваться нашей блок-схемой выбора элемента (прим. переводчика: см. в самом низу записи).

Используйте и только при необходимости

, представляя заголовок секции в случае, если он состоит из нескольких уровней (подзаголовки, альтернативные заголовки и т.д.)

Избыток элементов

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

Неправильное использование

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

• Присутствует только один заголовок
• хорош сам по себе (т.е., без ).

Первый случай:

В этом случае просто уберите hgroup.

Второй случай — это еще один пример использования элемента без необходимости.

Если единственный ребёнок ‘а это , зачем нужен ? Если у Вас нет дополнительных элементов в ‘е (т.е. сестринских по отношению к ), просто уберите .

Подробнее об элементе можно почитать тут.

Не обрамляйте все ссылки в

В HTML5 было введено 30 новых элементов, чтобы дать нам возможность создавать структурированную и осмысленную разметку. Но не следует злоупотреблять новыми семантическими элементами. К сожалению, это как раз то, что происходит с . Спецификация описывает так:

Элемент nav представляет секцию страницы, связывающую её с другими страницами или частями текущей (секцию с навигационными ссылками).

Примечание: Не все группы ссылок следует помещать в элемент nav. Его следует использовать для основной навигации. Часто в футерах размещают небольшой список ссылок на различные страницы сайта (Главная, Помощь, соглашение об использовании, etc). В этом случае одного footer’а должно быть достаточно. Хотя ничто не мешает использовать nav, в этом нет необходимости.

Ключевая фраза — «основная навигация». Можно долго спорить о том, что понимать под основной, но для меня это:

• Первичная навигация
• Поиск по сайту
• Вторичная навигация (спорно)
• Внутристраничная навигация (внутри длинной статьи, например)

Хотя в этом случае сложно судить, что есть правильно, а что — нет, я считаю, что не стоит заключать в :

• Переключатели страниц
• Социальные ссылки (хотя возможны исключения в случаях, когда социальные ссылки являются основной навигацией. Например, сайты вроде about.me или flavours.me)
• Теги поста
• Категории поста
• Третичная навигация
• Объемные футеры

Если Вы не уверены, обрамлять ли список ссылок в , задайте себе вопрос: «Это основная навигация?». Примите во внимание следующее:

• “Не используйте , если Вы считаете, что с заголовком тоже подойдёт” — Hixie в IRC
• Возможно стоит добавить «Перейти к» для удобства?

Если ответ на эти вопросы — «Нет», это, видимо, не место для .

Общие ошибки в использовании элемента

Ах, . Разобраться с правильным использованием этого элемента, как и его собрата , непросто. Давайте взглянем на некоторые общие ошибки, касающиеся этого элемента.

Не каждое изображение

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

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

Вышеупомянутая блок-схема выбора элемента поможет Вам справиться с .

Если изображение несет только презентационную нагрузку, и на него нигде в документе не ссылаются, это определенно не . Иначе, задайте себе вопрос: «Необходимо ли это изображение в текущем контексте для понимания?». Если нет, это, видимо, не (возможно, ). Если да, спросите себя, «Могу ли я переместить это в приложение?». Если ответ на оба вопроса Да, то, возможно, подойдёт.

Ваш логотип — не

Тоже самое касается и логотипа. Часто я вижу такое применение:

Тут нечего добавить. Это просто неверно. Можно долго спорить о том, должен ли логотип быть в

, но мы сейчас не об этом. Настоящая ошибка — злоупотребление элементом . следует использовать только когда Вы ссылаетесь на него в документе. Вряд ли Вы где-нибудь будете ссылаться на свой логотип. Достаточно этого:

может быть не только изображением

Другой частый случай недопонимания элемента заключается в предположении, что его можно применять только для картинок. Но это не так. В может быть заключено видео, аудио, графики (в SVG, например), цитата, таблица, блок кода, стихотворение или любая комбинация перечисленного. Не ограничивайте себя в использовании одними картинками. Наша задача как приверженцев веб-стандартов — описать контент нашей разметки.

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

Не используйте ненужный атрибут type

Это, возможно, наиболее общая проблема, встречаемая в HTML5 галерее. Хотя это и не ошибка, я считаю, что лучше избегать этого.

В HTML5 нет необходимости указывать атрибут type для элементов

Вместо этого Вы можете просто написать:

Помимо прочего, Вы также можете сократить количество кода, расходующегося на указание кодировки. Глава Марка Пилгрима о семантике в книге Dive into HTML5 описывает все такие практики.

Некорректное использование атрибутов форм

Вы, должно быть, уже в курсе, что в HTML5 введено множество новых атрибутов форм. Мы рассмотрим их в ближайшее время, сейчас же я коротко расскажу, как делать не стоит.

Логические атрибуты

Существуют логические атрибуты также и для мультимедиа элементов и некоторых других. Описываемые мною правила применимы и для них.

Некоторые из новых атрибутов форм являются логическими, т.е. их наличие в разметке определяет поведение элементов. В том числе это:

• autofocus
• autocomplete
• required

Я редко встречаю их, но в случае с required я видел такое:

В конечном счете, это ничем плохим не грозит. Клиентский HTML парсер встретит атрибут required в разметке и применит соответствующие правила. Но что если сделать по-другому и написать required=«false»?

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

Логическое значение возможно применить тремя способами: (Второе и третье характерны для XHTML)

• required
• required=»»
• required=«required=»

Применительно к нашему примеру выше, мы могли бы написать так (в HTML):

Источник