Как сделать ссылкой целый блок
Ссылки вокруг блоков
Можно ли оборачивать ссылкой блочные элементы?
Раньше было нельзя — это было запрещено прямо в спецификации HTML4. В то время мы больше думали про текстовые сайты, где были обычные синие ссылки.
В современной спецификации HTML5 блочные элементы можно оборачивать в ссылки. На это теперь не ругается валидатор W3C и браузеры правильно обрабатывают такую вложенность.
Но есть нюанс. Если вы положите ссылку в ссылку, то что получится, когда вы кликнете по такому? Какая ссылка отреагирует? Непонятно.
Поэтому спецификация прямо запрещает: интерактивные элементы класть в ссылку нельзя.
А какие есть ещё интерактивные элементы, кроме ссылки? Например, с которыми можно взаимодействовать. Кнопки, поля формы и лейблы к ним, элементы audio и video, если у них включены контролы.
Всё дело в интерактивности: если контролы отключены и видео с аудио играют сами по себе — значит уже можно, они стали неинтерактивными.
А если вы зададите атрибут tabindex любому элементу, чтобы его можно было выделить с клавиатуры, то он станет интерактивным и его уже нельзя будет завернуть в ссылку.
Можно, конечно, делать трюки с позиционированием, когда вы не кладёте блок внутрь ссылки, а позиционируете ссылку поверх блока. Так можно обойти ограничение валидатора, который этого не заметит.
Но в таком случае вы всё равно можете оказаться в ситуации, когда у вас ссылка над ссылкой или другим интерактивным элементом и непонятно, на что можно кликнуть, а на что нет.
А ещё это провоцирует делать пустые, недоступные ссылки без текста внутри и тогда скринридерам непонятно куда она ведёт. Не делайте так.
Есть и другие, ещё более сложные трюки, чтобы вложить ссылки. Об этом написал Рома Комаров, почитайте, если интересно.
Запомните главное: блоки можно оборачивать в ссылки, главное, чтобы внутри не было интерактивных элементов.
Видеоверсия
Вопросы можно задавать здесь.
Похожие публикации
10 игровых механик в HTML Academy
Массовые интерактивные онлайн-курсы: опыт HTML Academy
HTML Academy, Хабр и краудфандинг
Вакансии компании HTML Academy
Комментарии 20
Конечно. Только он теперь официально называется веселым проверятором 🙂
Кто-то пользуется валидатором w3c?
учитывая дикую сферичность этого (и любых других) валидаторов
Простите, вы точно не судите обо всех валидаторах по древнему DTD-валидатору (который, действительно, даже парсил разметку иначе, чем браузеры)? Просто актуальный проверятор для HTML5 (о котором нескучно рассказывает один из его разработчиков в интервью по ссылке комментом выше) развился во вполне неплохой линтер, и действительно помогает отловить многие проблемы до их проявления:). И сгенерированность HTML этому ничуть не мешает.
Да, вы совершенно правы в своих подозрениях, я остался в каменном веке касаемо html-валидаторов 🙂 Ознакомился со статьёй по вашей ссылке сразу же, но комментарий мой был написан ранее, одобрили его только сегодня.
Ничего не имею против адекватных линтеров, а тем более автоматизированно применяемых 🙂
Не могу удержаться от пары-тройки занудных дополнений:
браузеры и раньше нормально обрабатывали блоки в ссылках, даже во времена IE6;
В Firefox 2, который вышел на 5 лет позже IE6, были серьезные проблемы с ссылками вокруг блоков
Даже в Firefox 3 (возможно, и позже) были странности с display:block внутри ссылки с дефолтным display:inline (независимо от элементов, даже для кристально валидных спанов). И новые «блочные» элементы HTML5 Fx2 в принципе не понимал, но это отдельная история, со ссылками не связанная. Именно от недопустимой вложенности известных элементов, при правильной структуре боксов в CSS, проблем не помню. Возможно, заблуждаюсь…
Открыли видео, а закрыли аудио — специально так сделали?
вкладывали в — такое я кстати много где видел.
Ну и небольшой лайфхак: использовать onclick если требуется как-то обрабатывать клики на элементах…
И еще, большое спасибо, что учитываете скринридеры и не оставляете их без внимания.
А ещё это провоцирует делать пустые, недоступные ссылки без текста внутри и тогда скринридерам непонятно куда она ведёт. Не делайте так.
Как сделать блок ссылкой?
Как сделать DIV блок ссылкой?
Как сделать DIV блок ссылкой?
Как сделать весь блок div ссылкой?
Добрый день! Посоветуйте, пожалуйста, как сделать блок div ссылкой?
Как баннер в iframe сделать ссылкой?
Дело вот в чем. Занялся я переводом swf баннеров в формат html5, и как всегда проблемка вылезла в.
2killlfun
Заголовки и текст внутри блока все равно останутся ссылками 
2dimon888951
Я хочу, чтобы содержимое не было ссылкой, а ссылкой была бы только область блока.
В html5 можно и наоборот 
Добавлено через 2 минуты
Попробуй провалидировать на http://validator.w3.org/check:
то, что он проходит проверку на валидность не значит, что так делать правильно. мне вообще трудно представить код, который бы не проходил проверку на валидность в html 5. Основная проблема тут в следующем: тег а не является блочным элементом, тогда как див это блочный элемент. Оборачивая а в див мы не нарушаем логической структуры. Конечно, вы можете назначить тегу а блочное отображение, но тогда не ясно, зачем вам вообще див. Вообщем, вы просто создаёте путаницу. А на счет валидаторов, это забавные штуки, так практически ни один современный css не пройдет проверку, html пройдет даже с кучей неточностей.
Добавлено через 6 минут
Вот, кстати, Теги внутри тега a тут уже поднимался подобный вопрос, зачем вам лишние возможные неточности, если можно сделать правильно?
Достаточно в том примере заменить a на span и он станет невалидным
Вот это утверждение для html5 неверно. Тек a может являться блочным, в отличие от того же span ‘а.
Не пройдёт. Есть куча «неточностей», а именно отклонений от xml, явно прописанных в стандарте.
Кстати, именно поэтомя я имею права не писать html, head и body, но обязан написать doctype и title.
Информация 2010 года не слишком актуальна относительно текущего состояния html5 (который по ссылке даже не упоминается).
Сделать определенный
на других источниках нашел такое, но он не работает
Добавлено через 29 минут
можно 3 строку заменить на
Ссылкой которая раскрывает
Запись в определенный DIV
На сайте имеются от 5 до 50 полей
Загружать результат ajax в определенный div
подскажите, как реализовать чтоб ответы сервера, ну типа проверка введенных данных, ошибки и т.д.
Взять определённый текст из определённого div-а
Вот есть такой код:
Решение
Ну тут есть 2 варианта:
а)Обернуть ссылкой твой див
Добавлено через 8 минут
То-есть мне надо получить данные только в определенном
Добавлено через 27 минут
То-есть мне надо получить данные только в определенном
Вы имеете ввиду получить div по его содержимому?
Приведите лучше конкретно html код.
P. S. С новыми вопросами надо новую тему создать Правила форума.
Добавлено через 1 минуту
То-есть нужен скрипт который позволял бы легко получать содержимое ОПРЕДЕЛЕННОГО блока. Это может быть и 3 блок, может и 30
Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.
Нужно, чтобы скрипт действовал только на определенный div
Добрый день уважаемые. Есть у меня текст(картинка) с прозрачным фоном(png). Мне нужно чтобы.
Скрыть div с определенной ссылкой внутри (пользовательский скрипт)
Добрый день. Знаний JS чуть менее, чем 0. Однако возникла такая задача: есть форум на котором.
Как показывать определенный div только на Android
Я бы хотел показывать div на android, но я в этом нуб. Помогите! Пример как нужно:
N кол во таблиц div в цикле нужно скрыть\показать определенный
Доброго времени суток! у меня возникла такая проблема: у меня есть большое количество строк которые.
Вёрстка страницы сайта
Вёрстка страницы представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги — прямоугольные блоки-контейнеры для содержимого — не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое — текст или медиа-файлы.
Как создать структуру страницы с помощью блоков (блочная вёрстка)
1. Как разбить макет страницы на секции
Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье 1.11. HTML5 семантические элементы.
Стандартная веб-страница содержит следующие секции:
Рис. 1. Основные секции страницы
Рис. 2. Основные секции страницы с тегом-контейнером
и задать для него максимальную ширину, внутренние отступы, которые будут отделять контент от краёв экрана устройств с небольшим разрешением, а также внешние отступы, позволяющие выровнять контейнер по середине родительского блока:
Таким образом мы получили каркас для нашей страницы (высота секций в данном случае виртуальная, так как без содержимого секции имеют нулевую высоту).
2. Разметка шапки сайта и позиционирование её элементов
Приступим к разметке первой секции, так называемой шапки веб-страницы. Элемент предназначен для группировки вводной информации и навигационных средств по странице/сайту. Добавим внутрь тега логотип сайта и навигационные ссылки:
Рис. 3. Шапка сайта с добавленными логотипом и ссылками
Разместим логотип слева, а ссылки навигации — с выравниванием по правому краю шапки (для наглядности я добавила элементам белую границу):
Существует несколько способов разместить блочные элементы в строку. Все они приведены в уроке Горизонтальное меню для сайта.
Рис. 4. Эффект схлопывания блока-контейнера
Также добавим ему вертикальные отступы, отделяющие элементы внутри него от краёв шапки. В результате стили будут иметь следующие вид:
Рис. 5. Очистка потока
Рассмотрим ситуацию, когда в качестве логотипа выступает картинка. Она может быть добавлена непосредственно внутрь тега или же в качестве фонового изображения. Картинка будет иметь свою высоту, которая может сильно отличаться от высоты меню навигации, поэтому перед нами встанет проблема вертикального выравнивания элементов шапки.
Рис. 7. Выравнивание ссылок меню шапки
3. Создание сетки для основной части страницы
Рис. 7. Сетка основной части страницы
Чтобы отделить ряды друг от друга, можно добавить нижний внешний отступ:
Высота блоков сетки определяется высотой их содержимого, поэтому она может быть разная:
Рис. 8. Разная высота элементов сетки
Рис. 9. Фоновая подложка
Если основная секция страницы содержит только два блока, то дополнительный ряд-обёртку можно не добавлять:
4. Разметка подвала страницы
Подвал страницы, или нижний колонтитул, обычно содержит информацию о копирайте, дополнительные ссылки и т.п. Вся эта информация также размещается в столбцах, которые могут быть одинаковой или разной ширины.
Блочная верстка сайта
Раньше на просторах Интернета был широко распространён табличный тип вёрстки, которому посвящена отдельная статья. Однако со временем этот подход к созданию структуры сайта устарел, и на смену ему пришла блочная вёрстка.
Отличия блочной вёрстки от табличной
Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега , то концепция блочной вёрстки основана на активном использовании универсальных тегов
Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки
Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.
Суть блочной вёрстки
В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.
Каждая часть страницы помещается в свой блок
Конечный HTML-документ представляет собой набор блоков
Принципы блочной вёрстки
Первый — конечно же, повсеместное использование тега
Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.
Третий принцип — таблицы нужно использовать не везде, а по необходимости, при этом полностью отказываться от них так же странно, как и применять не к месту.
Пример блочной вёрстки
Но, сколько не теоретизируй, а понимать всё проще на примере.
Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.
Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».
Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:
Разберём некоторые моменты.
Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так.
Теперь добавим файл CSS, код которого приведён ниже.
С помощью стилей мы последовательно оформляем содержимое тега и всех находящихся внутри контейнеров с помощью ранее изученных правил.
#clear запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.
CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.
Вот и весь смысл блочной структуры. Дальше можно только наполнять сайт содержимым и усложнять оформление, но делаться это будет всё равно по изложенному выше принципу. Также посмотрите статью про вёрстку сайта из PSD макета, там эти принципы показаны более наглядно.
Полезные ссылки: