Как сделать оглавление в html

Меню с плавной прокруткой страницы

var linkNav = document.querySelectorAll('[href^="#nav"]'), V = 2; // скорость, может иметь дробное значение через точку for (var i = 0; i < linkNav.length; i++) < linkNav[i].onclick = function()< var w = window.pageYOffset, hash = this.href.replace(/[^#]*(.*)/, '$1'); t = document.querySelector(hash).getBoundingClientRect().top, start = null; requestAnimationFrame(step); function step(time) < if (start === null) start = time; var progress = time - start, r = (t < 0 ? Math.max(w - progress/V, w + t) : Math.min(w + progress/V, w + t)); window.scrollTo(0,r); if (r != w + t) else > return false; > >

Для пользователей Blogger

Если использовать вкладку «Создать» при редактировании Сообщения, Blogger относительные ссылки вида

заменяет на абсолютные

Чтобы избежать проблем, следует использовать абсолютные ссылки вида (текущая страница + хэш)

24 комментария:

Александр Нужная информация. Попробую использовать NMitra Хорошо, разовью тему в следующем посте. Анонимный Наталья, спасибо.

Скажите, пожалуйста, вы знаете как сделать так, чтобы страница не быстро перескакивала к целевому заголовку, а плавно (эластично) прокручивалась? (Я имею ввиду последний пример поста) NMitra Я поняла что вы имеете ввиду. Тоже об этом думала. Если у вас подключен JQuery, то http://stackoverflow.com/questions/7717527/jquery-smooth-scrolling-when-clicking-an-anchor-link

Если нужен только JavaScript, то отпишитесь, но код там получается не маленьким. Анонимный Наталья, спасибо за отклик.

Чтобы работал JQuery, надо подключать его библиотеки.

А код в этих библиотеках тоже не маленький.

С другой стороны, может не стоит изобретать велосипед. Но я читал, что jQuery не такой скоростной.

Может, самописный код будет шустрее. NMitra Я считаю, что подключать jQuery стоит если нужно несколько функций из библиотеки. Ради одной вешать весь арсенал не стоит. Я подумаю над скриптом. NMitra Сделала, есть замечания http://shpargalkablog.ru/2014/03/table-of-contents-html5.html#scroll ? NMitra А то уже и код, и результат примелькался, могла что-то упустить. Vegan Boom Сделала нумерованное оглавление внутри статьи блога http://veganboom.blogspot.com/2013/11/vegan-questions.html, но нумерация почему-то не отражается в оглавлении поста, хотя при редактировании сообщения вижу, что номера проставлены.

И второе. Поскольку у меня меню сверху закрывает начало заголовка закладки, то решила добавить css стиль, как вы советуете здесь http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#zdes. Выставила там height: 3em; margin-top: -3em;
Почти нормально, но всё-таки как-то по-разному везде отступы отображаются (где-то есть пространство над заголовком, где-то заголовок чуть ли не обрезан). Подскажите, пожалуйста, что надо подправить, чтобы ссылка на закладку вела точно к началу соответствующего названия и чтобы моё главное меню не перекрывало это название. NMitra У вас в шаблоне прописано
ol, ul list-style: outside none none;
>
Сделайте приблизительно так
.toc ol list-style: decimal;
>

