Wikipedia talk:HTML5

{{old move|date=28 May 2023|from=Wikipedia:HTML 5|destination=Wikipedia:HTML5|result=moved|link=Special:Permalink/1157410634#Requested move 28 May 2023}}

toptextcells

Is the toptextcells class defined on the English Wikipedia? --  Gadget850 talk 02:59, 4 August 2014 (UTC)

:{{reply to|Gadget850}} not yet, I think. See MediaWiki talk:Common.css/Archive 14#Class to override default valign. On dewiki, it is available since 2009. Helder 03:34, 4 August 2014 (UTC)

Duplicate information

This is starting to look like Help:HTML in wikitext. Aren't we reinventing the wheel here? -- User:Edokter]] {{talk}} 09:24, 6 December 2014 (UTC)

:Not reinventing, but there is some overlap, which occurs on all help pages. I see the intent here to help update obsolete markup to render proper HTML5, so this help page is much more specific. As this builds, we should add hatnotes to Help:HTML in wikitext directing here for more help. I have been adding cases that I see multiple times. --  Gadget850 talk 13:55, 6 December 2014 (UTC)

<nowiki><br clear=all /></nowiki>

See User_talk:Yobot#Possible_bug for an almost ten years old discussion, {{tl|clear}} is a div (block-element), {{tl|-}} is a br (inline element). –Be..anyone (talk) 13:02, 2 February 2015 (UTC)

What's found

{{U|Edokter}} stated, "It's not about what's "found"; this is the correct syntax, albeit obsolete." Top of the articles states, {{tq|This project serves to organize the adaptation of articles and other Wikipedia pages to HTML5}}. The page is about what is found in in Wikipedia articles and how to correct the issue.

90% of articles had {{tag|br|params=clear=both|s}} not {{tag|br|params=clear=all|s}}. If an person came here looking how to convert {{tag|br|params=clear=both|s}}, there would be no answer.

Converting {{tag|br|params=clear=both|s}} into {{tl|-}} is the correct syntax, but only if the {{tag|br|o}} tag was applied correctly to begin with. It is not in the vast majority of cases. Thus, converting {{tag|br|params=clear=both|s}} into {{tl|clear}} would be more appropriate in the vast majority of cases. Bgwhite (talk) 19:42, 2 February 2015 (UTC)

:I think that part of the confusion is that the two different syntaxes have slightly different sets of permitted values.

:*[http://www.w3.org/TR/html4/struct/text.html#line-breaks The clear= attribute] (valid in HTML 3.2, deprecated in HTML 4.01, obsolete in HTML 5) allows values of none left right or all

:*[http://www.w3.org/TR/CSS21/visuren.html#flow-control the clear: property] of CSS 2.1 (valid within a style="" attribute in HTML 4.01 and HTML 5) allows values of none left right or both (also inherit which we won't worry about here).

:It's the difference in that last value - clear=all vs style="clear:both;" which causes some people to use clear=both or style="clear:all;" and wonder why it doesn't work as intended. Of particular note is that the CSS spec indicates that the clear: property "applies to: block-level elements", and the {{tag|br|s}} element is not block-level, but inline. --Redrose64 (talk) 20:01, 2 February 2015 (UTC)

::I corrected it because the page should list deprecated attributes, not "incorrectly used" ones. As to {{tl|-}}, I feel it would be best to redirect it to {{tl|clear}} anyway. Even tough {{tag|br|params=style="clear:all"|s}} works, it doesn't sit right with me for the same reason Redrose64 pointed out. -- User:Edokter]] {{talk}} 21:16, 2 February 2015 (UTC)

:::Redirecting an inline element to a block element is a seriously bad idea. About as odd as adding display:block to {{tl|-}} or display:inline to {{tl|clear}}. It's a difference, inline elements aren't allowed outside of all blocks (can't happen for wikitext, but still), and block elements are allowed in some places, where inline is allowed. The goal of this exercise is to get valid pages, if all you want is working (guaranteed by HTML5) just doing nothing would be fine. –Be..anyone (talk) 01:37, 4 February 2015 (UTC)

::::But clear can only apply to block elements, so {{tag|br|params=style="clear:all"|s}} basically forces the inline {{tag|br|s}} element to behave as block. There is no difference in rendering, so why continue to use an invalid construct? -- User:Edokter]] {{talk}} 09:37, 4 February 2015 (UTC)

:::::I think {{tl|-}} adds a blank line where {{tl|clear}} does not. I most often see {{tl|-}} at the bottom of an article, right before the navboxes. People want the extra blank space between External links and the navboxes. Neither one is used properly because 99% of the people don't understand the difference. One can argue about which is correct for when, but it is moot as nobody will uses it properly. {{tl|-}} should just point to {{tl|clear}}. Bgwhite (talk) 10:04, 4 February 2015 (UTC)

::::::That is what I have been argueing :) I fixed the navbox margin issue long ago... in 2011. -- User:Edokter]] {{talk}} 12:08, 4 February 2015 (UTC)

