Правильно будет обернуть svg в текстовый тег span?

Question

Подскажите пожалуйста, с точки зрения семантики Html, правильно будет svg иконку оборачивать в span?

Очень часто бывает что иконка расположена рядом с текстом и возникает соблазн вложить svg в тег span

Вот пример, c использованием tailwind, react и ts. Я уверен, опытный разработчик суть уловил, даже если он и не работает с этими технологиями

Answer 1

Ну вообще есть такое понятие как блочный и строчный элемент(думаю вы и так это знаете). Я к тому, что в зависимости от конечного результата, тег может использоваться любой и по разным причинам, с разными правилами. Так вот span - строчный элемент, и не зря был таким придуман, ведь правда?

Поэтому мне кажется разумнее использовать сразу DIV, но если ваши причины сильнее "стандартов"(или что-то вроде того), то легко можно диктовать span'y свои правила по типу:

span{
   display: inline-block;
}

Но зачем? Да и код приведенный вами, мне абсолютно не знаком, но как я его вижу с высоты своей башни(мааааленькой такой, но башни) :

<div class='className'>
    <!-- img взята исключительно для наглядности, тк можно описать класс "className" и сделать отличную иконку с текстом, или текст с иконкой как удобно -->
    <img src = 'icon'>
    <span>TEXT - icon</span>
</div>

Итог? span - как использовался для текста, так и используется.

Говоря о span'e как о внутреннем теге - тега - Button, если мой .html:

    <button type="button">
        <span>M</span>y button
    </button>

То например в .css:

span{
    color: red;
}

Подобные манипуляции я очень люблю использовать именно со span'om. И если исходить из данного контекста - то почему бы ему с легкостью не стать блочным, и не хранить в себе даже картинку? Но зачем? Опять же, что-то мне подсказывает, что я возможно гляжу сквозь пальцы и не могу уловить суть задачи.

button{
    width: 100px;
    height: 50px;
    position: relative;
}

svg{
    position: absolute;
    left: 0%;
}

<button type="button">
        <svg width="14" height="14">
            <circle cx="7" cy="7" r="5" stroke="green" stroke-width="4" fill="yellow" />
        </svg>
        
          Hello
    </button>

Очередной вопрос. Зачем SPAN - как блок в коде? Если SVG - и есть блок(контейнер)? Следуя из этой мысли, я без вспомогательных блоков могу управлять поведением SVG - тегом :)

БЛОГ НА HUSL

Правильно будет обернуть svg в текстовый тег span?

Ответы (1 шт):