Как сделать ссылку на заголовок в html
Перейти к содержимому

Как сделать ссылку на заголовок в html

  • автор:

Заголовок-ссылка

Nicolas Chabanovsky's user avatar

Правильно будет сделать так как у Вас. То есть вложить ссылку внутрь заголовка.

Строчный элемент не может содержать в себе блочный. Почитайте спецификацию.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.5.24.43458

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как правильно сделать если заголовок — ссылка ?

GingerbreadMSK

<a href=»#»><h2>Заголовок</h2></a>
Внутрь ссылки Вы можете вложить практически все что угодно, а так же описать любыми стилями, однако использовать внутри тегов h1-h6 что-то отличное от текста — не будет правильным решением (Яндекс спасибо не скажет).

* не рекомендуется вкладывать таблицы в теги «A»

  • Facebook
  • Вконтакте
  • Twitter

kid-programmer

GingerbreadMSK

Далее действует логика: заголовок должен содержать текст (иногда, очень редко, изображение).

Гиперссылка (hyperlink) — главный связующий элемент во всемирной паутине. Фактически он придает любому элементу функциональность (переход на другой документ при нажатии), и не важно что Вы решили в него «завернуть». С точки зрения индексации у ссылки есть много всего: URL, title, alt (если внутри изображение), текст внутри ссылки.

Теперь вернемся к тегам заголовков H1-H6 — индексируется только текст. Следовательно — какой смысл вкладывать в них что-то кроме текста?

GingerbreadMSK

GingerbreadMSK

GingerbreadMSK

GingerbreadMSK

GingerbreadMSK

GingerbreadMSK

GingerbreadMSK

Petroveg

В HTML 5 (читай уже в любом современном браузере) в ссылки можно класть что угодно, и таблицы в том числе. Так что не давайте ссылки на старые обсуждения касательно HTML 4.

Разница между первым и вторым ответами в активной области. Для ссылки внутри заголовки она будет по текстовому содержанию. Для заголовка внутри ссылки — по всей области заголовка. За оба варианта поисковики не погладят по головке.

  • Facebook
  • Вконтакте
  • Twitter

GingerbreadMSK

Petroveg

Если речь про IE 6-й версии, то право не стоит, даже скучно как-то. Привыкайте жить в рамках современных технологий. Нет уже никаких ограничений по размещению любого контента в ссылках (тип контентной модели transparent) www.w3.org/TR/html5/text-level-semantics.html#the-.

логично, что заголовок должен быть заголовком, а не ссылкой. Для ссылок с целью навигации есть семантические элементы типа nav.

Поисковики придираются по очень простой причине — оба элемента используются в механизмах ранжирования.

В данном случае без разницы.

Но если текст предполагает изменения, то надо <a><h2>Заголовок</h2></a> , т.к. проще менять.

  • Facebook
  • Вконтакте
  • Twitter

kid-programmer

  • Facebook
  • Вконтакте
  • Twitter

GingerbreadMSK

Есть инлайновые элементы, а есть блочные. Заголовок блочный, ссылка инлайновый. С точки зрения верстки, стандартов html И css правильно вкладывать в большее меньшее, то есть ссылку в заголовок.

Хоть бы кто-то открыл и почитал спецификации, или хотя бы про инлайновый контекст форматирования.
из аналогий вы положите шарик в коробку, а не на коробку натяните шарик.

А как сейчас обстоит в вашей говноверстке и поисковиках это дело сегодняшнего дня. Нормальных верстальщиков практически не осталось, так что кладите как вам удобно, в любом случае в 90 процентах ваша верстка уже говно!

  • Facebook
  • Вконтакте
  • Twitter

Petroveg

Petroveg

@whats ещё один, спорящий с w3c. В спецификации html5 изменили тип контента для ссылки, но ваш мозг не может это воспринять.

bugo_aneo

  • Facebook
  • Вконтакте
  • Twitter