:::::::{{U|Edokter}} [https://en.wikipedia.org/w/index.php?title=Liga_Veneta&action=history Here is an example] of a person only using it for a blank space. Bgwhite (talk) 19:19, 4 February 2015 (UTC)

::::::::I think I'll increase the margin. This is unintended use. -- User:Edokter]] {{talk}} 21:05, 4 February 2015 (UTC)

:::::::::Thank you Edokter. They also use comments for blank space. My favourite example is in German submarine U-139 (1940). The same comment is in 4,400 articles. Bgwhite (talk) 23:17, 4 February 2015 (UTC)

::::::::::Wow... That seems to have no effect at all. If AWB is responsible, that task should be killed and replaced with one to remove them. -- User:Edokter]] {{talk}} 23:48, 4 February 2015 (UTC)

:::::::::::It has no effect because all it does is ensure the presence of a vertical gap (whose depth is equivalent to at least three blank lines) on the left of the page below the last EL. But that infobox on the right pushes the navbox down much further. Just remove the comment and two of the three blank lines. --Redrose64 (talk) 00:22, 5 February 2015 (UTC)

::::::::::::The comment is intended to keep AWB and other scripts from removing the whitespace. I see thet Yobot fixed the break and was reverted. --  Gadget850 talk 00:32, 5 February 2015 (UTC)

:{{od|11}} Yobot replaced the br tags with the template. In any case, adding whitespace should no longer be necessary, so those comments can go. -- User:Edokter]] {{talk}} 08:30, 5 February 2015 (UTC)

Folks, please stop this now,
is not the same as what {{tl|clear}} does, i.e., an empty

. As noted above the
forces a line break in addition to anything the style= does, that's not the case for
. The
will be invalid in some places, where the
is valid. The bot trying to fix obsolete tags should produce valid HTML5, not some "who knows and most of the {{tl|clear}} is okay" effect. In doubt read the HTML3, HTML4, and HTML5 standards, look for inline, block,
, and
. Ignore CSS, everybody here agrees on how style="clear:… work. –Be..anyone (talk) 22:45, 7 February 2015 (UTC)

:You do know that {{tag|br|s|params=style="clear: ..."}} not valid HTML, don't you? clear can only be applied to block level elements, which {{tag|br|s}} is not. Also, forcing a linbreak makes little sense when a div always starts a new block context. Do you have an actual use case where this invalid markup is actually needed? -- User:Edokter]] {{talk}} 23:31, 7 February 2015 (UTC)

::No, I didn't know that, but I'll check it, after all {{tl|-}} would have to be fixed. I tried to get the right side of the or right. Now after you fixed the left side, which I never touched, yes, of course {{tl|clear}} matches

, one line in both templates is easy enough for me.{{=P}} –Be..anyone (talk) 23:48, 7 February 2015 (UTC)

