Какие HTML теги при оформлении css считается моветон ?
2 ответа
Во-первых, не стоит использовать все элементы, помеченные в спецификации как устаревшие или даже исключённые из неё. Это b
, i
, u
, strike
, big
, small
, font
и некоторые другие.
Также есть некоторые элементы, которые хотя и имеют некоторое дефаултное оформление, обрели свою семантику. Использовать их чисто ради оформления неправильно, но использование по прямому назначению вполне оправдано:
br
- перевод строки. Идеально подойдёт для строк внутри стихов или песен, но НЕ подойдёт для создания пустой строки между куплетами - вместо этого можно, например, оборачивать сами куплеты вp
.hr
- горизонтальная линия. В книгах иногда внутри глав встречаются***
как разделитель меньший, чем глава - вот на его роль hr отлично подходит. Более спорное использование - между самими главами (по сути дублирует заголовки) и между куплетами песни.em
иstrong
- смысловое акцентирование слов. Их не следует использовать просто ради курсива и жирного шрифта. А вот курсив в этом тексте у сочетания "не следует" вполне логично сделать через em.mark
- выделение совпадений, например, подсветить поисковую фразу в результатах поиска. А не просто жёлтый фон.s
- неактуальная информация. Например, во время скидок можно поместить в него старую цену. А просто что-то зачеркнуть надо через css.ins
иdel
- вставленный и удалённый текст - некое версионирование. Собственно, кроме версионирования ничего в голову и не приходит.
Сейчас становится популярным использовать тег i
для иконок. Вообще-то не уверен как на это смотрит стандарт, но почему бы и нет. Может со временем это там закрепится.
Ещё есть интересный тег plaintext
- он никогда не был в спецификации, но обладает удивительной особенностью - всё, что идёт после его открытия становится просто текстом. На страницах я его никогда не использовал, но он просто идеален для вывода текстовой информации в новом окне, так что довольно часто я его использую в сниппетах которые запускаю в своём браузере. Но формально его использовать не стоит :)
PS: Вообще пришло в голову, что презентационные теги подходят для wysiwyg-редакторов, поскольку там семантика неизвестна. С другой стороны, всё то же самое можно сделать просто через классы на span'ах.
-
1. В стандарте или на аналогичных сайтах. Можно на mdn. 2. Не вижу опечатки... 3. Через css стилизовать span, div или что там у тебя есть. 4. Дополнил ответ.– Qwertiy ♦5 ноя 2019 в 22:37
-
Имеется в виду default. Оформление по умолчанию - то, которое прописано в браузерных стилях для этих тегов.– Qwertiy ♦5 ноя 2019 в 22:41
-
-
2Вот как раз уж лучше тег b, чем span.class=bold. Семантики и там и там ноль, но первое в миллион раз короче и понятнее. 6 ноя 2019 в 6:03
Одни "плохие теги" попросту отвечают за внешнее представление элемента (как тег ), и их можно заменить на нечто более значимое, либо использовать вместо них CSS. Другие же могут не только определять визуальное представление, но и быть к тому же излишне громоздки (как тег <font>
) или ужасно пагубны для удобства использования веб-страницы (как тег <blink>
).
Теги Ниже приводится большинство общих тегов, у которых есть лучшая альтернатива:
<b>
отображает текст жирным шрифтом. Вместо него можно использовать тег <strong>
, который добавляет элементу дополнительное значение (усиленное выделение), либо, если необходимо просто отобразить текст жирным шрифтом, соответствующее свойство CSS выполняет ту же работу.
<i>
отображает текст курсивом. Использование тега <em>
также добавляет дополнительную информацию (выделение), а для обычной визуализации подойдет соответствующее свойство CSS.
<big>
увеличивает размер отображаемого текста. Если текст используется в качестве заголовка, то лучше использовать теги заголовков (<h1>, <h2>
и т.д.), которые именно для этого и предназначены, а для простого визуального выделения следует использовать свойство CSS font-size, которое предоставляет больший контроль над страницей.
<small>
уменьшает размер отображаемого текста. Опять же для этого лучше использовать свойство CSS font-size.
<hr>
создает горизонтальную линию. Тем не менее, в веб-странице, основывающейся на CSS, использование этого тега несколько необычно. Для этого вполне подойдет свойство CSS border-top или border-bottom, либо, в крайнем случае, старый добрый тег изображения сделает это лучше.
Ко всем перечисленным тегам последние стандарты HTML относятся достаточно лояльно, однако эти теги ничего не добавляют к значению контента, что обязаны делать "хорошие теги". Все эти "пустышки" могли бы быть более полезны, но они не приносят и вреда, в отличие от следующих "вредин":
<u>
в свое время использовался для подчеркивания текста. Так получилось, что подчеркнутый текст прочно ассоциируется со ссылками. Именно поэтому этот тег давно умер, и именно поэтому крайне не желательно иметь в тексте подчеркнутые участки, не являющиеся ссылками.
<center>
использовался для центрирования одного элемента относительно другого. Свойство CSS text-align имеет не только значение center, но и left, right и justify.
<layer>
аналогичен тегу <div>
, однако работает он только в старых версиях браузера Netscape и потому совершенно бесполезен.
<blink>
или <marquee>
. Наше твердое "Нет!". Они должны были делать мигающий текст, однако из-за ограниченной поддержки вскоре превратились в дурную шутку.
<font>
использовался для определения имени, размера и цвета шрифта элементов. Этот тег снискал репутацию злого гения мира тегов. Старые сайты (и даже некоторые новые) подобно оспинами буквально испещрены тегами <font>
. Большинство из них обязаны своему появлению различным программам автоматизации создания сайтов, вставляющие тег <font>
вокруг всякого элемента, размер или цвет которого изменяет автор. Так как этот тег приходится вставлять вокруг каждого появления элемента (скажем, каждый раз, как используется элемент <p>
), то при помощи свойств CSS это можно сделать при помощи одной маленькой строки кода и применить ее ко всему сайту. Такой способ не только делает код веб-страницы меньше, но и позволяет при модифицировании стиля изменить всего одну строку, а не отыскивать все теги <font>
в коде всех веб-страниц. Тег <font>
и неуместное использование таблиц – две наиболее частые причины распухания кода веб-страниц.