Anchor links allow readers to jump to a specific part of the page. If your article is really long or text-heavy, consider creating a table of contents or index using anchor links for quick navigation.
When I write longer articles here on xxx or my blogspot(s), I like to add a Table of Contents to the top to help my reader’s navigate to different sections of the post.
If you prefer to manually insert the Table of Contents into you posts rather than a plugin or javascript snippet adding it to every post/page, i will describe how to do.
Rem: Because SEO and headings are linked, the choice of the name of headings an its id are important.
"A la main" (manually insert)
- first create your headings with an id (i=1 to 6):
<h i id="synop"> Synopsis </h i> - and the link <a href="#synop">Synopsis</a> in your table of contents (or index)
Anchor links allow readers to jump to a specific part of the page. If your article is really long or text-heavy, consider creating a table of contents or index using anchor links for quick navigation.
When I write longer articles here on xxx or my blogspot(s), I like to add a Table of Contents to the top to help my reader’s navigate to different sections of the post.
If you prefer to manually insert the Table of Contents into you posts rather than a plugin or javascript snippet adding it to every post/page, i will describe how to do.
Rem: Because SEO and headings are linked, the choice of the name of headings an its id are important.
- first create your headings with an id (i=1 to 6):
<h i id="synop"> Synopsis </h i> - and the link <a href="#synop">Synopsis</a> in your table of contents (or index)
examples
At the beginning of your post or your html, write (it's an internal link to "synop"):<a href="#synop">Synopsis</a>
When you clic on this "internal link" you will go to "synop".
In your text you have this headings (i=1 to 6):
<h i><a id="synop"></a>Synopsis</h i>
<a id="synop"></a> is an anchor tag.
remember that a classic HTML links is also defined with the <a> tag but with "href":
<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>
Bookmark with the id attribute.
It's shorter than the anchor tag:<h i id="synop"> Synopsis </h i>
Then, add a link to the bookmark ("Synop"), from within the same page:
<a href="#synop">Synopsis</a>
Or, add a link to the bookmark ("Synop"), from another page (of your domain).
<a href="other_page.html#synop">Visit the Useful Synop Section</a>
Ref: http://www.w3schools.com/html/html_links.asp
The anchor tag
<a id="WhateverNameYouWant">The landing place of the link</a>and for example at the beginning of your post
See the classic example for the "page content"
http://accessibility.psu.edu/headingshtml/
https://www.w3.org/TR/html4/struct/links.html#h-12.2.3
http://www.w3schools.com/tags/tag_a.asp
Fragment identifiers:
https://www.w3.org/TR/html4/intro/intro.html#fragment-uri
for dummies:
http://stackoverflow.com/questions/8192742/what-is-the-meaning-of-in-url-and-how-can-i-use-that
blogspot:
http://theedifier.com/blogging-blogger/classical-template-modify.php
http://blogknowhow.blogspot.fr/2010/11/add-internal-links-within-blogger-posts.html
Automatically create heading anchor
a javascripthttp://renaysha.me/anchorific-js/
I always create single-page project documentations with anchored headings and anchored-based navigations to jump from one section to another. However, I feel that it is repetitive to create the anchored headings and anchored-based navigations manually. I want to focus on writing the documentation and let jQuery generates the anchored headings and nested navigations for me. Thus, Anchorific.js was born.
https://github.com/renettarenula/anchorific.js
some links:
https://www.itsupportguides.com/tech-tips-tricks/jquery-how-to-automatically-create-heading-anchors-for-links/
http://jeroensormani.com/automatically-add-ids-to-your-headings/
http://wordpress.stackexchange.com/questions/94663/dynamically-add-id-to-heading-tags
Other aspects of the structure of an HTML
There's some ambiguity and debate around the proper use of the heading tags, specifically with the use of sectioning elements, like <article> and <section>.
section element
According to the most recent public draft of the W3C HTML 5.1 specification 4.3.3 The section element:The <section> element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.
Sections may contain headings of any rank, and authors are strongly encouraged to use headings of the appropriate rank for the section's nesting level.https://www.w3.org/TR/html51/semantics.html#the-section-element
article element
According to the specification 4.3.2 The article element:The <article> element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.http://www.w3schools.com/html/html_layout.asp
Authors are encouraged to use the <article> element instead of the <section> element when it would make sense to syndicate the contents of the element.
http://accessiblehtmlheadings.com/
Blogspot
Sitemap:
http://helplogger.blogspot.fr/2013/12/add-sitemap-table-of-contents-to-blogger.htmla widget:
https://github.com/garafu/blogger.toc
No comments:
Post a Comment