::[http://www.w3.org/TR/html5/text-level-semantics.html#the-br-element HTML5] says that
can have global attributes including [http://www.w3.org/TR/html5/dom.html#global-attributes style]. Please post CSS links, why that's not as simple as it sounds. –Be..anyone (talk) 00:06, 8 February 2015 (UTC)

:::In HTML 4 and HTML 5, all HTML tags that are valid in the body may be given the style= attribute, there are no exceptions. However, what is valid inside the attribute varies. I already provided some links, in my post of 20:01, 2 February 2015 - to save you reading the whole of my post, the relevant bits are '[http://www.w3.org/TR/CSS21/visuren.html#flow-control the clear: property] of CSS 2.1' and 'the CSS spec indicates that the clear: property "applies to: block-level elements"'. --Redrose64 (talk) 00:24, 8 February 2015 (UTC)

::::Sounds good for CSS2.1 and whatever WD-css3-break tries to tell me, possible fixes for {{tl|-}}:

:::##REDIRECT Template:Clear {{R from template shortcut}}

:::#

::::The latter would cover the former HTML3 and XHTML1 transitional
edit history for this beast. –Be..anyone (talk) 13:44, 9 February 2015 (UTC)

::::Update: mw:Template:Clear/doc and mw:Template:-/doc should now be "clear", and notably "exist".  Be..anyone (talk) 14:36, 9 February 2015 (UTC)

:::::That (2) is ugly... {{tag|br|o}} adds nothing, so why keep using it? -- User:Edokter]] {{talk}} 14:53, 9 February 2015 (UTC)

::::::Understood and seconded, but I don't trust that we got the "with" vs. "without" line break right, I don't trust that all popular browsers support a self-closing or empty

, and I vaguely recall tricky layout fixes where the traditional {{tl|-}} worked as expected recently and nine years ago. –Be..anyone (talk) 15:22, 9 February 2015 (UTC)

:::::The clear: property is also in CSS 3, but that's a long time a-comin'. To speed up the process, they broke it down into modules, only few of which (like those for selectors and colour) are finalised as W3C Recommendation. [http://www.w3.org/TR/css3-box/#the-lsquo2 The clear: property] is in [http://www.w3.org/TR/css3-box/ CSS basic box model] which is a [http://www.w3.org/2005/10/Process-20051014/tr#q73 W3C Working Draft] (i.e. a long way from approval, but not rejected either). Its last full revision was 9 August 2007 (previous versions were 24 October 2002 and 26 July 2001). --Redrose64 (talk) 15:43, 9 February 2015 (UTC)

:::::We've not (yet) arrived in Lala-land, checking WhatWG and HTML 5.1 I found this pearl of wisdom (unrelated to validity, only for rendering):

"User agents are expected to support the 'clear' property on inline elements (in order to render br elements with clear attributes) in the manner described in the non-normative note to this effect in CSS2.1."

:::::There's even a rule to consider clear=all and clear=both as clear:both. –Be..anyone (talk) 23:45, 9 February 2015 (UTC)

::::::Source? -- User:Edokter]] {{talk}} 00:01, 10 February 2015 (UTC)

:::::Maybe not only my Chrome refuses to show the

URL, but it's visible in the source editor; almost verbatim Hixie's WhatWG living standard as of January. Caveat: this is off topic (rendering, not validity.) –Be..anyone (talk) 15:53, 10 February 2015 (UTC)

::::::The cite attribute is always invisible, and HTML5.1 is not relevant here. -- User:Edokter]] {{talk}} 16:35, 10 February 2015 (UTC)

Big

One should never use hardcoded pixels for font sizes, because they will derail on browsers that have their fontsizes set different form the default (16px on Windows). You can review the actualy effect at User:Edokter/fonttest. -- User:Edokter]] {{talk}} 12:27, 23 February 2015 (UTC)

:Currently the advice for nested big is to use CSS with pixels. I did some testing with percentages using {{tl|resize}} at User:Gadget850/big. Is there any official guidance? --  Gadget850 talk 12:51, 23 February 2015 (UTC)

::I examined the effects of {{tag|big|o}} and font-size: larger; in all major browsers, and fortunately, they all result in an increase of exactly 120%. {{tag|small|o}} and font-size: smaller; are not so consistent, but generally results in 85%. The non-relative keywords form font-size: xx-small; to font-size: xx-large; are hardcoded to 9, 10, 13, 16, 18, 24 and 32px respectively, regardless of default font size settings and scale with the browser font-size. -- User:Edokter]] {{talk}} 13:13, 23 February 2015 (UTC)