Специально зарегился чтобы ответить, потому достала тема что нельзя заголоки делать ссылками — не верю!. Про H1 согласен, а вот h2, h3 .. уверен можно делать ссылками (сам результат поиска гугл и яндекс тому подтверждение).
А если надо заголовок сделать ссылкой, то как быть? Проанализировав тот же яндекс и гугл сразу понятно, что по типу <a><h2>Заголовок</h2></a> .
Плюс таким подходом мы соблюдаем рекомендацию не пихать внутрь h. h всякую лишнюю шнягу.

И если проинспектировать через Хром код элемента, наведя на элемент вида <h2><a>Заголовок</a></h2> показывает role — link.
А вот наведя на визуально точно так же оформленый элемент вида <a><h2>Заголовок</h2></a> показывает role — heading.

В результатах поиска гугл если навести на ссылку мы увидим тот же role — heading, а не link, поэтому считаю что логичнее делать так как «Батя» делает, а не как предлагает whats назвав вас и в данном случае сайт Бати гугла говняно сверстаным.

Хотя думаю как сказал Виталий Желтяков — без разницы. При 1-м и 2-м варианте они оба распознаются как Заголовки в инструментах проверки SEO. Да и поисковики не настолько тупые чтобы не понять что внутри ссылки заголовок или ссылка и есть заголовок.

Как сделать ссылку на определенную часть страницы [якорная ссылка 2021].

Проблема, как сделать ссылку на определенную часть страницы, решается незначительным усилием.

Как сделать ссылку на определенную часть страницы: Что такое якорная ссылка.

  1. Что такое якорная ссылка.
  2. Зачем использовать якорную ссылку.
  3. Примеры якорной ссылки.
  4. Как сделать якорную ссылку.
  5. Якорная ссылка FAQ.

1. Что такое якорная ссылка.

  • Определить платформу для будущего блога
  • Выбрать красивое доменное имя
    Продумать дизайн
  • Написать великолепный, вечнозеленый контент
  • Научиться SEO — оптимизации

Используйте скромную якорную ссылку.

2. Зачем использовать якорную ссылку.

Страницы вашего любимого блога могут быть такими же красивыми и привлекательными, как жар — птица, но подавляющее большинство пользователей не хотят тратить минуты на их изучение, анализ и оценку. Грустно? А то! Но.

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

Подумайте также о том, как большинство из нас сегодня пользуются Интернетом. Мы постоянно прокручиваем бессмысленный Twitter [теперь удваиваем усилия благодаря увеличенному количеству знаков].

Бесконечные фотографии миленьких котят и приколы друзей в Facebook, новости и вирусное видео.

Давайте посмотрим правде в глаза; для некоторых большие пальцы могут вскоре стать наиболее тренированными частями их тел.

Если вы делаете «Меню», в начале поста и используете якорную ссылку, для быстрого перемещения, на определенную часть текста, то заслуживаете благодарности тысяч и тысяч.

3. Примеры якорной ссылки.

№1. Переход между страницами.

4. Как сделать якорную ссылку.

№1. Определяем адрес статьи в блоге.

kak-sdelat-yakornuyu-ssylku-postoyannaya-ssylka

№2. Создаем якорь.

  • Меню
  • Навигации внутри страницы
  • Навигации по блогу и переход между страницами

Тогда два якоря будут выглядеть следующим образом:
<a href background-color: #edf4ff;»>» name background-color: #edf4ff; color: blue;»>anchorname1 «></a> <a href background-color: #edf4ff; color: black;»> https://saitsamy.blogspot.com/2019/08/blogger_32.html » name color: blue;»>anchorname2 «></a> Красным цветом выделена постоянная ссылка сообщения, которую скопировали с панели в боковом меню.

Синим цветом выделено индивидуальное имя якоря.

Якоря с одинаковыми именами не приемлемы и как видно в первом случае это: » anchorname1 «, во втором » anchorname2 «. Различие в цифре. Якорей делают сколько необходимо. Лимита нет.

№3. Создаем ссылку.

