Теги HTML: 10 крутых вещей которые они могут делать
В общем сложности, сегодня в HTML присутствует 142 элемента, которые стандартизованы W3C, исключая те, которые находятся в разработке или устарели (такие как: strike, center, font, plaintext и многие другие).
1. Map картинок
тег может быть использован для создания кликабельных областей на картинке, которые могут быть использованы в перенаправлении пользователя на другой сайта или перемещение экрана на другую область страницы.
Вы можете определить в какой области картинки будет отображаться ссылка использую тег , который должны быть внутри тега .
2. Input подсказки
Используя можно сделать список подсказок, которые будут появляться по время ввода данных в input.
3. Подсветка текста
Иногда требуется подсветка текста на темной фоне сайта, чтобы отделить некоторые участки текста. Этого можно добиться используя тег . Цвет заднего фона можно изменить с помощью background-color, а так же можно добавить color, чтобы сменить цвет текста.
4. Template
Вместе с HTML5, появился новый тег , который выполняет функцию хранения информации. Браузер не считывает (пропускает) все что внутри этого тега.
Для примера возьмем тег . Внутри его будет создана одна строка при помощи . Так же будет кнопка, которая динамично создает новые строки внутри . будет хранить , которая будет использоваться для добавления новой строки в таблицу.
Иногда требуется сделать размер шрифта меньше — не таким как основной. Например: условия, цитаты, юридические права и так далее. Для этого подойдет тег .
6. Ссылка на корень сайта
Тег указывает корневую ссылку для всех ссылок внутри используемого документа. Так же об этом теге можно прочитать на официальном сайта Mozilla Developers.
7. Picture тег
Количество девайсов с разными расширениями экрана расчет с каждым днем. Для телефона надо одно разрешение, для компьютера другое. Теперь такой вопрос — как быть с картинками? Ведь их нужно адаптировать под разные экраны. Проблема решена, мы будем использовать HTML5 тег — , который позволяет добавлять разные картинки под разные расширения.
Внимание: данный тег работает только в Chrome. Для того, чтобы это работало в FireFox нужно поставить dom.image.picture.enable как true в about:config.
8. Color Picker или выбор цвета
HTML5 представил очень много разных возможностей. Одним из них — это возможность выбора цвета. Input элемент, с type=»color», теперь позволяет выбрать цвет из окошка, которое появляется при нажатии на поле.
9. Группирование
У вас очень много элементов внутри и вы хотите, разбить их по группам? Для этого вам подойдет тег , которые как раз выполняет данную функцию.
Внимание: данный тег может принимать свойства CSS.
10. тег
Верстка внутри тега покажется только когда в браузере будет выключена поддержка JavaScript. Важно указать пользователю на то, что у него выключена поддержка скриптов. Большинство сайтов на сегодня используют JavaScript и поэтому без его работы, сайт будет отображаться/функционировать неправильно.
Приветствую, Хабр! Представляю вашему вниманию перевод статьи «9 Extremely Useful HTML Tricks» автора Klaus.
У HTML есть много практических секретов, которые могут вам пригодиться.
Но я хочу убедиться, что сайт работает в Internet Explorer и других браузерах.
Я использую Endtest для создания автоматизированных тестов и выполнения их в кросс-браузерном облаке.
Netflix использует ту же платформу для тестирования своих веб-приложений.
Умение обращаться с Endtest даже входит в список необходимых навыков для некоторых их рабочих вакансий.
У Endtest есть несколько действительно полезных функций, таких как:
• Кросс-браузерная сетка, работающая на компьютерах с Windows и MacOS • Редактор без кода для автоматических тестов • Поддержка веб-приложений • Поддержка как собственных, так и гибридных приложений для Android и iOS • Неограниченное количество видеозаписей для выполнения ваших тестов • Сравнение скриншотов • Геолокация • Оператор if • Циклы • Загрузка файлов в ваши тесты • API Endtest, для легкой интеграции с вашей системой CI / CD • Расширенные утверждения • Мобильные тесты на мобильных устройствах • Тестирование электронной почты с помощью Endtest Mailbox
Ниже приведены 9 чрезвычайно полезных трюков HTML.
1. Тег «figure»
Его можно использовать для разметки фотографии.
Элемент «figure» также может содержать «figcaption» :
Fig.1 - SWAT Kats
И вот как это будет выглядеть:
Fig.1 — SWAT Kats
Он позволяет встроить медиаплеер для воспроизведения видео.
Например, вы можете загрузить свое видео на AWS S3 и использовать тег «video», чтобы вставить его на свой веб-сайт.
Использование YouTube для этого может показаться непрофессиональным.
И Vimeo не позволяет вам вставлять свои видео без оплаты.
Вы можете указать определенные характеристики, как ширина, высота, автозапуск, цикл, элементы управления и т. д.
И вот как это будет выглядеть:
Вы также можете встроить прямой эфир, используя getUserMedia() или WebRTC
Этот тег помогает отображать изображения в общедоступном виде, показывая альтернативную версию изображения для небольших окон просмотра.
Он должен содержать один или несколько тегов «source» и один тег «img» .
Тег «img» будет использоваться только в случае, если окно просмотра не соответствует ни одному из тегов «source» или если не поддерживается браузером.
Тег «progress» отображает ход выполнения задачи.
Этот тег не следует путать с тегом «meter» (который представляет собой датчик).
5. Тег «meter»
Вы можете использовать тег «meter» для измерения данных в заданном диапазоне (датчик).
Результат может быть установлен через минимальные и максимальные значения или в процентах.
И вот они:
6. Тег «map»
Тег «map» используется для определения клиентской карты изображений.
Карта изображения — это изображение с интерактивными областями.
Все, что вам нужно сделать, это ввести координаты X и Y в элементах из «map» .
Это означает, что вы создаете карту нашей Солнечной системы, определяете область для каждой планеты и перенаправляете посетителей на отдельную страницу для каждой планеты, которую они выбрали кликом.
7. Атрибут contenteditable
Этот атрибут указывает, является ли содержимое элемента доступным для редактирования.
This is an editable paragraph.
8. Предложения по вводу
Надеюсь, вы не возражаете, что я не добавил разнообразные стили.
Я предпочитаю оформлять примеры по своему вкусу, как можно красивее.
9. Тег «noscript»
Содержимое внутри элемента «noscript» отображается браузером, только если отключён JavaScript.
Это обеспечивает запасной механизм для компонентов, которые перестанут работать без JavaScript.
Я думаю, это действительно круто, что вы ищете трюки HTML, но уверены ли вы, что ваше веб-приложение работает правильно на всех браузерах и устройствах?
Вы можете использовать Endtest для быстрого создания автоматических тестов и их выполнения в кросс-браузерном облаке.
Необычные HTML-теги, с которыми стоит познакомиться
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Перевод статьи «Unusual HTML tags worth knowing».
Использование правильных HTML-элементов имеет куда большее значение, чем многие думают.
Упорядочивание и придание смысла странице, а не только ее представлению, это семантический HTML. Элемент
содержит абзац и все знают, как он должен выглядеть.
Семантический HTML не только помогает сообщать поисковикам о том, что содержится на странице, но и помогает скринридерам лучше и эффективнее справляться с их работой.
В этой статье будут перечислены не слишком известные теги, но с ними определенно стоит познакомиться, потому что чем больше инструментов у вас в арсенале, тем лучше.
: аббревиатуры
Этот элемент используется для указания расшифровки аббревиатур (см. пример ниже). С его помощью вы можете добавить расшифровку аббревиатуры, использованной в тексте (на случай, если читатель с ней не знаком), не загромождая сам текст. Для этого используется атрибут title.
: определения
Этими тегами можно окружить слово, которое поясняется в контексте предложения. Родительные элементы
, / или будут при этом считаться определением выделенного слова.
: контактная информация
Этот элемент используется для указания контактной информации. Следует иметь в виду, что не все контактные данные следует отображать подобным образом.
Контактная информация может включать имена мейнтейнеров документа, ссылки на их веб-страницы, e-mail для фидбэка, телефонные номера и т. д. Но элемент address не следует применять для обычного почтового адреса, изложенного простым текстом в столбик!
: цитирование
Этот элемент используется для указания источника цитаты.
: удаленный текст
Эту пару тегов можно поставить вокруг текста, который был удален из документа. Правда, этот тег не слишком хорош с точки зрения доступности, потому что большинство скринридеров с настройками по умолчанию его не объявляют.
: многоуровневые заголовки
При помощи этого тега можно сгруппировать заголовки в документе (-). Таким образом подзаголовки не будут создавать отдельные, собственные разделы.
See the Pen example by Christopher Kade (@christopherkade) on CodePen.
Этот элемент был удален из спецификаций HTML5 (W3C), но он по-прежнему есть в WHATWG-версии HTML. Он частично реализован в большинстве браузеров, так что вряд ли исчезнет. Больше информации.
: вставленный текст
Этот тег служит для представления участка текста, который был добавлен в документ. Примерно, как на Github показываются замененные строки кода.
Заключение
Есть очень много HTML-тегов, не знакомых подавляющему большинству веб-разработчиков. Но их применение на практике часто способствует большей инклюзивности нашего контента.
