Тултип на чистом #HTML & #CSS

https://codepen.io/denic/pen/zYobqqa

#am_css_tips #am_html_tips

Почему важно использовать корректные #HTML5 тэги вместо div:

👉 Accessibility (читалки корректно понимают для чего секция вашей страницы предназначена и как с ней взаимодействовать)
👉 Maintainability & readability (легче читать и понимать код разметки, когда у тебя не одни лишь div'ы в ней)
👉 Machine friendly (частично относится к первому пункту, но так же поисковые боты и парсеры воспринимают валидные страницы лучше)
👉 Testability (легче тестировать и поддерживать актуальность тестов)

Перед тем, как использовать тег <div>, убедитесь что ни один из нижеперечисленных вам не подходит (если подходит - используйте корректный тег, вместо div)

header
footer
nav
main
section
summary
caption
label
p
ul
ol
blockquote
article
aside
mark
details
fieldset
legend
form
table
figure
figcaption
progress
q
abbr
address
time
dl
dialog
s
output
var

#am_html_tips #am_accessibility

Какие теги использовать вместо

<span>

:

a
em
strong
small
s
cite
q
dfn
abbr
time
code
var
kbd
sub
sup
mark
bdi
bdo

#am_html_tips #am_accessibility