Я корь на странице
HTML
<!DOCTYPE html>
<html lang=”ru”>
<head>
<meta charset=”utf-8″>
<title>Сайт начинающего верстальщика</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<header>
<p>Блог</p>
<nav>
<a href=”index.html”>На главную</a>
</nav>
</header>
<main>
<article>
<h1>День тринадцатый. Нашёл статью</h1>
<p>Решил, что полезно будет.</p>
<h2>Зачем нужны заголовки?</h2>
<!– Добавьте идентификатор content этому заголовку –>
<h3>Оглавление</h3>
<ul>
<li>
<!– Добавьте адрес #intro этой ссылке –>
<a>Введение</a>
</li>
<li><a>Заголовки и неявные секции</a></li>
<li><a>Тег section</a></li>
<li><a>Уровни заголовков</a></li>
<li><a>Не всё так просто</a></li>
</ul>
<article>
<!– Добавьте идентификатор intro этому заголовку –>
<h3>Введение</h3>
<p>Когда много лет назад придумали HTML, мир был совсем другим. Авторы спецификации вдохновлялись текстовыми документами, где в одном потоке подряд шли абзацы, списки, таблицы, картинки и конечно заголовки. Прямо как в ваших рефератах и курсовых: самый большой заголовок — название, заголовки поменьше — части или главы.</p>
<h3>Заголовки и неявные секции</h3>
<p>В HTML с тех пор шесть уровней заголовков: от h1 до h6. Они озаглавливают всё, что за ними следует и образуют, так называемые, неявные секции. Такие логические части страницы. Неявные они потому, что закрываются только когда появляется следующий заголовок.</p>
<pre><code><h1>Еда</h1>
<h2>Фрукты</h2>
<p>Классные</p>
<h3>Яблоки</h3>
<p>Вообще</p></code></pre>
<p>Из-за такой системы неявных секций, спецификация настойчиво рекомендует не использовать элементы h* для подписей под заголовками. Это обычный параграф, а заголовок должен обозначать отдельную часть содержимого. В спецификации есть глава с примерами разметки сложных элементов: подписи, крошки, диалоги — почитайте.</p>
<h3>Тег section</h3>
<p>Но секции лучше задавать явно с помощью элемента section. Эти два фрагмента идентичны с точки зрения семантики, но этот гораздо понятнее, хоть и многословнее.</p>
<pre><code><h1>Еда</h1>
<section>
<h2>Фрукты</h2>
<p>Классные</p>
<section>
<h3>Яблоки</h3>
<p>Вообще</p>
</section>
</section></code></pre>
<h3>Уровни заголовков</h3>
<p>Ладно! Раз у нас есть явные секции, то по вложенности легко определить отношение частей. Так может браузеры сами догадаются какого уровня заголовки нужны? А то считать: h1, h2, аш… сбился. Так было бы удобнее менять части кода местами. Такая же идея пришла в голову авторам HTML5 и они описали в спецификации алгоритм аутлайна. Он разрешает использовать на странице только h1, а важность обозначать вложенностью структурных элементов вроде article и section.</p>
<pre><code><h1>Еда</h1>
<section>
<h1>Фрукты</h1>
<section>
<h1>Яблоки</h1>
</section>
</section></code></pre>
<p>Разработчикам идея очень понравилась, многие даже бросились её внедрять. Но вот беда: алгоритм аутлайна до сих не внедрил ни один браузер, читалка или поисковик. На таких страницах все заголовки кричат, что они №1 и самые важные. Но если важно всё, то уже ничего не важно.</p>
<p>Не надо так делать, об этом теперь пишет сама спецификация. За уровнем заголовков нужно следить самим. На самом деле, это не так сложно: на типичной странице вряд ли наберётся структурных частей больше, чем на 3 уровня. Так что не ленитесь.</p>
<h3>Не всё так просто</h3>
<p>Нет, погоди. Я ставлю класс на div и все сразу видят — это самый большой заголовок, ставлю другой класс — заголовок становится меньше, видно же. Зачем тогда эта ерунда с расчётом уровней, если есть CSS?</p>
<pre><code><div class=”big-black”>
Фрукты бесплатно
</div>
<div class=”small-grey”>
Только за деньги
</div></code></pre>
<p>Вы конечно правы, стили создают визуальную модель важности: крупный чёрный текст важнее, меленький серенький вообще не важен. Но только если вы смотрите на такую страницу.</p>
<p>Есть две важные группы пользователей, которые читают вашу страницу по тегам разметки. Они не смотрят насколько крупный и чёрный ваш div — чтобы найти на странице самое важное, они ищут h1. Это читалки и роботы. С роботами всё понятно: это поисковики, которым нужно помогать понимать ваши страницы.</p>
<p>Читалками или скринридерами пользуются люди, которые плохо или совсем не видят ваши интерфейсы, или не могут управлять браузером привычным образом. VoiceOver, NVDA, JAWS читают содержимое вслух и ориентируются только по значимым тегам. Элементы div и span не значат ни-че-го, какие бы классы и стили вы не накрутили. Такой сайт — как газета без заголовков, просто месиво текста.</p>
<p>Да какая газета! Очнись, 2017 на дворе, я изоморфное одностраничное приложение делаю, а не стенгазету. У меня тут стейты компонентов — нафига семантика там, где нет текста? Очень хороший вопрос.</p>
<p>Все читалки идут по странице тег за тегом, от первого к последнему. И читают подряд всё, что внутри. Крайне неэффективно: каждая страница начинается с шапки и пока её пройдёшь, забудешь за чем шёл. Поэтому у читалок есть специальные режимы, показывающие только важные части страницы. Структурные элементы header, nav, main и другие, все ссылки, все заголовки.</p>
<p>Если вывести все заголовки и прочитать их, можно составить ментальную, а не визуальную модель страницы. А потом взять и сразу перейти к нужной секции, выбрав её заголовок. Меню, поиск, каталог, настройки, логин — все эти части вашего приложения можно озаглавить, чтобы упростить доступ к ним.</p>
<pre><code>— Инстаграм
— Лента
— Закат
— Латте
— Настройки
— Профиль</code></pre>
<p>Но бывает, что в дизайне нет заголовков для важных частей. Дизайнер рисует, ему всё ясно: меню с котлетой, поиск с полем и так далее. Но это не должно мешать вам делать доступные интерфейсы. Расставьте нужные заголовки, а потом доступно их спрячьте. Как? Только не display: none, его читалки игнорируют. Есть такой паттерн visually hidden, подробнее в описании к видео.</p>
<p>Думайте не только о том, как выглядит ваша вёрстка, но и о том, насколько логично организована разметка. Не забывайте о заголовках: пусть стили показывают, а заголовки рассказывают о ваших страницах или приложениях.</p>
<p>
<!– Добавьте адрес #content этой ссылке –>
<a>К оглавлению</a>
</p>
</article>
</article>
<aside>
Тут могла быть ваша реклама
</aside>
</main>
<footer>
Подвал сайта
</footer>
</body>
</html>
Источник
Якорь в HTML | Закладка на веб-странице
Якорь в HTML – закладка на веб-странице, открывающая документ в месте установки якоря после перехода по ссылке на него.
По-умолчанию, html-документ открывается со своего начала. Чтобы направить пользователя в заданное место html-страницы, там устанавливают html-якорь и делают ссылку на него. Переход по ссылке на html-якорь откроет страничку сайта (блога) ИМЕННО в месте установки якорька. Якорь в html используется для целевого направления юзера сайта (читателя блога) в конкретное место веб-страницы, например – посредством создания меню-оглавления статьи со ссылками на расставленные в тексте якоря.
Сия статья сделана исключительно закладками-якорями. В ключевые разделы и заголовки текста установлены якори, а пункты меню оглавления – выступают ссылками на них. Кликая по ссылкам в оглавлении статьи, юзер посещает места установки якорей – требуемые разделы тела текста статьи. Перемещаясь по закладкам сего веб-документа легко понять назначение, устройство и принцип работы html-якорей
- Создать (установить) якорь
- Якорь «name»
- Якорь «id»
- Ссылка на якорь
- Покрасить якорь
- Якорь на картинку
Создать (установить) якорь
Создать (установить) якорь на веб-странице – вставить в html-документ код якоря с уникальным его именем в пределах устанавливаемой страницы. Уникальное имя якоря содержит минимум три латинских символа в любой комбинации, с добавлением (при желании) цифирь, дефиса («знак минус») и нижнего подчеркивания. Пробелы и служебные символы (“,/><[]{}) в написании якорного имени не приветствуются. Количество якорей на веб-странице не ограничено, якоря с одинаковым именем – не работают. Различают якорь-«name» и «id»-якорь.
Якорь «name»
Код якоря «name» создается присутствием устаревшего и безобиднейшего атрибута «name» в теге «a». Код якоря устанавливается непосредственно в оформляемый элемент текста статьи-контента веб-страницы:
<a name=”уникальное_имя_якоря”> видимая часть текста </a>
Якорь «name» прост и безопасен в обращении, а потому – используется большинством журналистов-литераторов. Код якоря снова и опять поддерживается любимым сайтовым текстовым редактором TinyMCE. Абсолютная ссылка на якорь прекрасно индексируется поисковыми системами, при наличии уникальности видимой части ссылки и якоря.
Установка якоря «name» не требует особого познания HTML и делается в один клик текстового редактора TinyMCE (кнопка «Вставить якорь»). Якорь устанавливается курсором в любом месте текстовой части веб-страницы без тяжелых последствий для работы её шаблона.
Размеры name-якоря на экране монитора определяются видимой частью текста. При отсутствии буквей и цифрей наполнения видимой части – высота и ширина установленного якоречка равны нолю (невидимый якорь).
Судьба атрибута «name» в HTML сложна и полна противоречий. Долгие и нудные попытки отказаться от целенаправленного безопасного якоря-name в пользу распрекрасного универсального якоря-id ни к чему хорошему не привели. Якорь «name» остается любимым и безопасным инструментом веб-мастеров, не смотря на древность сюжета. Якорь-name рулит простым юзерам.
Якорь «id»
Якорь «id» создается присутствием универсального идентификатора – атрибута «id» в коде блочного элемента html-разметки веб-страницы:
<div id=”имя_якоря”> видимая часть </div>
Код «id»-якоря устанавливается исключительно редактированием исходного html-кода статьи-контента веб-документа или шаблона сайта (блога). Видимая часть, открывающий и закрывающий теги – обязательны! При необходимости, тег «div» – заменить на требуемый, вида <p> (абзац), <h4> (заголовок), <ol>, <ul> (списки), <table> (таблица) примерно так:
<table id=”имя_якоря”> тело таблицы …
<ol id=”имя_якоря”> нумерованный список …
<р id=”имя_якоря”> текст, абзац </р>
</Не забить на закрывающие теги!>
Без видимой части, якорь-«id» работает в браузере исправно. Однако, зачем на странице пустой абзац, список или заголовок – поисковикам понять не суждено.
HTML5, вместо устаревшего атрибута name – требует для якоря атрибут id. Использование универсального идентификатора атрибута id рекомендовано к применению опытным веб-мастерам (администраторам ресурса) и совершенно противопоказано рядовым сайто-литераторам многопользовательских сайтов. Ибо, нет лучше и проще способа сковырнуть работу шаблона страницы, чем указать в id-имени якоря имя существующего идентификатора id из шаблона разметки веб-документа. Отличный результат гарантирован. Два «id» с одним именем не работают! Замечательные сайтовые грабли! За сим, несмотря на старомодность и не совсем валидность, атрибут name рулит на многопользовательских сайтах в любом блочном элементе и классно индексируется поисковиками:
<h4><a name=”yakor”>Якорь</a></h4>
Редактор TinyMCE пропускает якорь «name» исключительно в невидимом состоянии и превращает верхнюю строчку в вид:
Принципиально, в «id»-якоре использовано свойство браузера выполнять навешенный код при переходе на «id». Прицепив кусок CSS-стиля к «id»-якорьку, раскрасить открываемую железяку не составит труда. Якорь «name» не красится в TinyMCE. Вариантов покраски якоряменять
Покрасить якорь
Покрасим открытый якорь, используя псевдокласс CSS «target», изменяющий стиль открываемого элемента. Переход на якорь, клик по ссылке >>> Покрасить якорь откроет текст акоря в новом виде, с красной заливкой. Уместно собственное форматирование CSS-стилей.
Текст крашенного открытого якоря красным (red) фоном отсвечивает пользователю, пока он находится по адресу якоря «#red».
Код открываемого крашенного якорька (соблюдать пробелы):
CSS
<style>
.red:target { background: red; } /* (red) фон открытого якоря */
</style>
HTML
<p id=”red” class=”red”>Текст абзаца с красным (red) фоном, после открытия якоря</p>
Код с тегом «а» не пропускает текстовый редактор движка, TinyMCE. Теги span, div и абзац (р) работают прекрасно. Зачем такие крайности? Например, якоря ведут на рядом стоящие слова. Соответственно, переходы открывают, практически одно и тоже место страницы. Покрасить – понятнее и точнее смысл перехода.
Ссылка на якорь
Ссылка на якорь создаётся присутствием атрибута href в теге «a». В ссылке на якорь, к адресу веб-документа с якорем добавляется решётка # + имя якоря. Подобно сородичам, ссылка на якорь бывает абсолютной и относительной. Абсолютная ссылка работает везде, относительная – в пределах родного сайта или страницы, в зависимости от указанного пути. Абсолютные ссылки используют для якорей расположенных на других страницах (сайтах, доменах). Количество и место расположения абсолютных ссылок на якорь не ограничено. Переход на якорь по абсолютной ссылке происходит с перезагрузкой веб-страницы в браузере. Использование абсолютной ссылки на одной странице с якорем не желательно – не экономно расходуется трафик и время открытия якоря. Пользователь обидится и уйдет.
Относительная ссылка, в пределах веб-страницы
<a href=”#razdel”>ТЕКСТ ССЫЛКИ</a>
где, razdel – уникальное имя якоря в пределах html-документа, а ТЕКСТ ССЫЛКИ – видимая текстовая часть (анкор). Якорь и ссылка на него находятся в пределах страницы сайта (блога). Полный путь к якорю в ссылке указать не обязательно, достаточно решётки и имени якоря. Браузер автоматом найдёт якорь на странице
Абсолютная ссылка на якорь, установленный на другой странице или домене
<a href=”https://tehnopost.info/adress-stranici.html#razdel”>ТЕКСТ ССЫЛКИ</a>
Якорь и ссылка на него находятся на разных страницах, сайтах, доменных именах (варианты). Абсолютная ссылка на якорь содержт полный путь (с указанием протокола, домена и т.д.) к веб-странице + решетка + имя якоря.
Ссылка с указанием полного пути называется абсолютной ссылкой.
Абсолютные ссылки можно использовать для любых якорей, даже находящихся на одной и той же странице. Абсолютные ссылки наиболее предпочтительны для SEO-оптимизации страницы и сайта, ибо, зачастую – якоря, на которые сделаны абсолютные ссылки – могут быть засчитаны поисковиком за абсолютно разные веб-адреса и тексты. И, даже – якоря, на которые сделаны абсолютные ссылки – могут предлагаться отдельными позициями при выдаче в СЕРП (страницу поисковой выдачи). По крайней мере, у Google такое иногда наблюдается.
Недостаток работы абсолютной ссылки на якорь – полная перезагрузка страницы из сервера. Т.е. переход на якорь происходит с полной перезагрузкой страницы в браузер, даже если якорь и ссылка на него находятся на одной странице. Полная перезагрузка страницы занимает дополнительное время, создаёт дополнительную нагрузку на сетевое подключение, дополнительно жрёт трафик пользователя и самое главное – не работает без подключённого Интернета (в локальном или автономном режиме).
Якоря на сайте нужны, чтобы направить пользователя СРАЗУ в заданное конкретное место веб-страницы и избавить бедолагу от ненужного листания и просмотра всего материала. При переходе по такой «заякореннной» ссылке – браузер сам автоматически прокрутит веб-страницу ИМЕННО до того места, где этот якорь установлен.
Назначение якоря на сайте
Якоря на сайте – это условные метки на его страницах, которые имеют только одно назначение – наметить и обозначить условные места или границы для будущих действий, событий или сценарев. Иными словами, если где-то на поле веб-страницы установлен якорь, то в этом месте – должно что-либо произойти или состояться.
Из самых известных событий и проишествий на сайте, для которых могут понадобиться якоря – это отработка CSS-кода и Java-сценариев, а также автоматическое листание (скроллинг) браузером веб-страницы. О последнем событии и пойдёт речь в этой статье.
Зачем на сайте якоря
(вернуться к оглавлению)
Так уж устроены все веб-браузеры во всём мире, что абсолютно любой веб-документ они открывают, как новую книгу – исключительно! и только! со своего начала. Далее, каждый пользователь веб-ресурса должен сам листать и «скроллить» свою интернет-страничку. Происходит такое листание при помощи нехитрых приспособлений – клавиш, колёсика мышки, специальных боковых кнопок или простого и банального ёрзанья пальцем по экрану (при условии конечно, что этот экран сенсорный).
При последовательном чтении материала, простое перемещение по полю веб-страницы редко когда вызывает затруднение. Однако, если пользователю нужно пропустить участок незнакомого или ненужного ему текста то, почти всегда – такое листание и прокручивание страницы отнимает время и ужасно нервирует. Особенно, это заметно при целевом перенаправлении юзера в другую тему, расположенную на другой странице и, тем более – на другом сайте.
Чтобы направить пользователя СРАЗУ в заданное конкретное место веб-страницы и избавить бедолагу от ненужного листания и просмотра всего материала – в HTML используют якорь и ссылку на этот якорь. При переходе по такой «заякореннной» ссылке – браузер сам автоматически прокрутит веб-страницу ИМЕННО до того места, где этот якорь установлен. Пользователь будет спасён. Наступит всеобщий «тип-топ» и обильный «OK!».
Подведём-же теперь итоги и ответим на главный вопрос этой темы – зачем на сайте якоря:
– Якоря на сайте (в HTML) используются для целевого перенаправления пользователя в нужное место веб-страницы. Такое перенаправление может понадобиться в рекламных целях, или просто – по желанию другого пользователя. Например, если нужно сделать интерактивное меню-оглавление для большой статьи, типа как в настоящей статье.
Теория якорного дела
(вернуться к оглавлению)
Если коротко, то якорь в тексте веб-страницы и ссылка на этот якорь – это два различных и независимых элемента веб-разметки HTML, которые создаются при помощи одного и того-же тега – тега «а». Только атрибуты у этого тега используются разные. Атрибут «href» – для ссылки, атрибуты «name» и «id» – для якоря
При этом, атрибут «href» служит для создания параметров ссылки и задаёт путь (url), по которому отправится браузер после клика, сделанного по созданной ссылке. В свою очередь, атрибуты «name» и «id» создают идентификаторы для завершения этого пути в пределах веб-страницы, по которым браузер, собственно и находит «заякоренный текст» и которые, по сути своей и являются якорями – главной темой для этой статьи.
Общий вид конструкции кода ссылки выглядит так:
<a href=”URL”>текст ссылки</a>
в то время, когда код якоря имеет вид
<a name=”имя якоря”>текст якоря</a>, или
<a id=”идентификатор якоря”>текст якоря</a>
Якорь в HTML – как это работает
(вернуться к оглавлению)
Якорь – он якорь и есть.
Уже одно только слово «якорь» говорит о фиксации чего-либо.
В разметке HTML, якорь используется для фиксации места после открывания веб-страницы. В этом и проявляется главное назначение якоря в HTML – указать, наметить, «заякорить» точку на поле веб-страницы для последующего перехода к ней браузера пользователя после отрытия веб-страницы. В задачу якоря входит продолжение и дополнение действия обычной ссылки после открывания веб-страницы. При переходе по ссылке с якорем, браузер не просто откроет веб-страницу, а будет прокручивать и листать её до места установки якоря. Если, конечно этот якорь был предварительно установлен.
Технически, такой эффект вертикального прокручивания (скроллинга) при открывании веб-документа обеспечивается браузером после обработки им служебного символа «#» – решетки (без кавычек). Находясь в тексте ссылки, этот символ (#) делит её на две части, которые будут обработаны браузером последовательно и независимо друг от друга.
Это очень важно, что две части ссылки обрабатываются браузером раздельно и независимо. Рассмотрим на примере. Вот текст ссылки на веб-страницу с якорем, установленным на ней:
https://tehnopost.info/10-yakor-ankor-na-veb-stranice.html#zachem_nuzhnyi_yakorya
Как видим, служебный символ #, установленный после окончания .html делит ссылку на две части, которые и будут обработаны отдельно друг от друга. При этом произойдет следующее:
- Сначала браузер обработает первую часть ссылки, до #. При этом, он найдёт веб-страницу в Интернете по указанному пути, скачает её код и отрисует веб-страницу на экране монитора.
- Потом браузер обработает вторую часть ссылки, после #. При этом он будет читать полученный код страницы в поисках кода якоря – «zachem_nuzhnyi_yakorya».
- Дальше будет так: Если браузер найдёт код якоря в полученном коде страницы – он пролистает её и откроет в месте установки кода якоря. Если нет – страница останется открытой, как и была – с самого своего начала.
Это и есть наше замечательное умозаключение:
Если якоря на странице нет, а ссылка на него есть – то такая веб-страница откроется всё равно. Просто она останется открытой с самого своего начала и браузер не будет ее прокручивать и листать. А куда крутить-то, ведь крутить-то некуда. Якорь-то не найден. Но страница – уже открыта в браузере и отрисована.на экране монитора. Там она и останется, пока пользователь не закроет её.
И это важно для SEO – поисковой оптимизации сайта
Якоря и SEO (поисковая оптимизация)
(вернуться к оглавлению)
Наличие якорей в тексте – очень актуально для больших статей и повышает общее ранжирование текста страницы у поисковиков, для которых, наличие якорей на странице – это один признаков, отличающих её от “портянки” (текста без форматирования).
Переход по ссылке на якорь фиксируется многими следящими (наблюдающими) системами, как поведенческий фактор. Ведь такой переход – это целевое направление пользователя, облегчающее его Интернет-жизнь. Стало быть, такой подход к разметке html-документа повышает юзабилити (удобство использования) ресурса, ибо скорость навигации по нём возрастает в разы.
- Если якорей на странице много, то их можно просто нумеровать, придумав имя по теме статьи. Например, razdel1, razdel2, razdel3, и т.д.
- Очень часто якорь делают невидимым и «АНКОР ЯКОРЯ» просто не указывают. В этом случае, анкор почти любой ссылки на такой якорь будет «в масть» для поискового продвижения страницы.
- Если якорь видимый и «АНКОР ЯКОРЯ» указан, то с точки зрения SEO-оптимизации, анкоры (видимые части текста) якоря и ссылки на него должны, если не совпадать, то хотя-бы быть близкими по смыслу.
В основном – здесь проблемы с SEO. Однако, замечено, что если якорь на странице установлен, а ссылки на него нет – это не будет ошибкой. Равно как не будет считаться ошибкой ссылка на несуществующий якорь. В этом случае, поисковиком будет засчитываться, просто ссылка на страницу, а браузером – эта страница открываться
Якоря и верстальщики
Верстальщики очень часто используют в своей работе якоря. При чём, верстальщики невероятно любят локальные якоря – якоря в пределах домена. Такими якорями делается верстка простых менюшек. Преимущество – увеличении скорости навигации и возможность работа в не Сети.
Ограничения на количество якорей
(вернуться к оглавлению)
Не последним вопросом при установке якорей на странице, обстоит дело с их предельныи количеством. Есть-ли вообще какие-либо ограничения на количество якорей, расположенных на одной веб-странице?
Ответ, более чем прост – ограничения на количество якорей нет и быть не может. Поисковики относят якоря к обычным элементам управления (как кнопки), на количество которых ограничения накладывает только здравый смысл. Поэтому, якорей на веб-странице может быть сколько угодно. Если пользователю это нравится, то он может на каждое слово или букву – установить отдельный якорь.
Интернетчик: HTML, сайт, тег, интернет
Источник