Оглавление html: Как сделать содержание (оглавление) в статье сайта/блога

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

Обновлено 11.06.17

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

Содержание
1. Преимущества краткого содержания в статье
2. Как сделать содержание статьи в блоге: код оглавления
3. Как сделать красивое содержание статьи: прописываем стили

 

Такое меню в статьях вы, наверное, уже неоднократно встречали у меня на SEO Блоге Лентяйки и на других сайтах. Сложно ли сделать такую фишку? Очень просто!

Преимущества краткого содержания в статье

Содержание статьи решает сразу несколько задач.

• Читатель с первого взгляда может понять, о чем статья, и решит ли она его проблему.
• Читателю удобно перемещаться по смысловым блокам текста.
• Внимание посетителя может зацепить какой-нибудь пункт меню в оглавлении, и он задержится на странице.
• В содержании статьи можно использовать ключевые фразы, под которыми продвигается статья. Нередко фрагмент краткого содержания попадает в сниппет поисковой выдачи. И смотрится он там очень эффектно!

Как сделать содержание статьи в блоге: код оглавления

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

Там хранится код для вывода содержания статьи. Вот он.

<ol>Содержание
       <li><a href="#1"> Пункт меню 1</a></li>
       <li><a href="#2"> Пункт меню 2</a></li>
       <li><a href="#3"> Пункт меню 3</a></li>
       <li><a href="#4"> Пункт меню 4</a></li>
       <li><a href="#5"> Пункт меню 5</a></li>
       <li><a href="#6"> Пункт меню 6</a></li>
       <li><a href="#7"> Пункт меню 7</a></li>
</ol>

Я его просто вставляю в начале статьи в редакторе WordPress в режиме HTML. При переключении между визуальным редактором и HTML редактором он никуда не пропадает.

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

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

Код якоря рядом с подзаголовком такой:

<a name="1"></a>

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

Из чего состоит этот код содержания статьи? Он представляет собой HTML запись, служащую для вывода списка с цифрами.

Стандартный нумерованный список выводят так:

<ol>список с цифрами
       <li> пункт 1</li>
       <li> пункт 2</li>
       <li> пункт 3</li>
       <li> пункт 4</li>
       <li> пункт 5</li>
</ol>

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

<ol>

Это значит, что в файл style. css нужно добавить конкретное правило отображения блока с оглавлением статьи. Тогда у сдержания статьи появится приятный фон и любые финтифлюшки, какие вы захотите. Чуть ниже, я объясню, как это сделать.

В каждом конкретном пункте меню содержится ссылка на ярлык:

<a href="#1"> </a>

Каждой ссылке на ярлык соответствует конкретный ярлык в тексте:

<a name="1"></a>

Резюме:

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

Вроде все просто объяснила. Если есть вопросы – задавайте в комментариях.

Если все понятно, то нам осталось только настроить стиль содержания статьи.

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

Открываете в админке WordPress «Внешний вид» – «Редактор».

Листаете файл style.css.

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

У меня на блоге такие правила:

ol#sod{
padding: 0px 20px 10px 51px;
margin: 0.5em 0 0em 1em;
color: #2E2E2E;
list-style-type: none;
background: #CCFFFF;
border-left: #66FFCC 4px solid;
display: inline-block;
}
ol#sod li{}
ol#sod li:before{
font-weight:normal !important
}

Для вашего дизайна вы можете прописать другие правила: изменить цвет, отступы, шрифты, – все, что захотите.

Если вам нужно подобрать код нужного вам цвета, то можете посмотреть мою «Таблицу безопасных HTML цветов». Безопасными цвета называются потому, что они одинаково хорошо, без искажений, отображаются во всех браузерах пользователей.

Если вы совсем ничего не понимаете в style.css, то просто вставьте код стиля меню статьи в конец файла. Он все равно будет работать.

В общем, вы сохранили файл style.css, отредактировали статью и обновили страницу на сайте. Получилось у вас красивое содержание статьи? Расскажите мне в комментариях! Мне будет приятно, что я кому-то помогла сделать краткое оглавление статьи в блоге.