Меню на два раздела. Понадобится две ссылки. Как выглядят и чем отличаются:
<a href background-color: #edf4ff;»> https://saitsamy.blogspot.com/2019/08/blogger_32.html # anchorname1 «> №2. Создаем якорь </a> <a href background-color: #edf4ff;»> https://saitsamy.blogspot.com/2019/08/blogger_32.html # anchorname2 «> №3. Создаем ссылку </a>
Красным цветом выделена постоянная ссылка нашего сообщения.

Зеленым цветом выделено названия из нашего ‘Меню’.

Синий цвет названий якорей.

Цифры идентичны, как номер якоря с номером ссылки в меню anchorname2 соответствует # anchorname2

Названия могут быть любыми и не совпадать с названиями разделов. Пример приведен для ясности.

Перед словом anchorname стоит значок #.

№4. Расставляем якоря и ссылки по местам.

Меню:
№2.Создаем якорь.
№3.Создаем ссылку.
Еще раз. Это делается для ясности. Когда понимаешь смысл, то к готовому Меню подставляешь атрибуты кода во вкладку HTML.

kak-sdelat-ssylku-na-opredelennuyu-chast-straniczy-1
Первый якорь

Ссылки расставляем вплотную к местам назначения, не обращая внимания на посторонний код.

alt=»kak-sdelat-ssylku-na-opredelennuyu-chast-straniczy-2″ width=»1600″ height=»760″ />
Второй якорь

Теперь определяемся с ссылками и Меню готово.

kak-sdelat-ssylku-na-opredelennuyu-chast-straniczy-3
Ссылки в меню

5. Якорная ссылка FAQ.

№1. Неработающие якорные ссылки.

№2. Не переусердствуйте.

Нет ничего более неприятного, чем сложное меню. В ресторане это мешает вам выбрать то, что вы хотите съесть на ужин.

Точно так же с веб-страницей, если пользователю представлено подавляющее количество ссылок, это может помешать его пути, что замедляет его движение по воронке продаж[если стремитесь к заработку на блоге] и задерживает конверсию.

  • Меню
  • Маркированный список
  • Вплетенный в основной текст, создавая якорный текст

Для тех, у кого толстые пальцы, очень легко нажимать сразу несколько клавиш или, если ссылки расположены слишком близко друг к другу, нажать на неправильную гиперссылку.

Заключение.

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

Но когда вы учитываете намерения людей, которые посещают ваш сайт, вы должны учитывать всех и каждого из них.

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

Как сделать гиперссылку на сайте HTML?

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега , который имеет единственный обязательный атрибут href. В качестве значения используется адрес документа (URL).

Как сделать гиперссылку на веб странице?

Создание гиперссылки на вебстраницу

  1. Выделите текст или рисунок, который должен представлять гиперссылку.
  2. На вкладке Вставка нажмите кнопку Гиперссылка. …
  3. В поле "Вставка гиперссылки" введите или вставьте ссылку в поле "Адрес".

Как сделать ссылку на заголовок в HTML?

Заголовок иногда делают ссылкой на полный текст статьи и чтобы превратить заголовок в ссылку, текст следует поместить внутрь элемента , который в свою очередь располагается внутри

. Здесь ссылкой будет только текст с надписью «Заголовок». В HTML5 допустимо менять элементы местами и разместить

внутри

Как сделать текстовую ссылку?

Выделите мышкой в тексте слово или фразу, которые будут являться ссылкой. Затем нажмите на кнопку «Вставить/ Редактировать ссылку» (она напоминает перевернутую восьмерку со знаком плюс). У вас открылось окно, в которое нужно будет вставить ссылку. Скопируйте адрес той страницы, на которую должна вести ссылка.

Как добавить ссылку на текст?

Ссылка на веб-страницу

  1. Поместите курсор в то место документа, где должна находиться ссылка.
  2. Нажмите CTRL+K, чтобы открыть диалоговое окно Вставка гиперссылки. …
  3. Введите веб-адрес сайта и нажмите клавиши ALT+К, чтобы перейти к полю Текст.
  4. Введите текст ссылки, который должен отображаться в документе. …
  5. Нажмите клавишу ВВОД.

Как превратить ссылку в текст?

