Задать вопрос

FabiBoom

Ответы пользователя по тегу HTML

  • Какой тег лучше использовать для слогана?

    @FabiBoom
    Вас интересует именно семантика или не нарушить "правила" HTML?

    Кратко, почти любой семантичечкий "текстовый" (фразовый) тег, в зависимости от содержимого которое вы туда вкладываете и как вы его рассматриваете.
    Во-первых, если задача семантически разметить, то "слоган по центру" не верная формулировка, в семантике нету такого понятия "по центру", это визуальное понятие. Во-вторых зачем вам по учебнику? Бить никто не будет) Тут нужно смотреть по содержимому. Начинать следует с простого, у нас текстовое содержимое - p (параграф), подойдет в 99%. Но у нас более щекотливый случай - "слоган", он должен кричать и это может быть и заголовком (если после слогана, есть какой то дополнительный контент связанный с ним), и strong (если мы хотим четко и твердо проговорить его во всяких читалках) , хотя зачастую хватит и обычного b. Решать вам.

    И да, span - несемантический элемент и подходит как контейнер для "текста" в случаях, когда его нужно застилизировать отдельным образом.
    Ответ написан
    3 комментария
    3 комментария

  • Почему не выводится набор React-компонентов?

    @FabiBoom
    Я не знаю, что вы пытаетесь сделать и я так понимаю, что причина в том, что метод getElementsByTagName возвращает не массив, а HTMLCollection, у которого нету метода map, который вы пытаетесь использовать.
    Решить проблему можно путем приведения результата в массив:
    Array.from(document.getElementsByTagName("main")[0].getElementsByTagName("section")).map(theArrayElement => <p>Paragraph!</p>);
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать блок гибким?

    @FabiBoom
    justify-content: space-between; задать флекс-контейнеру (элементу с display: flex) должно хватить
    Ответ написан
    Комментировать
    Комментировать

  • Как составить регуляку по html-спискам?

    @FabiBoom 
    $str = "html";
$pattern = "/((<li>(.*?)<\/li>\s*)+)/s";

echo preg_replace($pattern, "<ul>$0</ul>", $str);
    Ответ написан
    Комментировать
    Комментировать

  • Как семантически сверстать вот такой слайдер?

    @FabiBoom
    1) Имхо, вариант со списком не очень, так как это не группа однородных элементов, которые выполняют одну функцию. Вариант с параграфом отлично подходит, хотя и обычный div подойдет с правильным названием класса.
    2) Разумных способов много, можно накидать псевдоэлементов и их анимировать (самый популярный), можно обертки, можно фон и так далее. Вот, например, мой элементарный вариант с анимацией, хотя тут и есть простой JS, но его можно убрать и изменять CSS переменную вручную)).
    Ответ написан
    Комментировать
    Комментировать

  • SVG иконки на сайте. Как правильно вставлять?

    @FabiBoom
    • Вставка через элемент img - если у вас изображение контентное (содержат важное для пользователя), например логотип.
    • Вставка через в качестве background-image: url() - если у вас изображение декоративное (обычные иконки, как у ваших примерах) и никак не изменяется при взаимодействии с пользователем (об этом ниже). Например, для простых иконок к заголовкам разделов можно использовать псевдоэлементы ::after и ::before + background-image c урлом на свгшку. Не засоряет таким образом разметку.
    • Вставка через элемент svg прямо в код - если у вас изображение декоративное и нужно будет при каких-то условиях, например, изменить заливку свгшки или цвет обводки с помощью CSS. Например, красная иконка в кнопке при наведении на кнопку становиться белой. Проблема в том, что, чтобы изменить ее цвет через CSS способом с псевдоэлементом мы можем только заменив на другую такую же картинку, но с белым цветом. А можно при наведении сделать так:
      button:hover svg {
   fill: white;
}

      И все - обратиться к этой иконке и залить ее белым цветом. Поэтому, чтобы управлять возможностями свгшек через стили эта SVG должна быть именно в разметке.

    Вариантов использования много и тут следует смотреть по конкретной ситуации.
    Есть еще возможность не добавлять весь свг код в разметку, а использовать свг спрайты, что очень рекомендую. Ими тоже отлично управлять через CSS, упрощает разметку, особенно, если какая-то иконка используется многократно. Вот пара ссылок:
    Раз
    Два
    Ответ написан
    Комментировать
    Комментировать

  • Почему не убирается underline?

    @FabiBoom
    Свойство text-decoration не наследуется, а применяться на весь контент и отменить не получиться.

    Оберни (например, в span) только текст , который нужно подчеркнуть и задай именно ему text-decoration: underline.
    Ответ написан
    2 комментария
    2 комментария

  • Как реализовать табуляцию на CSS?

    @FabiBoom

    И это один из вариантов только. Можно еще придумать)
    Ответ написан
    Комментировать
    Комментировать

  • Как добавить элемент над div'ом?

    @FabiBoom
    Ответ написан
    Комментировать
    Комментировать

  • Проблема с background?

  • Как можно реализовать такое поведение стрелочек?

    @FabiBoom
    https://codepen.io/anon/pen/gZOWOb
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно сверстать, чтоб не было прокрутки?

    @FabiBoom
    картинке - max-width: 100%
    .header-block - ширину лучше в процентах задать (100%)
    Ответ написан
    1 комментарий
    1 комментарий

  • Как вывести html обычным текстом?

    @FabiBoom
    Используйте спецсимволы &lt; и &gt; чтобы заменить скобки угловые! (есть онлайн сервисы для этого - вот (Escape HTML)
    Ответ написан
    1 комментарий
    1 комментарий

  • Среда для разработки под HTML?

    @FabiBoom
    Atom, Sublime Text 3, Brackets, Notepad++. Все бесплатно

    _______________
    Рекомендую Atom / Sublime
    Ответ написан
    Комментировать
    Комментировать

  • Может ли тег a содержать внутри div?

    @FabiBoom
    Да может, но все зависти от родителя(по спецификации): 
    <section>
   <a href="#"> 
            <div>МОЖНО</div>
    </a>
</section>

<span>
   <a href="#"> 
            <div>Нельзя</div>
    </a>
</span>


    То есть если в родитель ссылки можно вставить div, то и в a можно )))
    Ответ написан
    Комментировать
    Комментировать