:::I see why this is complex. On my test page, measured with [http://www.spadixbd.com/freetools/jruler.htm JRuler]:

:::* Firefox 36: {{tag|big|o}} x 5 shows as 195px wide, 249% is 122px, 400% is 194px (my original selection).

:::* IE11: {{tag|big|o}} x 5 shows as 108px wide, 249% is 122px.

:::I see {{tag|big|o}} x 5 used in two articles to increase the size of a Unicode character. --  Gadget850 talk 14:23, 23 February 2015 (UTC)

::::Bah, I never tested the nested bigs... it works in Chrome, but FF and Opera make them grow exponentially. I think this is all the more reason to 'ban' all uses of {{tag|big|o}}, especially the nested ones. -- User:Edokter]] {{talk}} 15:41, 23 February 2015 (UTC)

::The official guidance from W3C is that {{tag|big}} should be styled with the declaration font-size: larger;, see the HTML 5 spec, section [http://www.w3.org/TR/html5/rendering.html#phrasing-content-0 10.3.4 Phrasing content]. --Redrose64 (talk) 16:54, 23 February 2015 (UTC)

:::Yes, but the issue at hand is nested big. The only thing I can find is "Font style elements may be nested and they must be properly nested. Rendering of nested font style elements depends on the user agent."[http://www.w3.org/TR/WD-html40-970708/present/graphics.html#h-8.2.2.1] Which does not give any specifics on the size of nested bigs. --  Gadget850 talk 18:12, 23 February 2015 (UTC)

::::I would expect the font size to increase exponentially: {{tag|big|content={{tag|big}}}} should give a "larger" size that is itself made "larger", and if on a given browser, font-size: larger; equates to 120%, then 120% * 120% is 144% and nesting five {{tag|big}} should give 120%^5 or 248.832% --Redrose64 (talk) 18:51, 23 February 2015 (UTC)

:::::Added another test at User:Gadget850/big. Firefox expands {{tag|big|o}} x5 about 450% of standard and IE11 about 220%.

:::::I agree with Edokter: nested big is a Bad Thing™. --  Gadget850 talk 23:36, 23 February 2015 (UTC)

= Font size templates =

class="wikitable"
TemplateSizeTransclusionsSample
{{tl|small}}{{tag|small|o}} 85%229,904{{small|HHHHH}}
{{tl|smaller}}90%754,69{{smaller|HHHHH}}
{{tl|midsize}}92%61{{resize|HHHHH}}
noneHHHHH
{{tl|larger}}110%258{{larger|HHHHH}}
{{tl|big}}120%64,249{{big|HHHHH}}
{{tl|large}}large6,803{{large|HHHHH}}
{{tl|huge}}180%37{{huge|HHHHH}}
{{tl|resize}}90% default92,918{{resize|HHHHH}}
{{tl|font}}

class="wikitable"

|+ At TfD

TemplateSizeNotes
{{tl|initial}}500%dropcap (unused)
{{tl|giant}}900%(4 uses)
{{tl|bigbold}}{{tag|big|o}}with bold (24 uses)
{{tl|bu}}{{tag|big|o}}with underline (15 uses)

centering score and code tags

Wikipedia:HTML5#Parser tags doesn't list how to center {{tag|score|o}} or {{tag|code|o}} tags. Could these be added to the list? Bgwhite (talk) 20:36, 23 February 2015 (UTC)

:The {{tag|code}} element is inline, so centring it is as effective and as useful as attempting to centre the {{tag|b}} or {{tag|i}} elements. As for {{tag|score}}, it apparently doesn't recognise the class=center attribute, but there's no reason you couldn't do this:

{c' d' e' f' f' fes' eis' e'}

:that is, wrap it in {{tag|div|params=class=center}} --Redrose64 (talk) 21:22, 23 February 2015 (UTC)

::Or {{tl|center}}, which is cleaner in the markup. {{tag|code|o}} is a standard HTML element used to add semantics and presentation to text: use {{tl|center}} just as you would with any other text. --  Gadget850 talk 22:49, 23 February 2015 (UTC)

:::Thank you both. Bgwhite (talk) 00:13, 24 February 2015 (UTC)

Stats

It would be nice to have some sort of stats page that could keep a record of progress. I've been doing one for my own use for a number of attributes & tags in the template space. Template Progress. -- WOSlinker (talk) 21:23, 23 February 2015 (UTC)

:I don't see that we are ever going to update all markup at this point. Editors are going to keep using the markup they know until they are forced to change. {{phab|T40487}} has been open for two years: The link= button on the editing toolbar adds {{tag|big|o}}.

:I have seen some comments that obsolete HTML breaks with mobile browsers, but I have not been able to track any specifics.

:There have been some proposals to automatically update HTML, but with the weird stuff I have seen that will probably just break a lot of things.

:If you really want to make use obvious, change the site CSS so an element gets wrapped in a big red error. But this will just piss of a bunch of folks.

:But if you really want stats, then use the search links I added and track uses. I'm sure you could do something with the API, but I have no experience there. --  Gadget850 talk 23:56, 23 February 2015 (UTC)

::For {{tag|font|o}}, {{tag|strike|o}} and {{tag|br|o|params=clear}} tags in articles, you can look at CheckWiki errors [https://tools.wmflabs.org/checkwiki/cgi-bin/checkwiki.cgi?project=enwiki&view=only&id=40 #40], [https://tools.wmflabs.org/checkwiki/cgi-bin/checkwiki.cgi?project=enwiki&view=only&id=42 #42] and [https://tools.wmflabs.org/checkwiki/cgi-bin/checkwiki.cgi?project=enwiki&view=only&id=2 #2] respectively. There is a CheckWiki error to find {{tag|big|o}} tags, but it isn't turned on at the moment. Also, unlike the first three tags that have been cleaned up, there are a ton of {{tag|big|o}} tags still left in articles. Bgwhite (talk) 00:11, 24 February 2015 (UTC)

:::{{replyto|Gadget850}} Some obsolete HTML does break in mobile browsers, but all the confirmed reports of this concern markup that was never a non-deprecated part of the formal HTML specs, such as the bgcolor= attribute on tables. This attribute first appeared in the HTML spec in HTML 3.2 when it was only shown for [http://www.w3.org/TR/REC-html32#body the {{tag|body}} element]; in HTML 4 it was also shown for [http://www.w3.org/TR/html4/struct/tables.html certain table elements] ({{tag|table}} {{tag|tr}} {{tag|th}} {{tag|td}}) but [http://www.w3.org/TR/html4/present/graphics.html#adef-bgcolor marked as deprecated]. I believe that the idea was that if it was formally described as deprecated, people would be discouraged from using it; but if it wasn't described at all, people might use it by copying bad practice from some webpage that they liked the look of, not being aware of its non-universal recognition. A bit like the {{tag|blink}} element (only recognised by NetScape and Firefox) or {{tag|marquee}} (IE). --Redrose64 (talk) 10:44, 24 February 2015 (UTC)

Accessibility and HTML 5

Per a request by {{u|Guy Macon}} and in response to some practices in the wild that I've seen, I'm adding a section here about accessibility and HTML. One relevant problem that I have seen many times is the misuse of {{tag|small}}: note that in HTML 5, this is defined semantically to mean fine print which stylistically is generally smaller but is not the same thing as (e.g.) {{tlx|small}}. I recommend editors who typically look at this page review it for accessibility and semantic reasons and ensure that the text meets those needs. ―Justin (koavf)TCM 22:25, 29 June 2020 (UTC)

Template:Tooltip, Template:Hover_title, and Template:Abbr

{{FYI|pointer=y}}

Please see: Wikipedia:Templates for discussion/Log/2020 December 3#Template:Hover title and Template:Tooltip

Summary:

  • {{tlx|Abbr}} (a wrapper for {{tag|abbr}}) has long been abused for non-abbreviation markup (against the HTML specs).
  • We had a template, {{tlx|Tooltip}}, with {{tag|span}} for non-abbreviation use, but it was "merged" (not really) and redirected to {{tnull|Abbr}}.
  • The redir was then deprecated (for the reason mentioned above), but the community ignored the deprecation.
  • In the interim, {{tlx|Hover title}} was created to do the same thing, but with backwards parameters (and some additional features).
  • Both the {{tnull|Tooltip}} then-redirect and {{tlx|Hover title}} template have been transcluded in tens of thousands of articles, mainly via infoboxes and other templates.
  • I created a new {{tlx|Tooltip}} template, with all the features of {{tnull|Hover title}} but preserving the {{tlx|Abbr}} parameter order (to not break deployed translcusions).
  • The TfM linked above would merge away {{tlx|Hover title}}, but it's going to require flipping the {{para|1}} and {{para|2}} parameters of its extant instances.
  • Oh, and the documentation would need updating after merger, of course.

 — SMcCandlish ¢ 😼  00:26, 4 December 2020 (UTC)

Font color

{{replyto|Dinoguy1000}} Some browsers will attempt to interpret an invalid color name as a hex value. For example, Firefox shows all of these as the same dark red colour:

  • font color=bronze
  • font color="#bronze"
  • span style="color:#b0000e;"

but all of these are displayed as black:

  • span style="color:b0000e;"
  • span style="color:bronze;"
  • span style="color:#bronze;"

It appears that valid hex digits (b, e) are taken as-is, whereas invalid digits (r, o, n, z) are treated as zero. --Redrose64 🌹 (talk) 16:35, 6 January 2022 (UTC)

Yes, this was the long discussion on discord they mentioned ;) —TheDJ (talkcontribs) 16:39, 6 January 2022 (UTC)

:I don't know what is the algorithm that font uses for invalid color names, but in Opera, font color="jade" renders a shade of green and font color="vermillion" renders a shade of red similar to their actual colors. So it does give the appearance that font accepts more color names than CSS. I have occassionally seen this type of non-standard color names being used in signatures. ಮಲ್ನಾಡಾಚ್ ಕೊಂಕ್ಣೊ (talk) 18:34, 6 January 2022 (UTC)

::The algorithm is described (possibly incorrectly; when I follow it as described there for the value harlequin, I get the wrong color - #0A0E00 instead of the actual #A0E000) in the top answer on https://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color, or, if you prefer an actual W3C/WhatWG standard, on https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-a-legacy-colour-value (I tried, but failed, to find where it was defined in the HTML 3.2 spec). ディノ千?!☎ Dinoguy1000 18:44, 6 January 2022 (UTC)

:::harlequin converts to 0A0-0E0-000 but then with step 14 in the W3C/WhatWG standard, since each part of the color starts with 0 and the length is more than 2, we have to trim off the leading zero to get A0-E0-00 which is #A0E000

:::jade is padded out with 0's to make the length a mutiple of 3, as jade00 and then it converts to 0A-DE-00 which is #0ADE00 -- WOSlinker (talk) 19:58, 6 January 2022 (UTC)

::::Oh! The trim-leading-0's step wasn't included in the SO answer; that would be why I got the wrong value when I tried. ディノ千?!☎ Dinoguy1000 23:13, 6 January 2022 (UTC)

:::For those who prefer visuals, a good explanation was recently on Jake Archibald's v/podcast: https://www.youtube.com/watch?v=doeOKTZSX6A&t=150s —TheDJ (talkcontribs) 23:28, 6 January 2022 (UTC)

Requested move 28 May 2023

:The following is a closed discussion of a requested move. Please do not modify it. Subsequent comments should be made in a new section on the talk page. Editors desiring to contest the closing decision should consider a move review after discussing it on the closer's talk page. No further edits should be made to this discussion.

The result of the move request was: moved. (closed by non-admin page mover)MaterialWorks 12:08, 4 June 2023 (UTC)

----

:Wikipedia:HTML 5 → {{no redirect|Wikipedia:HTML5}} – HTML5 without space after HTML5. Eurohunter (talk) 11:43, 28 May 2023 (UTC)

  • Support per [https://blog.whatwg.org/spelling-html5]. Nardog (talk) 11:59, 28 May 2023 (UTC)

The discussion above is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.