Щелкните правой кнопкой мыши в любом месте ссылки и в меню выберите пункт Изменить гиперссылки. В диалоговом окне Изменение гиперссылки выберите текст в поле Текст. Введите текст, который вы хотите использовать для ссылки, и нажмите кнопку ОК.

Как вставить ссылку URL?

Ссылка на веб-страницу

  1. Поместите курсор в то место документа, где должна находиться ссылка.
  2. Нажмите CTRL+K, чтобы открыть диалоговое окно Вставка гиперссылки. …
  3. Введите веб-адрес сайта и нажмите клавиши ALT+К, чтобы перейти к полю Текст.
  4. Введите текст ссылки, который должен отображаться в документе. …
  5. Нажмите клавишу ВВОД.

Что такое браузер Web страница гиперссылка?

Гиперссылки HTML-страницы Гиперссылка — фрагмент HTML-документа и его базовый элемент: указывающий на другой файл, который может быть расположен в Интернете; содержащая полный путь (URL) к этому файлу.

Можно ли вкладывать заголовок в ссылку?

Чтобы заголовок, который создаётся с помощью тега

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

можно вставить внутрь строчного элемента , но в HTML4 и XHTML тег обязан находиться внутри

, но никак не наоборот (пример 1).

Как сделать якорную ссылку HTML?

Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега (пример 9.1). В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.

Как вставить ссылку в тексте?

Ссылка на веб-страницу

  1. Поместите курсор в то место документа, где должна находиться ссылка.
  2. Нажмите CTRL+K, чтобы открыть диалоговое окно Вставка гиперссылки. …
  3. Введите веб-адрес сайта и нажмите клавиши ALT+К, чтобы перейти к полю Текст.
  4. Введите текст ссылки, который должен отображаться в документе. …
  5. Нажмите клавишу ВВОД.

Как сделать текст ссылкой на телефоне?

Чтобы создать ссылку на выделенный текст, выполните следующие действия:

  1. Откройте приложение Chrome на телефоне или планшете Android.
  2. Откройте страницу с текстом, которым вы хотите поделиться.
  3. Чтобы выделить текст, нажмите на него и удерживайте, затем проведите пальцем по тексту.
  4. Нажмите Поделиться Ссылка на текст.

Как вместо ссылки написать что то?

Щелкните правой кнопкой мыши в любом месте ссылки и в меню выберите пункт Изменить гиперссылки. В диалоговом окне Изменение гиперссылки выберите текст в поле Текст. Введите текст, который вы хотите использовать для ссылки, и нажмите кнопку ОК.

Как прикрепить ссылку к слову в тексте?

Ссылка на веб-страницу

  1. Поместите курсор в то место документа, где должна находиться ссылка.
  2. Нажмите CTRL+K, чтобы открыть диалоговое окно Вставка гиперссылки. …
  3. Введите веб-адрес сайта и нажмите клавиши ALT+К, чтобы перейти к полю Текст.
  4. Введите текст ссылки, который должен отображаться в документе. …
  5. Нажмите клавишу ВВОД.

Как правильно вставить ссылку?

Ссылка на веб-страницу

  1. Поместите курсор в то место документа, где должна находиться ссылка.
  2. Нажмите CTRL+K, чтобы открыть диалоговое окно Вставка гиперссылки. …
  3. Введите веб-адрес сайта и нажмите клавиши ALT+К, чтобы перейти к полю Текст.
  4. Введите текст ссылки, который должен отображаться в документе. …
  5. Нажмите клавишу ВВОД.

Как создать ссылку?

Создание гиперссылки на веб-страницу

  1. Выделите текст или рисунок, который должен представлять гиперссылку.
  2. Нажмите CTRL+K. Вы также можете щелкнуть текст или рисунок правой кнопкой мыши и в shortcut menu нажать кнопку Ссылка.
  3. В окне Вставка гиперссылки введите или вставьте ссылку в поле Адрес.

Почему важно создание гиперссылок?

Гиперссылки позволяют осуществить доступ к документам и веб-страницам, связанным с пространственным объектом. Посмотреть их для каждого объекта можно при помощи инструмента Гиперссылка (Hyperlink).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *