что можно добавить на сайт html
9 полезных трюков HTML
Приветствую, Хабр! Представляю вашему вниманию перевод статьи «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
Он позволяет встроить медиаплеер для воспроизведения видео.
Например, вы можете загрузить свое видео на AWS S3 и использовать тег «video», чтобы вставить его на свой веб-сайт.
Использование YouTube для этого может показаться непрофессиональным.
И Vimeo не позволяет вам вставлять свои видео без оплаты.
Вы можете указать определенные характеристики, как ширина, высота, автозапуск, цикл, элементы управления и т. д.
И вот как это будет выглядеть:
Вы также можете встроить прямой эфир, используя getUserMedia() или WebRTC
Этот тег помогает отображать изображения в общедоступном виде, показывая альтернативную версию изображения для небольших окон просмотра.
Тег «img» будет использоваться только в случае, если окно просмотра не соответствует ни одному из тегов «source» или если не поддерживается браузером.
Тег «progress» отображает ход выполнения задачи.
Этот тег не следует путать с тегом «meter» (который представляет собой датчик).
Вот как это выглядит:
5. Тег «meter»
Вы можете использовать тег «meter» для измерения данных в заданном диапазоне (датчик).
Результат может быть установлен через минимальные и максимальные значения или в процентах.
И вот они: 
6. Тег «map»
Тег «map» используется для определения клиентской карты изображений.
Карта изображения — это изображение с интерактивными областями.
Это означает, что вы создаете карту нашей Солнечной системы, определяете область для каждой планеты и перенаправляете посетителей на отдельную страницу для каждой планеты, которую они выбрали кликом.
7. Атрибут contenteditable
Этот атрибут указывает, является ли содержимое элемента доступным для редактирования.
8. Предложения по вводу
Надеюсь, вы не возражаете, что я не добавил разнообразные стили.
Я предпочитаю оформлять примеры по своему вкусу, как можно красивее.
9. Тег «noscript»
Содержимое внутри элемента «noscript» отображается браузером, только если отключён JavaScript.
Это обеспечивает запасной механизм для компонентов, которые перестанут работать без JavaScript.
Я думаю, это действительно круто, что вы ищете трюки HTML, но уверены ли вы, что ваше веб-приложение работает правильно на всех браузерах и устройствах?
Вы можете использовать Endtest для быстрого создания автоматических тестов и их выполнения в кросс-браузерном облаке.
Вам даже не нужен код, чтобы использовать его.
Интересные HTML теги, о которых никто не знает
Наверно не многие из Вас знают, что в языке HTML есть специальный тег для задания аббревиатур, или тег для обозначения адреса. В данной заметке будет приведено несколько html тегов которые могут очень пригодиться при создании сайтов, но очень редко используются.
Атрибут tabindex
Этот тег определяет порядок перехода между полями формы по клавише «Tab»:
В этом примере по нажатию клавиши «Tab» мы пропускаем ссылку «Забыли пароль».
Тег
Тег позволяет указать браузеру, где нужно сделать сброс строки, когда это необходимо:
Нeразрывный пробел
В данном случае название фирмы перенесется на следующую строку вместе, а не раздельно.
Тег
Тег является «младшим братом» тега
. Этот тег определяет текст на странице как ссылку. По-умолчанию, текст внутри этого тега выделяется курсивом, что легко меняется с помощью стилей.
Использовать этот тег можно для цитирования библиографий и других ссылок сайта.
Тег
Тег позволяет логически и визуально объединить элементы select-а:
Тег
Тег
Как видно из названия, этот тег семантически выделяет адреса на странице. Адрес выделяется курсивом, что тоже легко меняется с помощью стилей:
Теги
Тег
Этот тег нужно(!) использовать во всех формах. С помощью этого тега задаются метки элементам формы. Иными словами, при клике мышью на текст в теге переводится фокус к соответствующему элементу формы, что существенно упрощает навигацию по форме. Например, этот тег просто незаменим в голосовалках:
Тег
Тег логически группирует элементы формы. С помощью тега можно задать название группе. Визуально группа выделяется рамкой вместе с меткой:
10 вещей в HTML, о которых вы вряд ли знали
Если хотите хоть как-то отличаться от других HTML-щиков, изучите нераспространённые приёмы языка.
Каждый раз, когда новички изучают что-то новое, им кажется что необходимо узнать слишком большой массив информации и потратить на это кучу времени и сил, а потому забрасывают это дело. Конечно, это не про всех.
Сегодня, когда информация общедоступна, но оценить её качество и доступность достаточно трудно, нужно научиться выделять самое необходимое, чтобы не запутаться в том, что нерелевантно для вас.
Мы решили сделать подборку интересных приёмов в HTML (кажется, каждый программист уже умеет в этот язык разметки), про которые не напишут в обычных учебниках и не расскажут в видеокурсах. Эти приёмы были отобраны вручную среди сотен других, посоветованных участниками Stack Overflow. Кстати, тем, кто ещё не знаком с этой платформой, советуем взять на вооружение. Здесь удобно находить ответы на стандартные и нестандартные вопросы, а если вы чего-то просто не понимаете, то вам помогут опытные пользователи, по крайней мере, на это стоит надеяться. Ну что, пора приступать к рассмотрению интересных HTML-приёмов!
1. Использование независимого от протокола абсолютного пути
Если браузер просматривает страницу в SSL через HTTPS, он работает с протоколом HTTPS, если же нет, то с HTTP.
Это предотвращает появление в Internet Explorer сообщения об ошибке «Эта страница содержит как защищённые, так и незащищенные элементы» и сохраняет все ваши запросы в рамках одного и того же протокола.
Предостережение: при использовании или @import для таблицы стилей, 7-я и 8-я версия Internet Explorer загружают файл дважды. Тем не менее, в остальном всё отлично.
2. Связь с тего label
Тег label логически связывается с элементом формы, используя атрибут «for». Большинство браузеров превращают это в ссылку, которая активирует связанный элемент формы.
5 HTML-трюков, о которых никто не говорит
Все веб-разработчики широко используют HTML, независимо от того, какой фреймворк или серверный язык используется. Фреймворки и языки программирования могут приходить и уходить, но HTML никуда не денется. Но, несмотря на такое широкое использование, всё ещё есть теги и свойства, о которых большинство разработчиков не знают.
И, хотя существуют различные механизмы создания шаблонов, такие как Pug, вам всё же необходимо хорошо разбираться в HTML. На мой взгляд, лучше использовать возможности HTML, когда это возможно, вместо достижения той же функциональности с помощью JavaScript, хотя я признаю, что написание HTML может утомить.
Несмотря на то что многие разработчики ежедневно используют HTML, они не пытаются оттачивать свой навык и поэтому не применяют некоторые из редко обсуждаемых фичей HTML. Специально к старту нового потока курса по веб-разработке, делимся материалом в котором приведены 5 тегов и атрибутов HTML, которые вам следует знать.
1. Ленивая загрузка изображения
Ленивая загрузка изображений может повысить производительность и скорость отклика вашего сайта.
Ленивая загрузка предотвращает немедленную загрузку изображений, которые на самом деле и не нужны. Как правило, изображение начинает загружаться, когда вы скроллите страницу и приближаетесь к нему.
Другими словами, изображение загружается, когда пользователь скроллит страницу и изображение становится видимым, в противном случае оно не загружается.
Этого легко добиться с помощью обычного HTML.
Всё, что вам нужно сделать, – это добавить свойство loading=«lazy» у тега img.
После добавления свойства ваш элемент должен выглядеть примерно так:
Вы можете получить некоторое представление о байтах, которые вы сэкономите с помощью этого трюка, используя инструмент Google Lighthouse.
2. Автокомплит
Получение подсказок прямо в строке, когда вы пытаетесь что-то найти, – действительно крутая фишка.
В наши дни автокомплит довольно распространен, и вы, должно быть, замечали его на таких сайтах, как Google и Facebook.
Вы можете использовать JavaScript для реализации автокомплита, установив прослушиватель событий поля ввода и затем сопоставлять искомые слова с предопределёнными вариантами.
Помните, что атрибут ID этого тега должен совпадать с атрибутом list тега input.
3. Picture
Вы когда-нибудь сталкивались с проблемой, когда изображения увеличивались не так, как вы ожидали? Я – много раз.
Обычно это происходит, когда вы пытаетесь создать сайт галереи или используете большое изображение и отображаете его в виде миниатюры.
При изменении ширины viewport’a вы можете заметить, что некоторые изображения не масштабируются вверх и вниз, как ожидалось.
К счастью, HTML даёт разработчикам возможность довольно легко исправить это, используя тег
, позволяющий добавлять несколько изображений, соответствующих разной ширине.
Ваш код будет выглядеть примерно так:
Как видите, мы указали минимальную ширину, при которой должно отображаться определённое изображение.
4. Базовый URL
Это один из моих любимых тегов при создании карты сайта.
Этот тег пригодится, когда у вас есть много ссылочных тегов, перенаправляющих на определённый URL-адрес, и все URL-адреса начинаются с одного и того же базового адреса.
Например, если я хочу указать URL-адрес на Twitter Илона Маска и Билла Гейтса, начало URL-адреса (домена) будет таким же, а то, что следует за ним, будет их соответствующими идентификаторами.
Обычно мне приходится дважды вставлять ссылку с одним и тем же доменным именем.
Приведённый выше код сгенерирует изображение с ссылкой на “https://www.twitter.com/elonmusk” и ссылочный тег, перенаправляющий на “https://www.twitter.com/billgates».
Тег должен иметь либо “href”, либо “target”-атрибуты.
5. Обновление документа
Если вы хотите перенаправить пользователя на другую страницу после периода бездействия или даже сразу, вы можете легко это сделать, используя простой HTML.
Вы могли заметить эту фичу, когда открывали определённые сайты и видели что-то вроде «Вы будете перенаправлены через 5 секунд».
Это поведение встроено в HTML, и вы можете использовать его с помощью тега и установки http-Equiv=«refresh» в него:
Здесь свойство content указывает время в секундах, после которого должно произойти перенаправление.
Стоит отметить, что, хотя Google утверждает, что относится к этой форме редиректа так же, как и к другим редиректам, использовать этот тип редиректов неразумно, если только это действительно не нужно.
Поэтому используйте его только в определённых случаях, например для редиректа после значительного бездействия.
Заключение
HTML и CSS – довольно мощные инструменты, и вы можете создавать фантастические веб-сайты, используя их.
Однако, несмотря на интенсивное использование этих двух языков, многие разработчики не особо увлекаются ими.
Таких советов и приёмов много, помимо тех, которыми я поделился с вами, и, безусловно, их стоит попробовать в своём проекте.
Если вы планируете использовать JavaScript, обязательно ознакомьтесь с моим недавним постом, где обсуждаются некоторые советы, которые могут сэкономить ваше время.
5 современных советов и приёмов JavaScript для экономии времени. Снизьте рабочую нагрузку и напишите чистый код с помощью этих советов по JavaScript.
Чтобы научиться чему-либо и овладеть этим навыком, нужны время, преданность делу и практика, и HTML – не исключение. А если хотите больше уделить время веб-разработке под руководством опытных менторов, то у нас как раз скоро стартует новый поток соответствующего курса.
Узнайте, как прокачаться в других специальностях или освоить их с нуля:
Забудьте про div, семантика спасёт интернет
Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном
Семантическая вёрстка — подход к разметке, который опирается не на внешний вид сайта, а на смысловое предназначение каждого блока и логическую структуру документа. Даже в этой статье есть заголовки разных уровней — это помогает читателю выстроить в голове структуру документа. Так и на странице сайта — только читатели будут немного другими.
Дисклеймер: статья может обидеть тех, кто прикипел к вёрстке дивами. Но
Почему семантика важна
Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.
Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей взаимодействовать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте.
Чтобы сайт был выше в поисковиках. Компании, которые создают поисковики, не разглашают правила ранжирования, но известно, что наличие семантической разметки страниц помогает поисковым ботам лучше понимать, что находится на странице, и в зависимости от этого ранжировать сайты в поисковой выдаче.
Классический пример — расписание поезда «Сапсан» в выдаче Google.
Разработчики tutu.ru сверстали таблицу тегом