Ваш промокод mojWPAds на плагин рекламы для WordPress >>

Делаем удобную навигацию по статье. Якорь и тег A

якорь тег aБольшинство из Вас знает для чего нужен тег <a> - он делает ссылку кликабельной, т.е. он создает ссылку. У данного тега есть несколько параметров, которыми кто-то пользуется, а кто-то нет.
В сегодняшней статье хочу Вам рассказать про один такой параметр, который очень пригодится блогерам, пишущим длинные статьи и любящие их разбивать на логические подпункты. Проще говоря: создадим ссылки внутри статьи на пункты самой статьи, что позволит читателям переходить к нужному пункту сразу, без необходимости прокручивать и искать нужный кусок текста.

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

Тег <a> и параметр name

Вот так выглядит обычная ссылка (внутренняя/внешняя):

<a href="http://mojwp.ru/social-buttons.html">анкор</a>

Чтобы добиться нужного нам эффекта, необходимо сделать следующее:

  • в пронумерованном списке пунктов (например), необходимое словосочетание (анкор) помещаем вот в такой тег <a>
    <a href="#punkt1">анкор</a>
  • Непосредственно пункт помещаем вот в такой тег
    <a name="punkt1">анкор</a>

Обращаю ваше внимание на такой момент: вовсе не обязательно ставить "якорь" на словосочетание. Вы можете проставить пустой тег а в нужное место в статье, т.е. без анкора:

<a name="punkt1"></a>

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

Полностью про возможности тега <a> можно почитать ЗДЕСЬ. Хороший справочник по HTML и CSS (сам пользуюсь иногда).

Привет.

Меня зовут Виталик. Я автор этого блога и Магазина WordPress https://wp-r.ru/.


Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 14 комментариев
  1. Алена says:
    http://mumimama.org

    Спасибо! Взяла на вооружение.

  2. Елена says:
    http://maltzewa.ru/

    когда-то, когда училась писать сайт руками, знала про это))) спасибо, что напомнили))))

  3. seogrot says:
    http://seogrot.com/

    Эх ностальгия... Вспомнил техникум, уже не помню как точно предмет назывался, что-то связанное с web программированием 😉

  4. dimokfm says:
    http://dimokfm.ru/

    Спасибо, Виталий за позновательный, полезный материал. Нужно попробывать сделать жизнь своих читателей удобной 🙂
    Воспользуюсь.

  5. Павел says:
    http://pavgri.blogspot.com

    Отлично! Теперь можно создавать большие статьи с кликабельным содержанием. Очень удобная вещь.

  6. Denis says:
    http://webwmz.ru/

    Якоря - полезная штука. Я их использую, например, на странице терминов на своем блоге.

  7. Женя says:
    http://tut-blog.ru

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

  8. Елена says:
    http://pozitiv11.ru

    А для меня HTML пока темный лес. Делаю первые шаги. В том числе и по вашим статьям учусь.

  9. Александр MaDDogg says:
    http://time-for-android.ru/

    Эх, если бы не моя лень ))
    С Html начал знакомиться ещё 7 лет назад, в итоге до сих пор иногда ошибку делаю в <a target="_blank" href=" )))))

    А вот ссылочки с анкором, очень хорошо на продвижение в поисковиках влияют

  10. Ирина says:
    http://animangalife.ru

    Спасибо! Html не так давно изучаю, для меня эта информация оказалась полезной. А как такие стрелочки сделать? У многих на сайтах заметила их: тоже хочу

    • Виталий says:

      о каких стрелочках идет речь? Не совсем понимаю

      • Павел says:
        http://pavgri.blogspot.com

        Я так понял, что речь идёт о стрелочках возле ссылок.

  11. Надежда says:
    http://kurortcz.ru

    Отличная возможность! У меня иногда длинные статьи получаются, надо попробовать воспользоваться советом, спасибо.

  12. Avtoblog says:
    http://blog-parkovka.ru/

    Полезная статья. Возможно скоро и мне пригодится. Спасибо.

Не держи в себе. Выскажись.

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

© 2011-2017 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 11.69MB | MySQL:111 | 0,230sec
Лучшие плагины для сайта WordPress
Магазин WordPress WP-R.ru
Я понял, не показывай больше.
Смотри мои обучающие видео на YouTube
Сайт использует cookie
Друг, не уходи!