Ну, а если вам понравилось наводить красоту у себя на сайте, то вы еще можете поколдовать с дизайном:

• Сделать красивые нумерованные и маркированные списки
• Вывести красивые заголовки h2 h3 h4 h5
• Оптимизировать шаблон и удалить все лишние теги h2 h3 h4 h5 на свой вкус
• Сделать красивую постраничную навигацию на сайте
• Разместить красивые кнопки соцсетей

Вместе с этим читают

Оглавление HTML5 документа :: Хранитель заметок

Механизм построения оглавления (outline) страницы базируется на тегах, используемых при разметке документа. Например, главная страница моего блога может иметь такое оглавление:

1. Свежие заметки :: Хранитель заметок
   1. Свежие заметки
      1. Убираем неоднородности на повторяющейся текстуре
      2. Deferred Object
      3. Возвращаясь к проверке типа данных
      4. Тень у полей ввода в мобильном Safari
         1. Очень простое решение
      5. Таблица без таблицы или display: table-cell для всех браузеров
   2. Навигация по сайту
      1. Облако тегов
      2. Категории
      3. Ссылки
   3. Архив заметок по месяцам

Только два типа тегов влияют на оглавление страницы: заголовки (h2-h6 и hgroup) и структурные теги (section, article, aside и nav).

Влияние заголовков на построение оглавления

<div>
    <h2>Свежие заметки :: Хранитель заметок</h2>
    <!-- начинаем новый подраздел -->
    <h3>Свежие заметки</h3>
    <!-- начинается статья -->
    <h4>Убираем неоднородности на повторяющейся текстуре</h4>
    <!-- статья про неоднородности и как их убрать -->
    <p>Повторяющиеся текстуры бумаги или ткани могут быть с
        разными неоднородностями по площади.</p>
    ...
    <!-- статья закончилась и начинается новая -->
    <h4>Deferred Object</h4>
    <!-- статья про отложенные объекты -->
    <p>Термин «отложенный объект» тесно связан с событийной
        моделью создания компонент и модулей приложения.</p>
    ...
    <h4>Возвращаясь к проверке типа данных</h4>
    ...
    <h4>Тень у полей ввода в мобильном Safari</h4>
    ...
    <h5>Очень простое решение</h5>
    ..
  .
    <h4>Таблица без таблицы или display: table-cell
        для всех браузеров</h4>
    ...
    <!-- раздел свежих заметок закончился и начинается новый раздел -->
    <h3>Навигация по сайту</h3>
    <h4>Облако тегов</h4>
    <ul>
        <li>jquery</li>
        <li>ui</li>
        <li>utility</li>
        <li>hint</li>
        <li>css</li>
    </ul>
    <h4>Категории</h4>
    <ul>
        <li>Вёрстка</li>
        <li>JavaScript</li>
        <li>Apple</li>
        <li>Разное</li>
    </ul>
    <h4>Ссылки</h4>
    ...
    <h3>Архив заметок по месяцам</h3>
    ...
</div>

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

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

Учет разделов при построении оглавления

Добавим в разметку страницы некоторые структурные элементы.

<div>
    <h2>Свежие заметки :: Хранитель заметок</h2>
    <section>
        <h3>Свежие заметки</h3>
        <article>
            <h4>Убираем неоднородности на повторяющейся текстуре</h4>
            <p>Повторяющиеся текстуры бумаги или ткани могут быть с
                разными неоднородностями по площади.</p>
            ...
        </article>
        <article>
            <h4>Deferred Object</h4>
            <p>Термин «отложенный объект» тесно связан с событийной
                моделью создания компонент и модулей приложения.</p>
            ...
        </article>
        <article>
            <h4>Возвращаясь к проверке типа данных</h4>
            .
  ..
        </article>
        <article>
            <h4>Тень у полей ввода в мобильном Safari</h4>
            ...
            <h5>Очень простое решение</h5>
            ...
        </article>
        <article>
            <h4>Таблица без таблицы или display: table-cell
                для всех браузеров</h4>
            ...
        </article>
    </section>
    <nav>
        <h3>Навигация по сайту</h3>
        <section>
            <h4>Облако тегов</h4>
            <ul>
                <li>jquery</li>
                <li>ui</li>
                <li>utility</li>
                <li>hint</li>
                <li>css</li>
            </ul>
        </section>
        <section>
            <h4>Категории</h4>
            <ul>
                <li>Вёрстка</li>
                <li>JavaScript</li>
                <li>Apple</li>
                <li>Разное</li>
            </ul>
        </section>
        <section>
            <h4>Ссылки</h4>
            .  ..
        </section>
    </nav>
    <nav>
        <h3>Архив заметок по месяцам</h3>
        ...
    </nav>