Пощелкала, проблем не увидела, вот только из-за скрипта у вас при переходе по хэш ссылке страница перезагружается. Надежда Хачатурова Очень помог Ваш материал. Не мудрствуя, сделала, чтобы было удобно на длинной странице переходить к нужному месту. Спасибо большое! NMitra Хочу материал дополнить парой ссылок, но как правило самое простое — самое востребованное. К тому же и Гугл, и Яндекс стараются учитывать такие меню в сниппетах. Анонимный Ссылки не открываются. Печалька((. Прошу посмотрите как сделано здесь http://html5.by/blog/scroll-effects/ . Особенно интересно эффект 8. Staging (Сцена). Если можно ознакомьте. Спасибо
NMitra Какие именно ссылки не открываются?
Спасибо, прочитала. Анонимный Сейчас ссылки все работают. Почему-то раньше на работали и выдавали ошибку. Тимур тим Не хватает кнопки чтоб вернутьс яна верх NMitra

http://shpargalkablog.ru/2011/05/kak-sdelat-ssylku-k-nachalu-stranitsy.html Alex ZaJW Здравствуйте! Полезная информация. Но Вы показали здесь не все пункты.
Содержание:
steer»>Бычок
bunny»>Зайка
bear»>Мишка

Подскажите, пожалуйста, а как выделять (id) 4, 5. и до 10 пункта содержание? NMitra Здравствуйте, по аналогии: присваиваете id (не должен повторяться на странице) заголовкам, а потом ссылки на них ставите с #id

Наверно лучше всего вам посмотреть исходный код страницы: в адресную строку браузера введите

Как сделать оглавление (содержание, меню) для статьи на сайте

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Решил написать совсем маленький пост на тему создания оглавления для статьи, если она получилась большой или вы ожидаете заходы пользователей с несколько различными интересами. В этом случае краткое содержание и возможность перейти сразу к нужному фрагменты статьи на вашем сайте может оказаться полезным, как мне кажется.

Я опишу тот вариант, который используется у меня на блоге, ну, а вы вольны будете его адаптировать под свои запросы. Все базируется на обычных Html тегах и CSS свойствах, но если вы не знаете этих языков разметки, то просто можете скопировать мой вариант, а потом потихоньку осваиваться с основами языка по учебнику Html и полистать мой справочник по CSS.

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

Для чего и как можно создать оглавление статьи в Html

Выводить содержание (оглавление) в статье, лично мне, приходит в голову не всегда, а только в тех случаях, когда это кажется оправданным. Например, в недавней публикации про вечные ссылки в Гогетлинксе такое оглавление присутствует, ибо в этой бирже можно зарабатывать, а можно и заниматься продвижением, т.е. тратить деньги.

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

В некоторых же моих публикациях присутствует просто очень много информации, и не сделать вначале содержание будет преступлением перед пользователем, который, надеясь на небольшой по размерам, но содержательный пост, увязнет в чудовищных размерах «портянке» с кучей пространных рассуждений и не нужных ему объяснений.

Примером может служить материал про поисковую систему Яндекса и все с ней связанное.

Реализовано это все при помощи нумерованных Html списков OL, для которых прописано еще и несколько строк CSS кода в отдельном файлике. Так же используются так называемые якоря для гиперссылок, которые создают в статье тем места, куда будут вести пункты оглавления.

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

В атрибуте name прописывается уникальная для этой статьи метка. Однако сейчас такой метод вставки якорей считается невалидным (нежелательным) и в качестве якорей предлагается использовать значения атрибута ID, который можно будет прописать, например, в тегах H1-H6 тех самых промежуточных заголовков в статье.

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

Давайте для примера рассмотрим статью про Гогетлинкс, где первый подзаголовок выглядит в коде примерно так:

У меня это теги H3, хотя по логике должны быть H2 (ступил на начальном этапе создания блога, а сейчас переделывать уже не вижу особого смысла, да и опасаюсь, ибо поисковики и их действия не всегда идут в ногу с обычной человеческой логикой). Вот.

Как видите, там у меня стоит уникальный идентификатор ID с уникальным для этой статьи значением ggl. Для наглядности приведу код и второго подзаголовка:

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

Метки, которые вы указываете в ID, должны быть написаны на латинице и без пробелов, кроме этого их лучше всего не начинать с цифры, хотя последнее, возможно, критично только при прописывании для них CSS свойств через селекторы. Но на всякой случай.

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

Ну вот, самое сложно сделали, теперь можно и, собственно, оглавление добавлять. В нашем примере оно будет выглядеть так:

Гиперссылки все ведут на одну и ту же страницу, где и расположена эта статья, но в конце у них через решетку (# — ее иногда называют хеш) стоит уникальная метка, каждая из которых ведет на свой якорь.

В принципе, можно было бы вместо этого написать более коротко:

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

Но проблема заключается в том, что данное оглавление будет выводиться и на главной (а у кого-то и в рубриках, тегах или других архивах), а там уже такие ссылки никуда не приведут. Поэтому оставляем первый вариант с полными Урлами.

Оформляем содержание статьи с помощью CSS свойств

Все, теперь только остается прописать CSS свойства для селектора класса ogl и дело в шляпе. Обычно, все стили выносятся в отдельный файл или несколько файлов. В случае Вордпресс он живет в папке с используемой темой:

/wp-content/themes/название темы/style.css

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

Чтобы получить такой же вид оглавления (содержания) для статьи как у меня, достаточно будет добавить в него эту строчку кода:

Разберем по порядку CSS свойства:

1. float:right — делает блок с оглавлением плавающим и заставляет его прижаться к правому краю (подробнее читайте в статье про инструменты блочной верстки Float и clear
2. border:1px dotted black — задает рамку по всем сторонам блока шириной в один пиксел, нарисованную прерывистой линией черного цвета. Про рамки и упомянутые чуть ниже отступы читайте в статье — Задаем в CSS внутренние (Padding) и внешние (Margin) отступы, а так же рамки (Border)
3. padding:5px 5px 0 5px — задаются отступы в 5 пикселей от верхнего, правого и левого края рамки до заключенного в нее текста (пунктов списка).
4. margin:5px — отступы в пять пикселей от внешнего края рамки оглавления до соседних элементов

Кроме этого вы вольны будете добавить сюда и отдельную настройку для шрифтов с помощью свойства Font (Weight, Family, Size, Style) или еще что-то, но лично мне показалось и этого достаточно.

Для того, чтобы экспериментировать с оформлением, можно будет, не залезая в файл style.css, поиграться со стилями, прописав их прямо в Html коде с помощью атрибута style, а уже потом перенести окончательный вариант в отдельный стилевой файлик. Выглядеть это будет примерно так:

Вообще, стили CSS можно подключать к Html через style тремя способами, описанными в публикации по приведенной ссылке. Предпочтительнее всего внешний файл, но на этапе отладки и другие вполне подойдут.

P.S. Недавно добавил еще и слово «Оглавление», чтобы было понятнее, что это такое. Понятное дело, что для шести сотен статей делать это вручную было бы весьма утомительно, поэтому использовал богатый инструментарий CSS, а именно псевдоэлемент before. В файле СSS была добавлена соответствующая строчка:

.ogl:before

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

• �� Binance — лучшая криптобиржа в мире
• �� Эксмо — лучшая криптобиржа в рунете
• ⛏ ВоркЗилла — удаленная работа для всех
• �� Etxt — платят за написание текстов
• ✍ Кьюкоммент — биржа комментариев
• �� 60сек — выгодный обмен криптовалют
• �� Вктаргет — заработок в соцсетях
• �� Смотреть все.

Комментарии и отзывы (22)

Все очень понятно!

А этот вариант не засоряет чистоту кода заголовков? Слышал, что теги h1-h6 должны быть полностью чистыми в html-плане.

Спасибо за статью, очень помогла.

Oksana и Артём: Вам спасибо, что читали и комментировали.

Art_gud: ну, сложно сказать, ибо и я это слышал (в смысле, читал), но как оно обстоит на самом деле не знаю. Если сомневаетесь, то можно метку c ID запихнуть в предшествующий подзаголовку абзац, обрамив его предварительно в теги P.

Все хорошо, только бы автоматизировать этот процесс, а то слишком долго вручную! Вот как на блоге wp-kama.ru приводится решение — код добавить в functions.php. Но тоже не без недостатков

NikEL: ну,да, было бы здорово. А вы не могли бы ссылочку на статью уважаемого Камы кинуть. Спасибо.

NikEL: замечательно, спасибо. Кама, вообще, большой молодец — много его наработок применял на практике и все фунциклировало. Он безусловно специалист с большой буквы.

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

Насчет Камы абсолютно согласна — этот человек реально вносит вклад в «развитие» WordPress’а, сама тоже пользуюсь его кодом. А насчет способа создания оглавления — пусть каждый выбирает, как ему удобнее, хорошо, что есть альтернатива ��

Спасибо огромное, попробую применить. Только вот вопрос — в файл стилей куда вставлять эту строчку, которую вы в статье даете? Или это не имеет значения, куда?

Ирина: пожалуйста. Не имеет значения, главное, чтобы не внутри какого-нибудь другого CSS свойства (строго после закрывающей фигурной скобки — можно с новой строки).

Добрый день ! Вы не сталкивалиьс с такой проблеммой, когда при вводе текста для пароля или поиска, на странице ворд пресс, тастатура пишет только большими буквами

Здарово) Просто хотел спросить, Дмитрий. Вот я слежу за вашим сайтом. и за другими сайтами схожей тематики. И постоянно наблюдаю одну и ту же картину — вас копируют. не в плане текста, а в плане тем для написания, даже заголовки «блоггеры» идентичные пишут. хотя вполне можно было другие ключи в заголовок вставить. Вот как раз по этой статье за вами несколько «блоггеров» написало. Вас бесит, что вас копируют и просто идут по вашим стопам?)

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

Ддима: ну, как сказать. Повлиять я на это не могу, поэтому отношусь спокойно. Спасибо.

Спасибо за статью , хорошие стать пишите, но у меня такой вопрос не будет ли считаться оглавление дублями?

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

Добрый день, нужно или нет добавлять к ссылкам содержания статьи тег rel=»nofollow». Спасибо за ответ.

Klim Ivanov

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

Говорила мне мама, учись сынок. А её не слушал.

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

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

Спасибо все получилось, ожидания оправдались, по статье все понятно сделал с первого раза!

Ваш комментарий или отзыв

Как сделать содержание в html

Для оформления содержания (навигации по секциям на странице) в HTML обычно используют элемент и ссылки на якори (anchor links). Якоря — это ссылки на определенные разделы страницы, которые задаются при помощи атрибута id у элемента, к которому нужно перейти по ссылке.

Пример кода для создания содержания:

В данном примере содержит список ссылок на якори, которые соответствуют заголовкам разделов, и которые будут использоваться для навигации по странице. Заголовки разделов имеют атрибут id , который указывает на якорь, на который будет ссылаться ссылка в содержании.

Как сделать оглавление или список содержимого статьи

Здравствуйте коллеги! После написания очередной объемной статьи я решил, что не помешало бы сделать у себя на сайте к некоторым постам список оглавлений. Данный элемент очень практичен, поскольку позволяет отыскать гостю сайта среди огромного количества информации то, что нужно именно ему. Содержимое статьи особенно удобно и актуально в случаях, когда пред взором читателей престают исчерпывающие талмуды.

Все дело в том, что человек по ту сторону монитора ищет какую-то конкретную информацию, и у него нет абсолютно никакого желания на прочтения вступления и излишней никому не нужной воды. К примеру, при запросе: «Как сделать оглавление или список содержимого статьи» пред его взором открывается исчерпывающий мануал на 6000 зн., который вероятнее всего он, не задумываясь, закроет и найдет разъяснение в более удобной и конкретной форме.

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

Создание списка содержимого к статье средствами HTML

Первый способ базируется на обычных html тегах. Для внесения корректировок необходимо авторизироваться в админ-панели вашего сайта и перейти в материалы. Несмотря на то, что рассказывать я буду на примере CMS Joomla, представленный мною ниже код подойдет и для пользователей WordPress, Drupal и т.д.

, который является блочным элементом.

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

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

Сначала необходимо внести корректировку к заголовкам h2–h6. На сайте под управлением Joomla удобнее всего работать с текстовым редактором JCE, поэтому я рекомендую вам его установить. О том, как это сделать написано вот в этой статье. И так, войдя в материалы, нужно зайти в какую-то конкретную статью, после чего выбрать в правом верхнем углу редактора кнопку «Code», отвечающую за отображение HTML кода. Пред вашим взором предстанет что-то наподобие того, что можно увидеть на ниже опубликованном скриншоте.

Это отрывок html кода со статьи «Страница ошибки 404 для Joomla».

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

Внизу картинки я выделил h2 заголовок, заключенный в соответственный одноименный открывающийся

и закрывающийся

тег, оснащенный якорем для гиперссылок. Помимо этого к нему прописаны некоторые стили, а именно: font-size — размер шрифта; color — цвет заголовка.

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

Откуда берется ошибка 404 Joomla

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

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

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

Оформление содержимого посредством использования CSS стилей

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

• float: centr — стиль определяющий место расположения оглавления. В нашем случае задана позиция «центр». При желании можно задать right (справа) либо left (слева).
• border: 1px dashed gray — свойство, отвечающее за отображение рамки. В нашем случае отображается пунктирная (dashed) серая (gray) рамка (border). Кроме того можно изменить рамку на: dotted (точечную), solid (сплошную), ridge (рельефную) или double (двойную).
• padding: 5px 5px 0px 2px — данной командой задаются отступы от тела списка содержимого к рамке.

Создание оглавлений в Joomla

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

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

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

Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter