На сколько ли плохо писать такой код?

Question

[lavezzi1]

Здравствуйте, уважаемые!

Задача которую мне нужно решить - сделать в админке, навигационную панель справа, с разделами. Она должна быть responsive.
На пк эта панель выглядит так:
Иконка - Текст. (все в строчку).
А на планшете так
____Иконка
_____Текст
(то есть по центру иконка и под ним, тоже по центру текст).

Верстка на Bootstrap 3.

Вот как я попробовал, все работает, классно выглядит, но не валидно!

<li>
     <a href="index.html">
         <span class="glyphicon glyphicon-rocket">
                 <p>На главную</p>
         </span>
      </a>
</li>

CSS элементарный, на пк float: right (встает в строчку), а на планшете убираем и выравниваем по центру. Как можно сделать это элегантней и симантично?

Comments

[Роман Якушев]

float: right вы кого куда делаете?

[lavezzi1]

Роман Якушев: для p тега, чтобы текст вставл в одну строчку с иконкой

Answer 1

[Денис Инешин]

Внутри <a> не должно быть вложенных блочных элементов вроде <div> или <p>
Используйте <span> с разными классами и всё.

Comments

[lavezzi1]

Благодарю!

[lavezzi1]

А span в spane это не плохо?

[Денис Инешин]

lavezzi1: Неа, это норма!

[Иван Соломенников]

Можно вообще дивы откинуть, есть же элемент menu.

[Иван Соломенников]

SelenIT2: Семантика такое выражение слышали? Элемент меню прекрасно себя показывает с HTML5 History API что представляет из себя одностраничное приложение которое в свою очередь представляет меню для перемещения по разделам.

[Иван Соломенников]

SelenIT2: facepalm

[Иван Соломенников]

SelenIT2: Гуглите Сэр, далее по тексту: создавайте приложение на js с помощью HTML History API и пробуйте сие в броузерах.

[Иван Соломенников]

SelenIT2: double facepalm

[Иван Соломенников]

SelenIT2: Там понимать собственно нечего, вместо элемента div, используешь элемент menu, меньше кода, семантика, юзабельно с HTML5 Histori API. В чем проблемы? Если не знаешь как сделать одностраничное приложение на HTML5 Histori API, могу скинуть ссылку на хорошее видео.

[Иван Соломенников]

SelenIT2: Элемент nav для ссылок, для сносок предназначен но не для меню.
Вот ссылка по созданию одностраничного приложения https://youtu.be/sAjAUmtGylY?t=325
Только в видео используется старый способ с дивами, я же создавал элемент menu и добавлял в него линки, что получилось намного читабельнее.

Answer 2

[Александр]

Ответ, который вы ответили решением не до конца верный, так как он про спецификацию HTML 4.01.
А в спецификации HTML5 говорится: "The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:"
Пример:

<aside class="advertising">
 <h1>Advertising</h1>
 <a href="http://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only $9.99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="http://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>

Comments

[lavezzi1]

То есть, тот вариант, который сверстал я, имеет смысл и право на жизнь?

[Александр]

Да, если вы в doctype указали тип документа - HTML5. htmlbook.ru/html/!doctype

[Александр]

Вот пример с разметки youtube^ i.imgur.com/MebsMpu.png

[lavezzi1]

Александр: Про это я знаю, всегда пишу . Но все равно валидатор не пускал.

[Александр]

lavezzi1: Я считаю, спецификация - главная инстанция в этом вопросе. Валидатор валидатору рознь.

[lavezzi1]

Александр: Спасибо за разъяснения.

Answer 3

[Роман Якушев]

<li>
     <a href="index.html">
         <span class="glyphicon glyphicon-rocket"></span>
                На главную
      </a>
</li>

и на пк делаете span float: right
а на мобильном span display:block;