Ссылка в заголовке или заголовок в ссылке?
Эрик Рейнж (Eric Range) вынес на обсуждение, затрагиваемый данным постом вопрос. Что лучше использовать в качестве обертки, заголовок или ссылку при совместном применении соответствующих элементов? С точки зрения HTML5 оба варианта абсолютно вали́дные.
Ссылка в заголовке:
Ten Ways to Have Yourself a Merry Little Christmas
Заголовок в ссылке:
Ten Ways to Have Yourself a Merry Little Christmas
Какой из них выберете вы? Я бы сказал, что все зависит от ситуации.
Кликабельная область.
По умолчанию элемент ссылки является внутристрочным (inline), а заголовок блочным (block). Таким образом, если не изменять эти исходные установки с помощью CSS, то кликабельная область для h1 > a будет соответствовать той, которая выделена светло красным цветом:
И наоборот, вариант a > h1 делает кликабельной всю область блочного элемента заголовка.
В верхнем примере с помощью CSS можно запросто сделать элемент ссылки блочным, однако в этом нет необходимости, ведь есть приведенный ниже вариант, предоставляющий необходимое поведение по умолчанию.
Вы, вероятно, думаете: «Увеличенная кликабельная область? Но это же хорошо!», что, в принципе, разумно, за исключением следующих моментов:
Неудобства при выделении текста.
Насколько это важно — решать вам. Но лично я всегда предпочитаю выделять текст, начиная с нижнего правого угла, и поэтому меня просто бесит вот такое поведение блочных ссылок:
Странности компоновки.
* Здесь не все так очевидно и поэтому давайте немного проясним ситуацию. Дело в том, что согласно стандарту CSS 2.1 при включении в элемент строчного уровня блочного элемента, строчный элемент-обертка разбивается на три внутристрочных блока, один из которых является внутренним «реальным» блоком (в нашем случае заголовком h1 ), а другие два являются анонимными внутристрочными блоками, образуемыми в данном случае браузером непосредственно перед и после «реального» внутристрочного блока. Такое стандартное поведение браузера остается незаметным до тех пор, пока отображаемая область внешнего элемента ссылки определяется исключительно его содержимым, т.е. текстом. Текст есть только в «реальном» внутристрочном блоке, а анонимные по причине отсутствия контента установлены в нулевую высоту и ширину и поэтому невидимы. Как только мы явным образом влияем на размерность анонимных внутристрочных блоков, устанавливая отличную от нуля границу или внутренний отступ для элемента ссылки, мы делаем их видимыми. Убедитесь в этом сами.
Два заголовка, одна ссылка.
Если у вас когда-либо возникала необходимость в создании заголовка и подзаголовка, направляющих посетителя в соответствующее место (и вы не хотите при этом делать подзаголовок в виде дочернего строчного элемента типа span или ему подобных), тогда ссылка-обертка была бы вполне оправданным выбором.
Cheese is favorite holiday gift
From a one-person survey held in central Wisconsin
Вопросы доступности.
Не знаю, я не уверен. А есть ли они вообще в данном случае?
Кто же победил?
Что, все еще есть над чем поразмышлять?
Тема наделения всех элементов параметрами href=”” и target=”” обсуждается уже давно. Вопрос упирается главным образом в семантику, а это объясняет то, почему поведение элементов до сих пор не стандартизировано. Кроме того есть мнение, что это приведет к путанице при использовании клавиатуры в качестве основного средства передвижения по сайту, так как все станет фокусируемым, что в свою очередь приведет к возникновению проблем доступности и юзабилити. С этим трудно не согласиться.
Неплохим решением был бы вот такой вариант, если бы не JavaScript:
Вообще-то, HTML5 не может допускать включение блоков в строчные элементы априори, поскольку в этом стандарте термины «блочный» и «строчный» элемент вообще отсутствуют. Теперь эти термины используются исключительно в CSS спецификации, которая, как раз таки и не позволяет этого делать. Вложенность HTML элементов и вложенность CSS боксов — теперь это разные, имеющие отдельную логику вещи. Однако в обоих случаях следует придерживаться правил. Если вам действительно не обойтись без включения блока в строчный элемент, то для того, чтобы избежать описанных выше проблем компоновки, вам необходимо для всех элементов содержащих блоки использовать декларацию display:block (или inline-block ), независимо от типа HTML элемента, тем более, что HTML5 не запрещает подобную вложенность.
А вопросы доступности у этой темы действительно есть и они неплохо описаны Роджером Йохансоном и Стивом Фолкнером
Еще несколько доводов за и против рассматриваемых здесь вариантов.
— может стать причиной дублирования, когда одна и та же ссылка повторяется несколько раз для сопутствующих заголовку элементов, таких как пиктограмма, подзаголовок и т.д.
— в случае с достаточно длинным заголовком, который разбивается на несколько строк, это приводит к смене значка курсора при попадании его между строк текста, что может вызывать недовольство некоторых пользователей, так как при этом им приходится так сказать «прицеливаться» перед кликом.
— в мобильных устройствах (по крайней мере, в iOS) выделение находящегося в ссылке заголовка приводит к выбору ссылки, а не текста самого заголовка.
— возникают сложности в случае необходимости стилизации находящихся внутри ссылки элементов в связке с событиями hover, focus и active.
12 Ссылки
12.1.1 Переход к ресурсу, на который указывает ссылка
По умолчанию со ссылкой связана загрузка другого ресурса Web. Это поведение достигается обычно путем выбора ссылки (например, с помощью щелчка мыши, ввода с клавиатуры и т.д.).
Путем активизации этих ссылок (с помощью щелчка мыши, ввода с клавиатуры, голосовых команд и т.д.) пользователи могут перейти к этим ресурсам. Обратите внимание, что атрибут href в каждом исходном anchor указывает адрес целевого anchor с использованием URI.
Целевые anchors в документах HTML могут указываться с помощью элемента A (именующего его с помощью атрибута name ) или с помощью любого другого элемента (именующего с помощью атрибута id ).
Этого же эффекта можно достигнуть, сделав якорями сами элементы заголовка:
Наиболее часто сейчас ссылки используются для загрузки других ресурсов Web, как показано в предыдущих примерах. Однако авторы могут помещать в свои документы ссылки, выражающие иные отношения между ресурсами, чем просто «использование ссылки для Просмотра связанного ресурса». Для ссылок, выражающих другие типы отношений, В исходном якоре указываются один или более типов ссылок.
Даже если они не используются для перехода, эти ссылки могут интерпретироваться интересными способами. Например, агент пользователя, выполняющий печать ряда документов в формате HTML в виде одного документа, может использовать эту информацию для формирования последовательного линейного документа. Дальнейшая информация об использовании ссылок для поисковых систем приведена ниже.
12.1.3 Задание якорей и ссылок
Загруженный ресурс может обрабатываться агентом пользователя различными способами: открытием нового документа HTML в том же окне агента, открытием нового документа HTML в другом окне, запуском новой программы для обработки ресурса и т.д. Поскольку элемент A имеет содержание (текст, изображения и т.д.), агенты пользователей могут генерировать это содержимое так, чтобы показать наличие ссылки (например, подчеркивая содержимое).
Элемент LINK определяет отношение между текущим документом и другим ресурсом. Хотя элемент LINK не имеет содержимого, определяемые им отношения могут отображаться некоторыми агентами пользователей.
Таким образом можно augment предыдущий пример, указав для каждой ссылки заголовок:
Атрибут hreflang предоставляет агенту пользователя информацию о языке связанного ресурса, точно так же, как атрибут lang предоставляет информацию о языке содержимого элемента или значениях атрибутов.
Имея дополнительные знания, агенты пользователей должны иметь возможность не представлять пользователю «мусор». Вместо этого они могут находить ресурсы, необходимые для корректного представления документа или, если они не могут найти эти ресурсы, по крайней мере уведомить пользователя о невозможности прочтения документа с указанием причины.
12.2 Элемент A
Начальный тэг: обязателен, Конечный тэг: обязателен
Атрибуты, определяемые в другом месте
Обычно агенты пользователей представляют ссылки так, чтобы они были очевидны для пользователей (подчеркивание, обратное видео и т.д.). Конкретное представление зависит от агента пользователя. Представление может различаться в зависимости от того, посещал ли уже пользователь указанную ссылку. Возможное визуальное представлением предыдущей ссылки:
Чтобы дать агентам пользователей явное указание кодировки символов целевой страницы, установите атрибут charset :
Предположим, мы определяем якорь с именем «anchor-one» в файле «one.html».
В данном фрагменте вокруг текста «Это местоположение первого якоря» создается якорь. Обычно содержимое элемента A не представляется каким-либо особым образом, если элемент A определяет только якорь.
Определив якорь, мы можем связать его с этим же или с другим документом. URI, назначающие якорь, включают символ «#», за которым следует имя якоря (идентификатор фрагмента). Вот несколько примеров таких URI:
Таким образом, ссылка, определенная в файле «two.html», который находится в одном каталоге с файлом «one.html», будет указывать на этот якорь следующим образом:
Элемент A в следующем примере задает ссылку (с помощью атрибута href ) и одновременно создает именованный якорь (с помощью атрибута name ):
В этом примере содержится ссылка на другой тип ресурса Web (изображение в формате PNG). Активизация ссылки должна привести к загрузке изображения из Web (и, возможно, его отображению, если система сконфигурирована соответствующим образом).
Таким образом, следующий пример является корректным в смысле соответствия строк и должен рассматриваться агентами пользователей как совпадение:
ПРИМЕР НЕДОПУСТИМОГО ИСПОЛЬЗОВАНИЯ:
Следующий пример не является корректным в смысле уникальности, поскольку два имени отличаются только регистром:
Хотя далее приводится допустимый код HTML, поведение агента пользователя в данном случае не определено; некоторые агенты пользователей могут (ошибочно) считать это совпадением, другие могут так не считать.
Поскольку DTD определяет элемент LINK как пустой, элементы LINK также не могут быть вложенными.
Атрибут id может использоваться для создания якоря в начальном тэге любого элемента (включая элемент A ).
В следующем примере имя целевого якоря задается с помощью атрибута id :
Атрибуты id и name используют одно и то же пространство имен. Это означает, что они не могут определять якорь с одним и тем же именем в одном и том же документе.
ПРИМЕР НЕДОПУСТИМОГО ИСПОЛЬЗОВАНИЯ:
Далее показан недопустимый фрагмент кода HTML, поскольку эти атрибут объявляют одно и то же имя дважды в пределах одного документа.
12.3 Отношения документов: элемент LINK
Начальный тэг: обязателен, Конечный тэг: запрещен
Атрибуты, определяемые в другом месте
В данном примере показано, как несколько определений элемента LINK могут быть представлены в разделе HEAD документа. Текущим документом является «Chapter2.html». Атрибут rel указывает отношение связанного документа с текущим документом. Значения «Index», «Next» и «Prev» описаны в разделе, посвященном типам ссылок.
имеет точно то же значение, что и:
Оба атрибута могут определяться одновременно.
Типы устройств обсуждаются в разделе, посвященном таблицам стилей.
Авторы могут использовать элемент LINK для указания различной информации для поисковых машин, включая:
В примерах ниже показано, как информация о языке, типах устройств и типах ссылок может использоваться для улучшения обработки документа поисковыми машинами.
В следующем примере мы сообщаем поисковым машинам, где находится печатная версия руководства.
В следующем примере мы сообщаем поисковым машинам, где находится первая страница набора документов.
Дальнейшая информация приведена в замечаниях в приложении о том, как помочь поисковым машинам проиндексировать Ваш Web-сайт.
12.4 Информация о пути: элемент BASE
Начальный тэг: обязателен, Конечный тэг: запрещен
href = uri [CT] Этот атрибут задает абсолютный URI, служащий базовым URI для разрешения относительных URI.
Атрибуты, определяемые в другом месте
В HTML ссылки на внешние изображения, апплеты, программы для обработки форм, таблицы стилей и т.д. всегда задаются с помощью URI. Относительные URI разрешаются в соответствии с базовым URI, который может определяться из различных источников. Элемент BASE позволяет авторам явно указать базовый URI документа.
Например, даны следующее объявление BASE и объявление A :
относительный URI «../cages/birds.gif» будет разрешен в:
Агенты пользователей должны вычислять базовый URI для разрешения относительных URI в соответствии с [RFC1808], раздел 3. Далее описано, как [RFC1808] применяется именно к HTML.
ссылки
Можно ли оборачивать ссылкой блок?
В HTML4 ответ на этот вопрос однозначный — внутрь ссылки можно вставлять только текстовые элементы и картинки. И для простых ситуаций с этим никаких проблем нет — если нам нужно, к примеру, сделать заголовок ссылкой, то мы добавляем внутрь
, но никак не наоборот.
При этом надо помнить, что область ссылки ограничена размером текста.
элемент блочный, он занимает всю ширину области просмотра, а ссылка строчная, её размер определяется размером содержимого. Так что щелчок не по тексту, а просто по этой строке ничего не даст. Для данного примера это может и не принципиально, а вот для какого-нибудь меню, где пункты меню визуально больше текста, важно. Поэтому мы модифицируем стиль ссылки, чтобы она занимала всё пространство внутри блока.
Вот теперь размер ссылки равен размеру блока и щелчок по любому месту блока воспринимается как переход по ссылке.
Как заголовок сделать ссылкой?
В блогах заголовок сообщения обычно служит и ссылкой на полный текст. Чтобы заголовок, который создаётся с помощью тега
, но никак не наоборот.
Последняя линия справа
Рис. 1. Ссылки с линией справа
Разноцветные ссылки
С помощью стилей задайте цвет ссылок, как показано на рис. 1.
Рис. 1. Разноцветные ссылки
Как открыть ссылку в новом окне?
Как добавить рисунок к внешним ссылкам?
Внешними называются ссылки, которые ведут на другой сайт. Чтобы пользователь мог отличить такие ссылки от обычных, к внешним ссылкам добавляют небольшой рисунок (например, такой 
), который информирует о том, что ссылка указывает на другой ресурс.
Как добавить пунктирное подчеркивание к ссылкам?
Пунктирное подчеркивание у ссылок в последнее время стало стандартом оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе. Активное использование технологии AJAX, когда страница обновляется без ее перезагрузки, привело к новому виду ссылок, которые отличаются от обычных ссылок пунктирной линией.
Как с помощью стилей выделить ссылки, которые ссылаются на другой сайт?
Как на странице сделать ссылки разных цветов?
Ссылки разных цветов обычно нужны для размещения на странице, имеющей несколько различающихся по фоновому цвету областей. На темном фоне логичнее располагать ссылки светлых тонов, а на светлом, наоборот, ссылки темного цвета.
Как изменить вид ссылки при наведении на нее курсора мыши?
1.5. HTML-ссылки
Ссылки можно поделить на две категории:
Как сделать гиперссылки на сайте
1. Структура ссылки
Ссылка состоит из двух частей — указателя и адресной части. Указатель ссылки представляет собой фрагмент текста или изображение, видимые для пользователя. Адресная часть ссылки пользователю не видна, она представляет собой адрес ресурса, к которому необходимо перейти.
Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) — унифицированный адрес ресурса. При создании адресов для разделения слов между собой рекомендуется использовать дефис, а не символ подчёркивания. В общем виде URl имеющий следующий формат:
Метод доступа, или протокол, осуществляет обмен данными между рабочими станциями в разных сетях. Наиболее распространенные протоколы передачи данных:
file обеспечивает чтение файла с локального диска:
http предоставляет доступ к веб-странице по протоколу HTTP:
https — специальная реализация протокола HTTP, использующая шифрование (как правило, SSL или TLS):
ftp осуществляет запрос к FTP-серверу на получение файла:
mailto запускает сеанс почтовой связи с указанным адресатом и хостом:
Номер порта ТСР, на котором функционирует веб-сервер. Представляет собой число, которое необходимо указывать, если метод требует номер порта (отдельные сервера могут иметь свой отличительный номер порта). Если порт не указан, по умолчанию используется порт 80. Стандартными портами являются:
Путь содержит имя папки, в которой находится файл.
2. Абсолютный и относительный путь
Когда в ссылке указывается только имя файла, браузер предполагает, что файл находится в той же папке, что и документ, содержащий гиперссылку. На практике веб-сайты содержат сотни документов, которые размещают в отдельные папки, чтобы ими было легче управлять. Чтобы создать ссылку на файл, находящийся вне папки, содержащей текущий документ, необходимо указать расположение файла или путь. HTML поддерживает два вида пути: абсолютный и относительный.
Рис. 1. Пример структуры папок
2.1. Абсолютный путь
Абсолютный путь указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со сторонних ресурсов и содержит следующие компоненты:
Существует два вида записи абсолютного пути — с указанием протокола (полный) и без него:
Когда вы ссылаетесь на страницу на другом сайте, вы можете использовать только полный абсолютный путь.
Если файл находится в корневой папке, то путь к файлу будет следующим:
При отсутствии имени файла будет загружаться веб-страница, которая задана по умолчанию в настройках веб-сервера (так называемый индексный файл).
2.2. Относительный путь
Относительный путь содержит следующие компоненты:
Путь для относительных ссылок имеет три специальных обозначения:
Главное отличие относительного пути от абсолютного в том, что относительный путь не содержит имени корневой папки и родительских папок, что делает адрес короче, и в случае переезда с одного домена на другой не нужно прописывать новый абсолютный адрес. Но если сторонний ресурс будет ссылаться например, на ваши изображения с относительными адресами, то они не будут отображаться на другом сайте.
3. Якоря
Следующая разметка создаст оглавление с быстрыми переходами на соответствующие разделы:
Если нужно сделать ссылку с одной страницы сайта на определенный раздел другой страницы, то необходимо задать id для этого раздела страницы, а затем добавить его к абсолютному адресу ссылки:
4. Как сделать изображение-ссылку
Рис. 2. Изображение-ссылка
5. Как сделать ссылку на телефонный номер, скайп или адрес электронной почты
У ссылок появились новые возможности — по клику можно не только переходить на другие страницы и скачивать файлы, но и совершать звонки на телефоны, отправлять сообщения или звонить по скайпу.
Что такое заголовок ссылки?
Немногие знакомы с понятием «заголовок ссылки», но будьте уверены, что каждый из вас не раз встречался с ним на просторах Интернета. Поэтому достаточно сказать, что заголовок ссылки есть не что иное, как подсказка, всплывающая после того, как вы наводите курсор мышки на определённую ссылку.
Многим после описанного выше понятия стало ясно, о чём пойдёт речь. И, действительно, большинство уважающих себя ресурсов просто немыслимы без таких заголовков. Ведь именно они проливают свет на то, что скрывается за ссылкой, дают определённый ориентир для того, чтобы мы могли быть уверены в своём выборе.
К тому же повысить рейтинг своего сайта или страницы, используя заголовки, несложно. Достаточно создать гиперссылку по завершении вступительной статьи на главной странице так, чтобы заголовок ссылки предлагал продолжить знакомство с затронутой темой.
Однако стоит остерегаться бессмысленных слов и, соответственно, использовать для заголовков более конкретные, информативные фразы, объясняющие предельно ясно, что скрывается за переходом по данной ссылке.
Предлагаем вам совет профессионалов…
Как бы там ни было, но ссылки пока остаются на первом месте среди удобных способов поиска информации внутри сайтов и в Сети вообще. Поэтому если вы действительно хотите создать безупречный сайт, то подобная технология ни в коем случае не повредит, а только лишь улучшит задуманное.
Сайт сделанные на движке Джамла смотрятся очень хорошо, а много красивых шаблонов joomla templates можно найти здесь. Шаблоны разбиты на разные тематики.
