View source for Help:Markup validation

{{information page|H:MARKV}}
The [[W3C Markup Validation Service]] lets editors check web pages for conformance to [[HTML]] and [[XHTML]] standards. It is helpful for catching minor problems such as duplicate section names or citation IDs. Although most major browsers will tolerate many of the errors, and will display a document successfully even if it contains errors, they may misbehave on documents that contain the errors: for example, they may go to the wrong section or citation if you click the mouse on a wikilink. Checking that a page contains valid HTML can thus fix these minor glitches while also increasing portability to unusual browsers.

To check the HTML for a Wikipedia article ''XYZ'', visit the service's home page and enter the text "<code><span class="plainlinks">{{canonicalurl:XYZ}}</span></code>".

== Current issues ==
{{shortcut|WP:HTMLBUGS}}
These errors require developer fixes and should be ignored by editors. When checking for endemic errors, ensure a blank page is used, such as [[Special:BlankPage]].
* {{W3C validation|Special:BlankPage}}

Any page with an edit link:
{{tracked|40385}}
* <code>Bad value edit for attribute rel on element link: Keyword edit is not registered.</code> This issue does not show for [[Special:BlankPage]].

Any page with a file (image):
* <code>Attribute srcset not allowed on element img at this point.</code>
:This is allowed per the [http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#the-img-element HTML Living Standard]. <code>srcset</code> allows the MediaWiki software to render alternate images based on the device capabilities. The W3C HTML validator has not yet been updated to support this and throws an error.

Any page with a nonstandard language code:
* <code>Bad value <var>xxx</var> for attribute lang on element a: The language subtag <var>xxx</var> is not a valid ISO language part of a language tag.</code>
:Some Wikipedias use language codes that are not listed per RFC 5646. See the deprecated and nonstandard languages at [[m:List of Wikipedias|List of Wikipedias]]. See also [[Help:Interlanguage links]].

== Valid HTML ==
While current browsers are quite forgiving of HTML errors, invalid HTML can cause issues with accessibility, search engines and portability. Various browsers may handle errors differently, thus the display may differ.

For most editors, creating valid HTML is not an issue. The [[MediaWiki]] software converts wikimarkup into valid HTML (with occasional bugs). The English Wikipedia has used [[HTML Tidy]], a now-outdated HTML4 library, to help ensure that common typos and mistakes are converted into proper HTML4.  However, Tidy could not fix all problems, there is no way to disable it for testing and validation will not show issues fixed by Tidy.  Furthermore, Tidy is [[:mw:Parsing/Replacing Tidy|slated for removal]] at Wikipedia, so previously overlooked errors need to be fixed.

Portability issues occur when pages are exported to other wikis that do not use HTML Tidy and HTML errors are exposed.

Editors who use referencing methods such as [[Wikipedia:Footnote3|Footnote3]] should always validate pages. Use of these templates make it very easy for an editor to create duplicate HTML ids, causing invalid HTML and in-page linking issues – this is probably the most common validation issue on Wikipedia. There is little or no error checking for manual templates.

Editors who develop templates should always test various uses and ensure they render valid HTML.

== Validation tools ==
The [[World Wide Web Consortium|W3C]] is the main international standards organization for the internet— they provide the [[W3C Markup Validation Service]]. Simply copy the full URL of the page to be validated and paste in into the validator. There is also a [[favelet]] that you can add to your browser bookmarks that will validate the current page.

The WDG HTML Validator has a batch mode that allows a list of URLS to be validated.

== Common diagnostics and how to fix them ==
This section gives examples of diagnostics generated by the markup validation service, and suggests possible fixes. Diagnostics are by line and column of the generated HTML for the page. It may be helpful to obtain the HTML in order to understand the diagnostic. For example, if you using the [[Firefox]] browser, you can type control-U to see the HTML.

=== ID already defined ===
:[[File:Deletion icon.svg|x15px|alt=|link=]] ''Line 630, Column 88'': '''ID "CITEREFBarker2008" already defined'''
: <code><nowiki>...</a></b> <span class="citation" id="</nowiki><abbr title="Position where error was detected." style="color:red"><strong>C</strong></abbr>ITEREFBarker2008">Barker, Janice (2008-0</code>
:: <small>An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).</small>

This error occurs if an article contains multiple invocations of the {{tl|citation}} template with the same author and year; the above error was prompted by an article that cited two different documents, both written by Barker in 2008. Disambiguate the citations by putting letters after the years (''e.g.'', {{para|year|2008a}}, {{para|year|2008b}}), or by using the [[Template:Citation#Anchored citations|<code>ref=</code> parameter of {{tlf|citation}}]].

HTML ids are only needed when using [[Help:Shortened footnotes|Shortened footnotes]] or [[WP:Parenthetical referencing|Parenthetical referencing]]. A {{tl|citation}} template or [[Help:Citation Style 1|Citation Style 1]] template will generate an HTML id by default.

:[[File:Deletion icon.svg|x15px|alt=|link=]] ''Line 93, Column 231'': '''ID "ref_1" already defined'''
: <code>...ence plainlinks nourlexpansion" id="<abbr title="Position where error was detected." style="color:red"><strong>r</strong></abbr><nowiki>ef_1"><a href="#endnote_1">1</a></sup><...</nowiki></code>
:: <small>An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).</small>

This similar diagnostic occurs if an article contains multiple invocations of {{tl|ref}} with the same ID, for example, two instances of "<code><nowiki>{{ref|1|1}}</nowiki></code>". To fix the problem, use different IDs. Templates using the <var>ref_</var> id prefix include {{tl|ref}}, {{tl|ref label}}, {{tl|cref}} and {{tl|cref2}}.

=== Missing alt text ===
:[[File:Deletion icon.svg|x15px|alt=|link=]] ''Line 135, Column 108'': '''required attribute "alt" not specified'''

: <code><nowiki>...,107" title="Hurricane Ida (2009)" /</nowiki><abbr title="Position where error was detected." style="color:red"><strong>&gt;</strong></abbr></code>
:: <small>The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element....</small>

This diagnostic can result from use of the [[:mw:Extension:EasyTimeline/syntax|EasyTimeline]] extension, which does not support [[Wikipedia:Accessibility|accessibility]] and does not generate [[Wikipedia:Alternative text for images|alternative text]] for visually impaired readers. Such a problem can be fixed by redoing the timeline as text, as an image, or as an [[mw:Extension:ImageMap|image map]].

=== Element dl is missing a required instance of child element dd ===

:[[File:Deletion icon.svg|x15px|alt=|link=]] ''Error Line 78, Column 5'': '''Element dl is missing a required instance of child element dd.'''
: <code></dl<span style="color:red"><strong>&gt;</strong></span></code>
:: <small>Content model for element dl:</small>
::: <small>Zero or more groups each consisting of one or more dt elements followed by one or more dd elements.</small>

Definition lists are created with the wikimarkup <code>;</code> to define a definition list and <code>:</code> to define the item in the list. This diagnostic results when the <code>:</code> is missing.

* Indentation is created using the <code>:</code> markup. This creates a definition list with no child element. {{phab|6521}}
* This also occurs when <code>;</code> is misused to bold a line. Use the wikimarkup <code><nowiki>'''</nowiki></code> to bold characters.

== CSS validation ==
The W3C also has a CSS validator, but this is less of an issue when editing Wikipedia pages, as CSS is an option and CSS validation errors typically are due to problems with skins, not problems in individual pages.

== See also ==
* Template {{tl|W3C validation}}

== External links ==
*[http://validator.w3.org/ The W3C Markup Validation Service]

*[http://validator.w3.org/favelets.html The W3C Markup Validation Service— Favelets For The Validator]

*[http://jigsaw.w3.org/css-validator/ The W3C CSS Validation Service]

{{Wikipedia technical help|collapsed}}
[[Category:Wikipedia editor help]]