</div>

Фактически структура оглавления ни сколько не поменялась. Но теперь разделы заданы явно с помощь тегов section, article, nav.

Одним из широко обсуждаемых нововведений HTML5 стало то, что в документе разрешено использовать несколько тегов h2. Из-за того, что деление на разделы происходит явно, внутри каждого раздела можно формировать свою структуру из заголовков.

В спецификации HTML5 указано:

Sections may contain headings of any rank, but authors are strongly encouraged to either use only h2 elements, or to use elements of the appropriate rank for the section’s nesting level.

Разделы могут содержать заголовки любого уровня. Но авторам настоятельно рекомендуется использовать только элементы h2 или элементы, соответствующие уровню вложенности раздела.

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

Смешанный подход

Неявные разделы могут появляется внутри явных разделов (но не наоборот).

<div>
    <h2>Свежие заметки :: Хранитель заметок</h2>
    <section>
        <h3>Свежие заметки</h3>
        <article>
            <h4>Тень у полей ввода в мобильном Safari</h4>
            ...
            <h5>Очень простое решение</h5>
            ...
        </article>
    </section>
</div>

Этот фрагмент документа, очевидно, выдаст следующую структуру:

1. Свежие заметки :: Хранитель заметок
   1. Свежие заметки
      1. Тень у полей ввода в мобильном Safari
         1. Очень простое решение

Заголовок h5 образует неявный раздел внутри статьи, заданной явным образом тегом article.

Разделы без названия

Название явного раздела документа берется из ближайшего заголовка. Чаще всего без названия в оглавлении остаются разделы nav и aside . В спецификации нет жестких указаний на использование в них заголовков. Если все же такие разделы появляются по каким-либо причинам, то это не стоит считать плохой разметкой. Тем не менее, именование всех возможных разделов повышает понятность и доступность их содержимого.

Оставлять же без названия разделы section и article не стоит. Наличие такого раздела, например, может быть связано с не правильным выбором тега между div, section и article . Если для блока нельзя придумать заголовок, то его стоит просто разметить с помощью тега div.

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

<body>
    <article>
        <h2>Blog post title</h2>
        <p>Blog post content</p>
    </article>
</body>

Такой документ останется без названия, так как появился явный раздел, размеченный тегом article. Чтобы решить эту проблему достаточно перед article поставить еще один тег h2 с аналогичным содержимым. Этот прием никак не повиляет на поисковую оптимизацию, так как заголовки будут одинаковыми (или почти одинаковыми).

hgroup

Элемент hgroup может содержать только заголовки и его назначение – это убрать все заголовки из оглавления кроме заголовка самого высокого уровня.

Инструменты и документация

• html5outliner https://github.com/hoyois/html5outliner

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

• спецификация http://dev.w3.org/html5/spec/Overview.html#outlines

  Полное описание алгоритма создания оглавления документа.

Вставить оглавление

Разметка страниц

• Изменить поля
  Статья
• Создавайте колонки новостей
  Статья
• Изменить ориентацию страницы на альбомную или портретную
  Статья
• Добавить границу на страницу
  Статья
• Вставьте верхний или нижний колонтитул
  Статья
• Вставьте номера страниц
  Статья
• Вставить разрыв страницы
  Статья
• Вставить оглавление
  Статья

