Если я правильно понимаю Ваш вопрос, то отличие лучше всего объяснить на примере.
Раньше был популярен способ верстки страниц с помощью таблиц. Так как это позволяло обходить много проблем. Так вот, с точки зрения логики страница были таблицей, а физически это была страница, никоим образом не напоминающая таблицу.
Еще пример: если Вы сделаете два параграфа, одному назначите жирное начертание и бОльший кегль - физически это будет выглядеть как заголовок и текст под ним. А логически это будет выглядеть как два параграфа. Например, если эту Вашу страницу будет читать программа для слепых, которая озвучивает страницу в зависимости от логики, то она прочитает как два параграфа.
Примеров можно привести кучу, а стремиться надо к тому, чтобы физическая верстка была аналогична логической.
Последний пример: программы для слепых считывают атрибут alt тега img. Раньше активно применялся способ верстки, когда использовалась картинка gif 1x1px и ей задавался размер. Служила она для различных отступов (картинка была прозрачная). То есть физически она была заметна только в качестве отступа, с точки зрения логики вообще не выполняла никакой функции. То есть с точки зрения логики ей нужно было обязательно заполнить атрибут alt и оставить его пустым. Таким образом, и логика, и физика была правильной.
<img src="placeholder.gif" width="20px" height="50px" alt="">
upd: Еще хороший пример: Font Awesome. Раньше они использовали в качестве основного тега своих иконок, тег i. Это было прикольно, так как i = icon. Но с точки зрения логической разметки это было неправильно, ведь тег этот служит для других целей. В последующих версиях они перешли на использования span. Совесть их заела или просто решили, что так проще, но строго говоря - выбор был правильным.
Средний
Простой