Как использовать divs & spanans в HTML5

Question

HTML-разметка используется для представления структуры, а CSS используется для определения презентации.

Насколько я понимаю, элементы должны давать семантический смысл тому, что представляет собой раздел веб-страницы. <div> были использованы в HTML4 с смысловым значением, искусственно добавленным через id & class. Вот почему в HTML5 используются новые элементы блока, такие как <nav>, <main>, <header>, <footer> и т. Д. - семантические значения которых встроены в & неявные - представлены для общего использования. Это приводит меня к двум вопросам.

Я знаю, что <div> все еще может использоваться для разделов веб-страницы, семантическое значение которых не представлено вновь введенными элементами. <span> по-прежнему используется без изменений, поскольку новые новые элементы не вводятся (afaik), чтобы заменить их, как это случилось с <div>.

Другим использованием, в частности, являются таблицы CSS. Учитывая, что элементы HTML должны передавать смысловые значения и что свойство display изменяет компоновку элементов, существует ли разница между использованием <div> или <span> для представления таблиц? Если да, то как я могу решить, что использовать?

Помимо вышеупомянутых, существуют ли какие-либо другие применения этих двух элементов в HTML5 в качестве наилучшей практики, в том же смысле, что лучше использовать <table> для нетаблированных данных?

Answer 1

Учитывая, что HTML элементы должны передать смысловые значения, и что свойство отображения изменяет расположение элементов, есть ли разница между использованием <div> или <span> для представления таблицы?

Разница заключается в рендеринге, когда CSS не применяется (из-за того, что он не загружается или используется речевой браузер, или пользователь использует lynx или что-то еще).

Если у вас есть табличные данные. Используйте таблицу. В противном случае использование любого элемента имеет наибольший смысл.

Помимо вышесказанного, существуют ли другие варианты использования этих двух элементов в HTML5 в качестве оптимальной практики, в том же смысле, что лучше практика не использовать <table> для не-табличных данных?

Правило большого пальца для выбора элементов наилучшей практики не изменяется при введении HTML 5: выберите элемент, который имеет семантику, которая наилучшим образом описывает данные. Если ни один элемент не имеет семантики, которая правильно описывает данные, то используйте div или span, поскольку у них нет какой-либо семантики, связанной с ними (и никакая семантическая информация не лучше, чем неправильная семантическая информация).