Ссылки вокруг блоков


    Можно ли оборачивать ссылкой блочные элементы?

    Раньше было нельзя — это было запрещено прямо в спецификации HTML4. В то время мы больше думали про текстовые сайты, где были обычные синие ссылки.


    В современной спецификации HTML5 блочные элементы можно оборачивать в ссылки. На это теперь не ругается валидатор W3C и браузеры правильно обрабатывают такую вложенность.


    Но есть нюанс. Если вы положите ссылку в ссылку, то что получится, когда вы кликнете по такому? Какая ссылка отреагирует? Непонятно.


    Поэтому спецификация прямо запрещает: интерактивные элементы класть в ссылку нельзя.


    <a href="">
      Ссылка
      <a href="">
        Нельзя
      </a>
    </a>

    А какие есть ещё интерактивные элементы, кроме ссылки? Например, с которыми можно взаимодействовать. Кнопки, поля формы и лейблы к ним, элементы audio и video, если у них включены контролы.


    <a href="">
      <button>Нельзя</button>
    </a>

    Всё дело в интерактивности: если контролы отключены и видео с аудио играют сами по себе — значит уже можно, они стали неинтерактивными.


    <a href="">
      <video>Можно</video>
      <video controls>Нельзя</audio>
    </a>

    А если вы зададите атрибут tabindex любому элементу, чтобы его можно было выделить с клавиатуры, то он станет интерактивным и его уже нельзя будет завернуть в ссылку.


    Можно, конечно, делать трюки с позиционированием, когда вы не кладёте блок внутрь ссылки, а позиционируете ссылку поверх блока. Так можно обойти ограничение валидатора, который этого не заметит.


    Но в таком случае вы всё равно можете оказаться в ситуации, когда у вас ссылка над ссылкой или другим интерактивным элементом и непонятно, на что можно кликнуть, а на что нет.


    А ещё это провоцирует делать пустые, недоступные ссылки без текста внутри и тогда скринридерам непонятно куда она ведёт. Не делайте так.


    <a href=""></a>
    <article>
      Не надо так
    </article>

    Есть и другие, ещё более сложные трюки, чтобы вложить ссылки. Об этом написал Рома Комаров, почитайте, если интересно.


    Запомните главное: блоки можно оборачивать в ссылки, главное, чтобы внутри не было интерактивных элементов.


    Видеоверсия



    Вопросы можно задавать здесь.

    HTML Academy 55,84
    Интерактивные онлайн-курсы
    Поделиться публикацией
    Похожие публикации

    Вакансии компании HTML Academy

    Комментарии 20
    • 0
      Спасибо!
      • +1
        Кто-то пользуется валидатором w3c?
        • 0

          Конечно. Только он теперь официально называется веселым проверятором :)

          • 0
            Кто-то пользуется валидатором w3c?

            Зачем минус) Совершенно справедливый вопрос, учитывая дикую сферичность этого (и любых других) валидаторов. А также то, что html в наши дни практически всегда сгенерированный.
            • 0
              учитывая дикую сферичность этого (и любых других) валидаторов

              Простите, вы точно не судите обо всех валидаторах по древнему DTD-валидатору (который, действительно, даже парсил разметку иначе, чем браузеры)? Просто актуальный проверятор для HTML5 (о котором нескучно рассказывает один из его разработчиков в интервью по ссылке комментом выше) развился во вполне неплохой линтер, и действительно помогает отловить многие проблемы до их проявления:). И сгенерированность HTML этому ничуть не мешает.

              • 0
                Да, вы совершенно правы в своих подозрениях, я остался в каменном веке касаемо html-валидаторов :) Ознакомился со статьёй по вашей ссылке сразу же, но комментарий мой был написан ранее, одобрили его только сегодня.

                Ничего не имею против адекватных линтеров, а тем более автоматизированно применяемых :)
            • 0
              Постоянно
            • +4

              Не могу удержаться от пары-тройки занудных дополнений:


              • браузеры и раньше нормально обрабатывали блоки в ссылках, даже во времена IE6;
              • если сама ссылка вложена, например, в span или в p, валидатор-таки ругнется на попытку вложить в нее блок. Дело в том, что в HTML5 у ссылки «прозрачная» модель содержимого — можно вкладывать то же, что можно вкладывать в родителя (за вычетом интерактивщины). В HTML4 два таких элемента тоже были — ins и del;
              • в HTML5 от самого деления элементов на «блочные», «строчные» и еще какие-то (поскольку и в HTML4 не всё получалось изящно раскидать по этим категориям) вообще отказались. Оно приводило к путанице между структурной ролью элементов и их внешним видом и мало говорило о том, что можно вкладывать в сами элементы (вот как угадать, не зная заранее, во что можно вложить блок — в «строчный» a или в «блочный» p?). Современная терминология («фразовый контент», «потоковый контент», «интерактивный контент» и т.п.) однозначнее и, имхо, лучше сразу приучаться к ней.
              • 0
                браузеры и раньше нормально обрабатывали блоки в ссылках, даже во времена IE6;

                В Firefox 2, который вышел на 5 лет позже IE6, были серьезные проблемы с ссылками вокруг блоков

                • 0

                  Даже в Firefox 3 (возможно, и позже) были странности с display:block внутри ссылки с дефолтным display:inline (независимо от элементов, даже для кристально валидных спанов). И новые «блочные» элементы HTML5 Fx2 в принципе не понимал, но это отдельная история, со ссылками не связанная. Именно от недопустимой вложенности известных элементов, при правильной структуре боксов в CSS, проблем не помню. Возможно, заблуждаюсь…

              • +1
                <video controls>Нельзя</audio>
                Открыли видео, а закрыли аудио — специально так сделали?
                <a> вкладывали в <button> — такое я кстати много где видел.

                Ну и небольшой лайфхак: использовать onclick если требуется как-то обрабатывать клики на элементах…
                <div class="mylink" role="link" tabindex="0" onclick="location.href='/page2.html';">
                  TEXT
                </div>


                И еще, большое спасибо, что учитываете скринридеры и не оставляете их без внимания.
                А ещё это провоцирует делать пустые, недоступные ссылки без текста внутри и тогда скринридерам непонятно куда она ведёт. Не делайте так.
                • +5
                  Это не лайфхак, а костыль, по многим причинам так не стоит делать.
                • +1
                  Всё хорошо, но, простите, пост о том, что небо синее, а трава зелёная. Любой, даже начинающий, верстальщик должен это знать. А если нет, то, может, стоит начать с учебника?
                  • 0

                    Многие начинают с учебников начала 2000-х (некоторые из которых переиздавались и позже без соотв. коррекции). После которых объективная реальность невольно вызывает когнитивный диссонанс. Ролик/статья помогают его разрешить, тем и полезны.

                    • 0
                      Сейчас быстро глянул. Есть учебники по HTML5. Зачем начинать с учебников 2000-х? Но даже если так, надо быть в танке, чтобы не знать о новых спецификациях. Интернет-то зачем? w3.org — и вперёд. Да я-то не против поста, ради бога, просто имхо это выглядит, как «а ещё я на машинке умею…» Тогда уж надо пробежаться по всем нововведениям с начала 2000-х. А это уже и получается полноценный учебник :) В итоге получаем следующее: для учебника начало как-то бессистемно и с середины, а для отдельного поста маловато. Впрочем, полезной информации мало не бывает, почему нет…
                      • 0

                        Увы, есть учебники, позиционирующие себя как по HTML5, но ничтоже сумняшеся фигачащие устаревшими концепциями типа тех же «блочных и строчных элементов». А материалы w3.org новичку скорее взорвут мозг, чем помогут разобраться (особенно с учетом того, что актуальные и устаревшие спецификации пока визуально никак не различаются). Так что это хороший ответ на конкретный часто возникающий вопрос, который новичка избавит от сомнений и метаний, а более продвинутому даст хорошую отправную точку для дальнейшего изучения моделей содержимого и типов контента HTML5 и прочих фундаментальных вещей (которые авторы учебников почему-то склонны обходить стороной).

                        • 0
                          Ну, если с учебниками сейчас действительно такая петрушка (я как-то давно не смотрел их; сейчас уже достаточно спецификаций и конкретных практических находок), тогда беру свои слова обратно.
                    • 0
                      Это же htmacademy они для новичков и постят =)
                      • 0

                        Кто-то, из тех кто вдруг не знал, тут прочитает и будет знать. Если вам уже это знакомо, может лучше пройти мимо, чем критиковать?

                      • 0
                        Хороший Вблог, недавно начал его смотреть.

                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                        Самое читаемое