Статьи

HTML: 5 главных забытых элементов

Февраль 7, 2019

Таким образом, вы — гуру внешнего интерфейса, который проводит свой день, выполняя сложные CSS-макеты и динамическое волшебство DOM. Вы освоили межбраузерную компоновку, уверены в своих навыках создания сценариев DOM и приложили все усилия, чтобы сделать свои страницы максимально удобными и доступными. Черт, возможно, вы даже добавили дополнительное семантическое значение на ваш сайт, используя микроформаты .

Но есть ли еще что-то, что вы могли бы сделать? Насколько полны те основы HTML, на которых все основано?

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

д.ф.н.
Элемент dfn Вот пример: 

 <p>An <dfn>array</dfn> is a single programming variable with
multiple "compartments". Each compartment can hold a value.</p>

По умолчанию браузер отображает элементы dfn Например, если бы я хотел, чтобы они отображались жирным шрифтом, я мог бы сделать это: 

 dfn {
  font-weight: bold;
  font-style: normal;
}
цитировать
Элемент cite Вот как вы используете это: 

 <p>The SitePoint book <cite>Build Your Own Web Site The Right 
Way</cite>, by Ian Lloyd, is a great primer for learning 
<acronym title="HyperText Markup Language">HTML</acronym> and 
<acronym title="Cascading Style Sheets">CSS</acronym>.</p>

Наиболее распространенная причина того, что элемент cite Все в порядке! Вы можете сделать оба, как это: 

 <p>The SitePoint book <a 
href="http://www.sitepoint.com/books/html1/"><cite>Build Your 
Own Web Site The Right Way</cite></a>, by Ian Lloyd, is a great 
primer for learning <acronym title="HyperText Markup Language">HTML</acronym> and 
<acronym title="Cascading Style Sheets">CSS</acronym>.</p>
вар
Элемент var По умолчанию он отображает моноширинный шрифт в большинстве браузеров. Вот пример: 

 <p>For each iteration in the following Ruby code, the 
<var>car</var> variable is set to the current element of 
the array.</p>
маисовая крупа
Элемент samp Вот как это используется: 

 <p>When I ran the program from the command line, it just 
printed <samp>File Not Found</samp> to the screen.</p>
KBD
Элемент kbd Довольно просто: 

 <p>If you need help at any time, hit <kbd>F1</kbd> to display 
the online help menu.</p>

И это все, что нужно сделать. Полегче, а?

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

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

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

33
Share: