View source for Template:Anchor/doc

{{Used in system}}
{{Bot use warning|bots=[[User:Cewbot]] ([[Wikipedia:Bots/Requests for approval/Cewbot 6|BRFA]])}}
{{Lua|Module:Anchor}}
{{Documentation subpage}}
<!-- PLEASE ADD CATEGORIES AT THE END OF THIS PAGE, ND INTERWIKIS LINKS TO WIKIDATA -->
The template {{tl|{{lc:{{BASEPAGENAME}}}}}} inserts one or more invisible anchor names ([[Fragment identifier|HTML fragment identifiers]]) in a page. Anchors are most useful with sections, since links to a section will not work if a section is renamed. However, anchors can be used as needed anywhere in an article.
__TOC__
<!-- These are actual, working anchors on this page! Don't change them, they're here for people who want to test the incorrect placements. The #Transcluded anchor should not be substituted. -->
{{Anchor|Placed above|Above-Foo|Foo bar}}

== <span class="anchor" id="Foo"></span><span class="anchor" id="Correctly substituted"></span><span class="anchor" id="Anchor name 1"></span><span class="anchor" id="Anchor name 2"></span>{{Anchor|Transcluded anchor}} Basic format <span class="anchor" id="Placed after title"></span>==

{{Anchor|Placed below|Under-Foo}}

{{shortcut|WP:ANCHORFORMAT}}

