Октябрь 25, 2019 Запись была обновлена
5 HTML элементов которые вы не знаете
Раньше я рассматривал плюсы HTML5. Новые элементы, такие как <header>, <footer>, <nav> и <main> сделали структуру документа семантической и «значимой». Данные элементы помогают поисковым роботам лучше понимать структуру документа. Но HTML элементов очень много, и, возможно, некоторые вы могли не заметить.
5 HTML элементов которые вы не знаете
1. Элемент <samp>
Этот элемент используется для вывода результата какого-либо скрипта. Элемент был введен еще в HTML3. Ниже вы можете увидеть пример использования данного тега:
1 | <p>Результат выполнения скрипта <samp>ЗДЕСЬ РЕЗУЛЬТАТ</samp> вы увидите в теге samp.</p> |
Тег поддерживает даже Internet Explorer 5. Он отображает текст в моноширинном шрифте как теги <pre> и <code>
2. Элемент <kbd>
Тег используется для того, чтобы задать текст который набирается на клавиатуре или названия клавиш:
1 | <p>Нажмите <kbd>ENTER</kbd> для создания нового аккаунта.</p> |
По умолчанию данный тег также имеет моноширинный шрифт.
Теги помогают лучше понять структуру вашего документа. Но так как все они имеют моноширинный шрифт, то для пользователя это не очень удобно. С помощью CSS мы можем сделать более привлекательный вид данного тега:
1 2 3 4 5 6 7 8 | kbd { border: 1px solid #333; background: linear-gradient(#aaa 0%, #555 100%); color: #fff; padding: 3px 8px; border-radius: 3px; box-shadow: 0px 2px 0px 0px #111; } |
3. Элемент <var>
Элемент используется для того, чтобы выделить переменную какого-либо кода. Данный текст по умолчанию в браузере отображается курсивом:
1 | <p>Переменная <var>y</var> равна 30.</p> |
Конечно, данному тегу также можно задать стили, и он будет выглядеть более красиво. Но вот как он выглядит изначально:
4. Элемент <dfn>
При определении нового слова в тексте, ему дается определение и он выделяется курсивом. То есть при дальнейшем чтении читатель уже знает значение данного слова. Так вот данный тег позволяет выделять курсивом новый термин:
1 | <p>Слово <dfn>инновация</dfn> происходит от латинского inovatis (in - в, novus - новый) и в переводе означает «обновление, новинку, изменение».</p> |
И в браузере выглядит это так — обычный курсив:
5. Элемент <mark>
Тег <mark> это новый элемент, который был введен в HTML5:
1 | <p>В <mark>этом месте</mark> я хочу заострить ваше внимание!</p> |
Тег используется для того, чтобы привлечь внимание пользователя и заострить внимание на каком-то месте текста. Фон текста становится ярко-желтым, а сам текст черным. Вы можете увидеть результат на скриншоте ниже:
Вывод
Я думаю данная статья была полезна для вас и вы узнали что-то новое. Обязательно примените это на практике, чтобы закрепить полученные знания.
Успехов!
С Уважением, Юрий Немец
Источник: http://www.hongkiat.com/blog/html-tag-that-you-probably-dont-know/
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Абсолютно не понятно, — такое впечатление, что речь идет всего лишь о еще нескольких тегах логического форматирования текста, таких как например в старых версиях HTML, — и не более того. (Хотя эффект изображения клавиши в или маркер , конечно, могут пригодиться. Впрочем, , возможно, вообще несет какой-то другой эффект, а тут он просто «перепрограммируется» при помощи CSS-стилей).) Но при чем тут «элемент используется для вывода результата какого-либо скрипта» — не понятно, ведь вроде бы этот контейнер не предоставляет возможность вывода результата действия скриптов, это не апплет (или во всяком случае из приведенного выше примера это не видно). Так что статья, увы, написана не очень грамотно…
Тег <samp> используется для вывода результата работы скрипта. То есть это принято так, что в этот тег необходимо выводить данную информацию, также как в тег <h1> принято писать заголовок. Конечно, можно выводить результат и в тег <div> или тег <span>.
Вы мне скажите как тег может быть апплетом?
Очень полезная статья!
На сегодняшний день действительно очень много тегов,о которых многие просто не знают и не используют их.
По поводу тега samp согласен с Юрием,автором статьи.
Самый простой пример:
Есть необходимость,например,показать результат вывода строковой переменной методом alert, и не использовать всплывающее окно,тут как раз и пригодится тег samp.
Про элемент <kbd> я не знал. Спасибо.
Частенько буду посещать этот сайт, т.к я верстальщик сайтов, очень полезно!
Автору респект!