Следующий: Вставка таблиц, изображений и водяных знаков

Содержание в Word основано на заголовках документа.

Создать оглавление

org/ItemList»>

1. Поместите курсор туда, куда вы хотите добавить оглавление.

2. Перейти к Ссылки > Содержание . и выберите автоматический стиль.

3. Если вы вносите изменения в документ, влияющие на оглавление, обновите оглавление, щелкнув оглавление правой кнопкой мыши и выбрав Обновить поле .

Чтобы вручную обновить оглавление, см. Обновление оглавления.

Если у вас отсутствуют записи

Отсутствующие записи часто возникают из-за того, что заголовки не отформатированы как заголовки.

1. Для каждого заголовка, который вы хотите добавить в оглавление, выберите текст заголовка.

2. Перейдите на Главная > Стили , а затем выберите Заголовок 1 .

3. Обновите оглавление.

Чтобы вручную обновить оглавление, см. Обновление оглавления.

Создать оглавление

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

1. Щелкните в том месте, где вы хотите вставить оглавление — обычно в начале документа.

2. Щелкните Ссылки > Оглавление , а затем выберите стиль Автоматическое оглавление из списка.

   Примечание: Если вы используете Оглавление вручную В стиле Word не будет использовать ваши заголовки для создания оглавления и не сможет обновлять его автоматически. Вместо этого Word будет использовать текст-заполнитель для создания внешнего вида оглавления, чтобы вы могли вручную вводить каждую запись в оглавление. Чтобы обновить оглавление руководства, см. Обновление оглавления.

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

Если у вас отсутствуют записи

Отсутствующие записи часто возникают из-за того, что заголовки не отформатированы как заголовки.

1. Для каждого заголовка, который вы хотите добавить в оглавление, выберите текст заголовка.

2. Перейдите к Главная > Стили , а затем выберите Заголовок 1 .

3. Обновите оглавление.

Чтобы вручную обновить оглавление, см. Обновление оглавления.

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

1. Щелкните в том месте, где вы хотите вставить оглавление — обычно в начале документа.

2. На ленте панели инструментов выберите Ссылки .

3. В левом конце выберите Вставить оглавление . (Или выберите Оглавление > Вставить оглавление . 

   Вставляется оглавление с указанием заголовков и нумерации страниц в документе.

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

Получить учебное пособие

Чтобы получить практическое руководство, которое проведет вас через процесс создания оглавления, загрузите наше руководство по оглавлению. Или в настольном Word перейдите к File > New и найдите оглавление .

Обновление оглавления

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

Урок 15.

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

/en/word-tips/modifying-page-numbers-in-word/content/

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

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

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

Вы можете создать оглавление вручную, набрав названия разделов и номера страниц, но это потребует много работы. И если вы когда-нибудь решите переупорядочить свои разделы или добавить больше информации, вам придется обновлять все заново. Однако при правильном форматировании Word может автоматически создавать и обновлять оглавление.

Шаг 1. Применение стилей заголовков

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

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

Чтобы применить стиль заголовка, выделите текст, который хотите отформатировать, затем выберите нужный заголовок в группе Стили на вкладке Главная .

Шаг 2: Вставьте оглавление

Теперь самое простое! После того, как вы применили стили заголовков, вы можете вставить оглавление всего за несколько кликов. Перейдите на вкладку References на ленте, затем щелкните команду Table of Contents . Выберите встроенную таблицу из появившегося меню, и в вашем документе появится оглавление.

Как вы можете видеть на изображении ниже, оглавление использует стили заголовков в вашем документе, чтобы определить, где начинается каждый раздел. Разделы, начинающиеся со стиля «Заголовок 2» или «Заголовок 3», будут вложены в стиль «Заголовок 1», подобно многоуровневому списку .

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

Шаг 3: Обновите по мере необходимости

Если вы редактируете или добавляете в документ, легко обновить оглавление. Просто выберите оглавление, нажмите Обновить таблицу и выберите Обновить всю таблицу в появившемся диалоговом окне.