{{warning|If the target is a section, it should always be {{strong|[[Wikipedia:Substitution|substituted]] ''within'' the <nowiki>==heading==</nowiki> and ''before'' the section title}}, otherwise it will cause accessibility and technical issues. See {{section link|#Always substitute inside section headers}} for more information.}}

The basic format is {{tlc|Anchor|Anchor name}} for parts on a page, and {{tlxs|Anchor|Anchor name|nolink=y}} for use in headings. More than one name can be given, separated by <code>|</code>, which can be useful for alternative spellings such as "humor" and "humour": {{tlc|Anchor|humor|humour}}

If the intended target of an anchor is a section, this template should be substituted in the section header at the ''start'' of the line {{crossref|(see {{section link|#Always substitute inside section headers}})}}:
:<code>{{mxt|<nowiki>== {{subst:Anchor|Anchor name}} Section title ==</nowiki>}}</code>
which will be saved in the article as:
:<code>{{mxt|<nowiki>== <span class="anchor" id="Anchor name"></span> Section header ==</nowiki>}}</code>
An anchor name can be arbitrary, but the first letter should generally be capitalized in keeping with header style. {{crossref|See [[MOS:HEADINGS|Manual of Style § Section headings]] for more information.}} Note that anchor names are case sensitive, so <code><nowiki>[[#Anchor name]]</nowiki></code> and <code><nowiki>[[#Anchor Name]]</nowiki></code> are not equivalent.

== Linking to an anchor ==
To link to an anchor from within the same page, use <code><nowiki>[[#Anchor name|display text]]</nowiki></code>. {{#ifeq:{{BASEPAGENAME}}|Visible anchor|&nbsp;Unlike {{tl|Anchor}}, the first parameter will be visible text on the page.|}} To link to an anchor from another page, use <code><nowiki>[[Article name#Anchor name|displayed text]]</nowiki></code> or {{tlx|Section link|Article name|displayed text}}. {{crossref|See [[WP:ANCHOR|Help:Link § Section linking (anchors)]] for more details.}}

Note that <code><nowiki>#</nowiki>{{var|Anchor name}}</code>, used by the [[MediaWiki]] software to direct users to sections within a page, is not a [[wikitext]] directive like [[Help:Redirect|<syntaxhighlight lang="wikitext" inline>#REDIRECT</syntaxhighlight>]].

== <span class="anchor" id="Rationale for placement above header"></span><span class="anchor" id="substitution_reason_anchor"></span><span class="anchor" id="Rationale"></span><span class="anchor" id="Rationale for substitution in the header"></span>Always substitute inside section headers ==
<!-- The anchors above are the old names of this section, not examples -->
{{shortcut|WP:ANCHORSUBST}}

If the target of the anchor is a [[WP:SECTION|section]], it should always be placed {{strong|inside}} the section header and always {{strong|[[Wikipedia:Substitution|substituted]]}}. Not doing so violates [[MOS:HEADINGS]] and [[MOS:SECTIONANCHOR]] and causes technical complications and accessibility issues. The examples on this documentation page can be tested to see their effect. This is an example of the correct format:
:[[File:Yes check.svg|20px|link=|alt=]]&nbsp;<code>{{mxt|<nowiki>==</nowiki> '''<nowiki>{{subst:Anchor|Correctly substituted}}</nowiki>''' Basic format <nowiki>==</nowiki>}}</code>
which will be saved in the article as:
:[[File:Yes check.svg|20px|link=|alt=]]&nbsp;<code>{{mxt|<nowiki>==</nowiki> '''<nowiki><span class="anchor" id="Correctly substituted"></span> </nowiki>'''Basic<nowiki> format ==</nowiki>}}</code>

{{hatnote|See how the correct placement works by jumping to the {{sectionlink|#Correctly substituted}} anchor.}}

Below are {{em|incorrect}} usages of the template, accompanied by an explanation.

=== Not above the heading ===
:[[File:X mark.svg|20px|link=|alt=]]&nbsp;<code style="color:darkred;">'''<nowiki>{{Anchor|Placed above}}</nowiki>'''</code>
::<code style="color:darkred;">== Basic format ==</code>

Editors should not place an anchor {{em|above}} a heading, because:

* On mobile, the site expands the wrong section and leaves the intended section collapsed, since the anchor is technically placed inside the previous section.
* It cannot be viewed or changed by [[WP:SECTIONEDIT|editing the section]]. This is especially important on the mobile interface, as the button to edit the entire article disappears when scrolling, increasing the reliance on a section editing.
* If an editor moves the section it relates to by editing the section directly, the anchor link will not be included and will remain in the old position.
* On talk pages, the anchor remains attached to the previous topic once the topic is archived or moved elsewhere.{{Pb}}

{{hatnote|See how this placement works by jumping to the anchor {{sectionlink|#Placed above}}.}}

=== Not below the heading ===
::<code style="color:darkred;">== Basic format ==</code>
:[[File:X mark.svg|20px|link=|alt=]]&nbsp;<code style="color:darkred;">'''<nowiki>{{Anchor|Placed below}}</nowiki>'''</code>

Editors should not place an anchor {{em|underneath}} a heading, because browsers will hide the section title from view when jumping to the target. This is also inaccessible to users of screen readers, see {{Section link||Not after the section title}} below.

{{hatnote|See how this placement works by jumping to the anchor {{sectionlink|#Placed below}}.}}<!-- This is an actual, working anchor on this page! Don't remove it, it's here for people who want to test the incorrect placements -->

=== Not transcluded ===
:[[File:X mark.svg|20px|link=|alt=]]&nbsp;<code style="color:darkred;">==''' <nowiki>{{Anchor|Transcluded anchor}}</nowiki> '''Basic format ==</code>
:[[File:Yes check.svg|20px|link=|alt=]]&nbsp;<code>{{mxt|<nowiki>==</nowiki> '''<nowiki>{{subst:Anchor|Correctly substituted}}</nowiki>''' Basic usage <nowiki>==</nowiki>}}</code>
Editors should not {{em|[[Wikipedia:Transclusion|transclude]]}} an {{tlx|Anchor}} inside a heading, because:
*The template call will appear in the edit summary each time the section is edited, like this: {{nowrap|1=<code><nowiki>/* {{Anchor|Transcluded anchor}} Basic format */</nowiki></code>}}.
*In watchlists and history pages, the clickable link to the section will fail to bring the user to the correct section, unless the template call is manually removed before the edit is published.
*After editors save an edit to a section, they are taken to the top of the page instead of to the section they just edited.{{Pb}}

{{hatnote|See how an unsubstituted anchor works by jumping to the {{sectionlink|#Transcluded anchor}} and editing the section.}}<!-- This is an actual, working anchor on this page! Don't remove it, it's here for people who want to test the incorrect placements -->

=== Not after the section title ===
:[[File:X mark.svg|20px|link=|alt=]]&nbsp;<code style="color:darkred;">==  Basic format''' <nowiki>{{subst:Anchor|Placed after title}}</nowiki> '''==</code>
<!-- This is here to show the incorrect usage. The CORRECT usage is above! -->
Editors should not place a substituted {{tlxs|Anchor}} after the heading, or even within the heading but after the section title. Users of [[screen readers]] rely on anchors to be at the point from which reading should commence; if the anchor is inserted after the section title, the screen reader software will not read out the title and will instead begin with the paragraphs that follow it.

{{hatnote|See how this placement works by jumping to the anchor {{sectionlink|#Placed after title}}.}}<!-- This is an actual, working anchor on this page! Don't remove it, it's here for people who want to test the incorrect placements -->

== Limitations ==
{| class="wikitable floatright" style="text-align: center;"
|+HTML entity references for characters unsuitable in anchors
|-
! {{Abbr|Ch|Character}}
! {{abbr|[[Character entity reference|Code]]|Character entity reference}}
! Template
! [[Help:Magic words|Magic word]]
! Meaning
|-
| {{char|&quot;}}
| <code>&amp;quot;</code><br /><code>&amp;#34;</code>
| {{N/a}}
| {{N/a}}
| (double) [[quotation mark]]
|-
| {{char|&#35;}}
| <code>&amp;#35;</code><br /><code>&amp;num;</code>
| {{tlx|hash}}
| {{N/a}}
| [[Number sign|hash]]
|-
| {{char|&#124;}}
| <code>&amp;#124;</code><br /><code>&amp;vertbar;</code>
| {{tlx|pipe}}
| {{tlx|!}}
| [[Vertical bar|pipe]]
|-
| {{char|&#61;}}
| <code>&amp;#61;</code><br /><code>&amp;equals;</code>
| {{N/a}}
| {{tlx|{{=}}}}
| [[Equals sign|equals]]
|}
Anchor names that contain any character shown in the table will not work as expected. However, any of these characters can be replaced with the [[HTML character entity reference]] "&amp;#" codes shown, and the pipe symbol and equals sign can be worked around with {{tlx|!}} and {{tlx|{{=}}}}, respectively. Markup such as {{tag|sup|o}} and {{tag|sub|o}} (superscript and subscript) cannot be used. Most other characters, such as [[Whitespace character|whitespace]] and punctuation, are not a problem.

Anchor names must be unique on a page and must not duplicate any [[Wikipedia:Heading|heading titles]]. Duplicate anchors will not work as expected since the <code><nowiki>#location</nowiki></code> links go to the first anchor with that name. Duplicate anchors result in invalid HTML; you can check for duplicate anchors by running the page through the [[W3C Markup Validation Service]].

Anchor links are case-sensitive in ''some'' browsers, so treat all anchor links as case-sensitive when creating links to them. For example, if you create the anchor with <code>=== <nowiki>{{subst:Anchor|Bar}}</nowiki> Foo ===</code>, link to it with <code><nowiki>[[Foo#Bar]]</nowiki></code>, not <code><nowiki>[[Foo#bAR]]</nowiki></code>. However, because some browsers are '''not''' case-sensitive, do not create section titles or anchors that differ only in case from others on the page. That is, do not create both <code>=== <nowiki>{{subst:Anchor|Bar}}</nowiki> Foo ===</code> and <code>=== <nowiki>{{subst:Anchor|bAR}}</nowiki> Foo ===</code>, as they would be considered duplicates and would trigger the second error in this list.

== Use in tables ==
{{notice|To see how to set anchors in tables, see {{section link|Help:Tables and locations|Section link or map link to a row anchor}}. Only use {{tl|Anchor}} in tables if you need multiple targets for the same row.}}

Anchors may be used within tables, subject to certain restrictions. The {{tlx|Anchor}} template may be used in the caption and cells of a table, but not those portions of a table that are outside the caption and cells. Unlike in section headings, the template does not have to be substituted. It is used on the table's caption thus:
<div style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 10px;"><div style="width: fit-content; align-self: center;">[[File:Green check.svg|20px|link=|alt=]]</div><syntaxhighlight lang="wikitext" style="width: 100%;">
|+ {{Anchor|FooX}} A table caption
</syntaxhighlight></div>

and the following forms of cell are valid:

<div style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 10px;"><div style="width: fit-content; align-self: center;">[[File:Green check.svg|20px|link=|alt=]]</div><syntaxhighlight lang="wikitext" style="width: 100%;">
! {{Anchor|Foo1}} A header cell
! style="background:white;" |{{Anchor|Foo2}} A header cell with styling
|{{Anchor|Foo3}} A data cell
| rowspan="2" |{{Anchor|Foo4}} A data cell spanning two rows
</syntaxhighlight></div>

You need to ensure that the {{tlx|Anchor}} is not in that portion of the markup intended for the classes, styles etc. Thus, {{tlx|Anchor}} cannot be placed anywhere on lines that begin with <code><nowiki>{|</nowiki></code> (start of table) or <code><nowiki>|-</nowiki></code> (new row), and the following forms of cell are not valid:

<div style="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 10px;"><div style="width: fit-content; align-self: center;">[[File:Red x.svg|20px|link=|alt=]]</div><syntaxhighlight lang="wikitext" style="width: 100%;">
! {{Anchor|Foo1}} | A header cell
! style="background: white;" {{Anchor|Foo2}} | A header cell with styling
| {{Anchor|Foo3}} | A data cell
| rowspan="2" {{Anchor|Foo4}} | A data cell spanning two rows
</syntaxhighlight></div>
If it is necessary for an anchor to be in any of these positions, a different technique is used—the <code>id=</code> attribute. This is placed in that portion of the markup where the classes, styles etc. may be used, as follows:
<syntaxhighlight lang="wikitext">
{| id="FooX" class="wikitable"
|- id="FooY"
! id="Foo1" | A header cell
! style="background: white;" id="Foo2" | A header cell with styling
| id="Foo3" | A data cell
| rowspan="2" id="Foo4" | A data cell spanning two rows
</syntaxhighlight>
The <code>id=</code> attribute may appear before, between or after any other attributes that may be present, but only one <code>id=</code> attribute may be used in each of these areas.

If <code><nowiki>{{anchor}}</nowiki></code> is placed at the start of a vertically centered cell (which is the default for tables) then links to the anchor will jump to the start of the displayed content and not the top of the cell. This may require the reader to scroll up to fully see other cells in the row. It can be avoided by instead placing <code>id=</code> where the row code starts.

== Explanations and examples ==
=== Example 1 ===
<code style="color:darkgreen;"><nowiki>{{</nowiki>{{lc:{{BASEPAGENAME}}}}|Foo<nowiki>}}</nowiki></code> <br /> could be linked to with <code><nowiki>[[#Foo|...]]</nowiki></code> from ''within the same article'' (let's call this article "Qux"), <br /> or it could be linked to with {{nowrap|<code><nowiki>[[</nowiki>Qux#Foo<nowiki>|...]]</nowiki></code>}} from ''other'' articles and from redirects (where the ellipsis after the word "Foo" here means the words chosen to represent that link in the Wikipedia article, which, of course, could be anything).

=== Example 2===
Anchors can be more suitable for inter-article linking than section titles are, because anchors are more stable. For example a section title {{nowrap|1=<code>== Foo ==</code>}} within a Wikipedia article titled <code>Qux</code>:<br /> {{nowrap|1=<code style="color:dimgray;"><nowiki>==</nowiki>{{sp}}<span style="color:darkgreen;"><nowiki>{{subst:</nowiki>{{lc:{{BASEPAGENAME}}}}<nowiki>|Foo bar}}</nowiki></span>{{sp}}Foo <nowiki>==</nowiki></code>}} <br /> Here, links via {{nowrap|1=<code><nowiki>[[</nowiki>Qux#Foo bar<nowiki>]]</nowiki></code>}} would remain valid even if the section were renamed: {{nowrap|1=<code><nowiki>== <span class="anchor" id="Foo bar"></span> On foo and its many friends ==</nowiki></code>}}<br />

=== Example 3 ===
Say you wrote an article about a recently discovered Indo-European language called "Yish Yash". The title of your article would probably be "Yish Yash language" (if there were already an article titled "Yish Yash" that covered the culture generally). Now let's say that within your article you wished to have a section titled "The placement of the tongue when producing Yish Yash vowel sounds". You would create a section heading that looked like this:<br />{{nowrap|1=<code><nowiki>== The placement of the tongue when producing Yish Yash vowel sounds == </nowiki></code>}}<br />Let's say that you then finished up writing and saved the new article. Now, say you came across another article on Wikipedia titled "Proto-Indo-European vowels" which happened to have a section on the unique tongue placement used in Yish Yash. You decided it might be useful here for readers to be able to quickly access the section of your article on Yish Yash tongue placement when forming vowels; however, you don't want to send them to the beginning of the whole article on the Yish Yash language (you wanted to target them more specifically). So you create a link in the Proto-Indo European vowel article to the ''section'' within ''your'' article on the placement of the tongue in Yish Yash: you might do so by editing the text of the Proto-Indo-European vowel article and adding something like this to a relevant place within it:<br /><code><nowiki>[[Yish Yash language#The placement of the tongue when producing Yish Yash vowel sounds|Yish Yash tongue placement]] is particularly interesting.</nowiki></code><br />That is some ''really'' long code, but it would create a direct link to the relevant section of the new Yish Yash language article and would look like this in the article on Proto-Indo-European vowels:<br /> "...<span style="color:blue;">Yish Yash tongue placement</span> is particularly interesting..." <br /> Now let's say another editor came along and wished to change the heading of this section of your article for some legitimate reason—perhaps to "Yish Yash vowels and the tongue". They could do so by editing your article and making the section heading look like this:<br />{{nowrap|1=<code><nowiki>== Yish Yash vowels and the tongue ==</nowiki></code>}}<br />Unbeknownst to that editor, this would mean the link in the article on Proto-Indo-European vowels that you created earlier would now go by default to the top of the Yish Yash article instead of your carefully-chosen subsection! However, if an ''anchor'' were placed within the section heading of the Yish Yash article either when you created it or when the other editor came along and changed it—perhaps something like this:<br />{{nowrap|1= <code><nowiki>== {{subst:Anchor|Tongue}} The placement of the tongue when producing Yish Yash vowel sounds ==</nowiki></code>}}<br />or like this:<br />{{nowrap|1=<code><nowiki>== {{subst:Anchor|Tongue}} Yish Yash vowel–tongue interaction ==</nowiki></code>}}<br />and the text of the article on Proto-Indo-European vowels had been changed by you to something like this:<br />{{nowrap|1=<code><nowiki>[[Yish Yash language#Tongue|Yish Yash tongue placement]] is particularly interesting.</nowiki></code>}}<br />then the link from the Proto-Indo-European article would continue to point to the relevant ''section'' of the Yish Yash article, even if the wording of the section heading there had changed completely and without the reader having to sort it out for themselves. The use of anchors can make for a cleaner, more efficient Wikipedia reading experience where section headings are changed—which they not infrequently are.

== TemplateData ==
{{TemplateDataHeader}}
<templatedata>{
	"description": "Add HTML anchors to a page. Make a link to your anchor with [[#Anchor on same page]] or [[Page you're linking to#Anchor on that page]]. Every anchor on a page must be different. Do not use the characters \" or # or | or =.",
	"params": {
		"1": {
			"label": "First anchor",
			"type": "string",
			"required": true,
			"description": "Name of the anchor",
			"example": "Marriage"
		},
		"2": {
			"label": "Second anchor",
			"type": "string",
			"required": false,
			"description": "Name of the anchor"
		},
		"3": {
			"label": "Third anchor",
			"type": "string",
			"required": false,
			"description": "Name of the anchor"
		},
		"4": {
			"label": "Fourth anchor",
			"description": "Name of the anchor",
			"type": "string",
			"required": false
		},
		"5": {
			"label": "Fifth anchor",
			"type": "string",
			"required": false,
			"description": "Name of the anchor"
		},
		"6": {
			"label": "Sixth anchor",
			"type": "string",
			"required": false,
			"description": "Name of the anchor"
		},
		"7": {
			"label": "Seventh anchor",
			"type": "string",
			"required": false,
			"description": "Name of the anchor"
		},
		"8": {
			"label": "Eighth anchor",
			"type": "string",
			"required": false,
			"description": "Name of the anchor"
		},
		"9": {
			"label": "Ninth anchor",
			"type": "string",
			"required": false,
			"description": "Name of the anchor"
		},
		"10": {
			"label": "Tenth anchor",
			"type": "string",
			"required": false,
			"description": "Name of the anchor"
		}
	},
	"format": "inline"
}</templatedata>

== See also ==
{{Shortcut templates}}
* {{Tl|Anchor comment}}
* {{Tl|Anchored list}}

<includeonly>{{Sandbox other||
<!-- CATEGORIES HERE, AND INTERWIKIS TO WIKIDATA, THANKS -->
[[Category:Wikipedia HTML tag-replacing templates]]
[[Category:Wikipedia section templates]]
[[Category:Templates with no visible output]]
}}</includeonly>