Я корь на странице
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-документа и
присвоить якорю уникальное имя в пределах его страницы.
Имя якоря – это его условный идентификатор, по которому браузер находит якорь на странице. Имя якоря может быть любым. Желательно, оно должно соответствовать тематике страницы и содержать, минимум три символа. Имя якоря может содержать цифры и латинские буквы в любой комбинации. Выбор имени для якоря ничем не ограничивается, кроме одного – оно должно быть уникальным в пределах страницы своего месторасположения.
На одной странице (по одному веб-адресу) не может быть двух якорей с одинаковым именем. Если на одной странице будут находиться якоря с одинаковым именем, то они – либо совсем не будут работать, либо будет открываться только первый из них (это зависит от браузера пользователя).
Но! Якоря с одинаковым именем, расположенные на разных веб-страницах (по разным веб-адресам) – будут прекрасно работать. Например, у меня на всех страницах блога стоит якорь «zaglavie» и отлично работает на каждой странице.
(Более подробно тема изложена в материале «Теория якорного дела»)
Общий вид современного кода якоря в HTML представляет собой конструкцию из любого открывающего тега HTML и его атрибута, задающего уникальное имя (идентификатор) для якоря.
Изначально, для создания пользовательских якорей, в HTML был задуман тег <a> и его атрибут name. Параллельно атрибуту name, у тега <a> существовал атрибут id, который тоже расценивался как якорь на веб-странице. Так они и стали родоначальниками классических якорей – тег <a> и его атрибуты – name и (или) id
Код классического якоря создаётся при помощи тега <a>
При этом – имя якоря (его идентификатор)
задаётся через атрибуты тега <a> – name или id
Таким образом, код классического якоря,
вставляемый в документ HTML будет иметь вид
<a name=»razdel»></a> или <a id=»razdel»></a>
где, слово «razdel» – это произвольное уникальное имя якоря
в пределах страницы его местонахождения.
Правильные якоря бывают видимыми и невидимыми. «Видимым» называется тот якорь, который имеет анкор – видимую часть элемента. Как правило, это текстовая часть. Лично я такими якорями никогда не пользуюсь, поэтому упомянул про них исключительно ради объективности своего обзора.
Код невидимого якоря:
<a name=»razdel»></a> или <a id=»razdel»></a>
Код видимого якоря:
<a name=»razdel»>ТЕКСТ</a> или <a id=»razdel»> ТЕКСТ </a>
где, слово «ТЕКСТ» – видимая часть текста якоря (анкор). Этот текст (анкор) будет «отсвечивать» в месте установки якоря.
И тут возникает вопрос в правильности выбора атрибута.
Какой из них правильней будет использовать – name или id ???
Если работают-то оба ???
Относительно выбора атрибута name или id, то по отношению тега <a> – прекрасно работают оба варианта, поскольку тег <a> отлично поддерживает оба из них. Лично я, долгое время использовал конструкцию вида <p><a name=»razdel«></a></p>, которую вручную вставлял в HTML-код текста непосредственно перед заголовком (тегом <Н>). При этом, якорь красиво открывал страницу сайта в месте его установки, с небольшим пробелом вверху экрана.
Через некоторое время, после очередного обновления своего HTML-редактора, я заметил, что он автоматически заменяет name на id, и везде ставит якоря, вида <a id=»razdel»></a>
Всё понятно. Атрибут (идентификатор) «id» стал более предпочтительным, поскольку он более универсален. Атрибут (идентификатор) «id» легко обрабатывается браузером и поддерживается большинством тегов XHTML и HTML. В то время, когда атрибут name – это очень специфичный атрибут, который поддерживается только тегом <a>. И, если при помощи идентификатора id можно вставить якорь, практически в любой элемент веб-разметки, то при помощи атрибута name можно всунуть якорь только в тег <a>…
Но! С другой стороны – атрибут name, как раз-таки и придуман для создания якорей. При чём, этот атрибут придуман ещё на заре Интернет-времён и поддерживается ещё в древнейшем HTML 3.2. А это значит, что наш дорогой «name» уже присутствует на миллионах веб-страниц и его ещё не скоро отправят на помойку. Просто не смогут!
Таким образом получается что, с точки зрения классики веб-языков и истории создания кода якорей, то – более правильным будет атрибут name. Ну, а с точки зрения удобства, универсальности и прогресса, то, естественно – код правильного якоря должен быть написан через атрибут id и иметь вид: <a id=»razdel»></a>
Но, два раза правильно – так не бывает! Где же истина?
И, как будет более правильно, <a name=»razdel»></a> или <a id=»razdel»></a>?
Истину, как всегда, можно узреть в корне проблемы, задавшись вопросом – «А при чём здесь вообще тег <a>, если атрибут id поддерживают почти все теги HTML?». Если атрибут id имеет такую широкую поддержку, то не проще будет пользоваться именно им? Ведь тогда код якоря значительно упрощается и сводится к виду id=»razdel», который можно установить почти в любой открывающий тег HTML и XHTML!
Атрибут («id») поддерживают теги списков (ul, ol, li, dl, dd, dt), теги таблицы (table, tr, td…), теги блоков и абзацев (div, p) и ещё семь десятков открывающих тегов других элементов HTML. И, во все из них можно вставить или попытаться вставить якорь, при помощи атрибута «id». Делается это достаточно просто – в открывающий тег требемого элемента нужно добавить конструкцию, вида id=»razdel», где, естественно, слово «razdel» – это уникальное имя якоря в пределах его страницы. Если такая конструкция там уже есть, например – она может быть сделана верстальщиком шаблона сайта, значит – ничего делать не нужно. Якорь уже стоит. Надо только запомнить его имя и сделать ссылку на него.
Якорь в заголовке, в списке, в таблице. | (к оглавлению) |
Таким образом, учитывая что код самого простого якоря имеет вид id=»razdel», то код требуемого элемента разметки HTML, с установленным в него якорем, будет выглядеть, примерно так:
для заголовка (h1, h2, h3, h4, h5, h6)
<h1 id=»razdel»>Текст заголовка…
для списка (ul, ol, dl) и его элементов (li, dt, dd)
<ul id=»razdel»>тело списка…
<li id=»razdel»>тело элемента списка…
для элементов таблицы (table, caption, col, colgroup, tbody, td, tfoot, th, thead, tr)
<table id=»razdel»>тело таблицы или её элемента…
… и так далее, и тому подобные конструкции, вида:
<div id=»razdel»> или <p id=»razdel»>
и всё это будут – якоря в открывающих тегах элементов HTML.
(закрывающие теги для элементов, естественно – обязательно)
Прошу прощения за столь вольное обращение с написанием тегов, но я всего лишь хотел подчеркнуть собственное бессилие перед созиданием и проверкой семи десятков почти одинаковых примеров. И так понятно, что код якоря вида id=»razdel» можно вставить, практически в любой открывающий тег HTML. И такой якорь должен работать. Для примера, вся эта статья сделана именно такими якорями.
Ссылка на якорь создаётся при помощи тега <a> и его атрибута href. Ссылка на якорь ничем не отличается от обычной ссылки, с той только разницей, что к адресу веб-документа добавляется решётка (#) и имя якоря. Как и все остальные ссылки на свете, ссылки на якорь могут быть локальными и абсолютными. Локальные – это ссылки на якорь в пределах одного сайта (домена), абсолютные – это ссылки с указанием полного веб-пути к веб-странице и якорю на ней. Как правило, абсолютные ссылки используют для якорей расположенных на других сайтах (доменах). Количество ссылок на один якорь и место расположения этих ссылок ни чем не лимитировано и ни как не ограничено. На один и тот же якорь может быть сколько угодно ссылок, расположенным по всем страницам всех сайтов Интернета.
Все ссылки на якоря можно условно разделить на три группы:
1 группа – Локальные ссылки на якорь,
расположенный в пределах одной страницы
Код ссылки на якорь, расположенный в пределах одной и той же страницы, будет выглядеть так: <a href=»#razdel»>ТЕКСТ ССЫЛКИ</a> где, razdel – это уникальное имя якоря в пределах документа html, а ТЕКСТ ССЫЛКИ – это видимая текстовая часть (анкор) ссылки.
Если якорь и ссылка на него находятся в пределах одной страницы сайта или блога, то полный путь к якорю в ссылке указывать не обязательно, достаточно просто решётки и имени якоря – #razdel. Браузер сам найдёт якорь на странице, причём сделает это гораздо быстрее, нежели в случае с полным указанием абсолютного пути к якорю, когда потребуется перезагрузка страницы.
2 группа – Локальные ссылки на якорь,
расположенный в пределах одного домена (сайта, блога)
Код ссылки на якорь, расположенный на другой странице в том же домене имеет вид: <a href=»/adress-stranici.html#razdel»>ТЕКСТ ССЫЛКИ</a> где, /adress-stranici.html – адрес веб-страницы без указания домена, razdel – уникальное имя якоря, в пределах именно той страницы, где он расположен.
Если якорь и ссылка на него находятся в пределах одного домена (сайта, блога), то имя домена в ссылке указывать не обязательно. Браузер сам отсчитает путь к документу и найдёт якорь на странице
3 группа – Абсолютные ссылки на якорь,
расположенный на другом домене (блоге, сайте)
Если якорь и ссылка на него находятся на страницах разных сайтов с разными доменными именами, то в такой ссылке нужно прописать полный (абсолютный) путь к веб-документу и якорю на нём. Делается это, с указанием протокола (обычно http), домена (доменного имени сайта), полного адреса страницы и уникального имени самого якоря. Код такой ссылки будет выглядеть так:
<a href=»https://tehnopost.info/adress-stranici.html#razdel»>ТЕКСТ ССЫЛКИ</a> где, https://tehnopost.info/adress-stranici.html – полный адрес страницы в Сети, с указанием домена, razdel – уникальное имя якоря, в пределах страницы его местонахождения.
Ссылка с указанием полного пути называется абсолютной ссылкой.
Абсолютные ссылки можно использовать для любых якорей, даже находящихся на одной и той же странице. Абсолютные ссылки наиболее предпочтительны для SEO-оптимизации страницы и сайта, ибо, зачастую – якоря, на которые сделаны абсолютные ссылки – могут быть засчитаны поисковиком за абсолютно разные веб-адреса и тексты. И, даже – якоря, на которые сделаны абсолютные ссылки – могут предлагаться отдельными позициями при выдаче в СЕРП (страницу поисковой выдачи). По крайней мере, у Google такое иногда наблюдается.
Недостаток работы абсолютной ссылки на якорь – полная перезагрузка страницы из сервера. Т.е. переход на якорь происходит с полной перезагрузкой страницы в браузер, даже если якорь и ссылка на него находятся на одной странице. Полная перезагрузка страницы занимает дополнительное время, создаёт дополнительную нагрузку на сетевое подключение, дополнительно жрёт трафик пользователя и самое главное – не работает без подключённого Интернета (в локальном или автономном режиме).
Якорь в HTML | Закладка на веб-странице на tehnopost.info
(продолжение статьи – Зачем на сайте якоря)
- Зачем на сайте якоря
- Теория якорного дела
- Якорь в HTML – как это работает
- Якоря и SEO (поисковая оптимизация)
- Ограничения на количество якорей
- Код якоря и ссылки на него,
способы установки якорей …
Исходный код:
<a href=»#c204″>204</a>
<a href=»#razdel»>ТЕКСТ ССЫЛКИ</a>
<p id=»razdel»><span class=»letter»>Р</span>азумные люди приспосабливаются к окружающему миру.
Неразумные люди приспосабливают мир к себе. <br>Вот почему прогресс определяется
действиями неразумных людей.</p>
<p>Бернард Шоу</p>
<div class=»xyz»>
<span id=»c204″>
204
</span>
Не работает. <br>
Может быть это специфика <br>
сконвертированного<br>
из doc html-файла?<br>
Буду благодарна за помощь<br>
</div>
Пример работы:
204 ТЕКСТ ССЫЛКИ
Разумные люди приспосабливаются к окружающему миру. Неразумные люди приспосабливают мир к себе.
Вот почему прогресс определяется действиями неразумных людей.
Бернард Шоу
204 Не работает.
Может быть это специфика
сконвертированного
из doc html-файла?
Буду благодарна за помощь
Буду благодарна за помощь
Источник
