Rectangle 27 14

The spec seems to clear up this issue. script and style tags are considered to be "raw text elements." CDATA is not needed or allowed for them. CDATA is only used with "foreign content" - i.e. MathML and SVG. Note that there are some restrictions to what can go in the script tag -- basically you can't put something like var x = '</script>' in there because it will close the tag and needs to be split like pst noted in his answer. http://www.w3.org/TR/html5/syntax.html#cdata-rcdata-restrictions

Should I use in HTML5? - Stack Overflow

cdata html5
Rectangle 27 14

The spec seems to clear up this issue. script and style tags are considered to be "raw text elements." CDATA is not needed or allowed for them. CDATA is only used with "foreign content" - i.e. MathML and SVG. Note that there are some restrictions to what can go in the script tag -- basically you can't put something like var x = '</script>' in there because it will close the tag and needs to be split like pst noted in his answer. http://www.w3.org/TR/html5/syntax.html#cdata-rcdata-restrictions

Should I use in HTML5? - Stack Overflow

cdata html5
Rectangle 27 23

I'm not so sure about these answers. As I've just read: "CUSTOM TAGS HAVE ALWAYS BEEN ALLOWED IN HTML."

The point here being, that HTML was based on SGML. Unlike XML with its doctypes and schemas, HTML does not become invalid if a browser doesn't know a tag or two. Think of <marquee>. This has not been in the official standard. So while using it made your HTML page "officially unapproved", it didn't break the page either.

Then there is <keygen>, which was Netscape-specific, forgotten in HTML4 and rediscovered and now specified in HTML5. And also we have custom tag attributes now, like data-XyZzz="..." allowed on all HTML5 tags.

So, while you shouldn't invent a whole custom unspecified markup salad of your own, it's not exactly forbidden to have custom tags in HTML. That is however, unless you want to send it with an +xml Content-Type or embed other XML namespaces, like SVG or MathML. This applies only to SGML-confined HTML.

Also of interest here: librador.com/2009/10/20/Styling-undefined-tag-names-in-HTML "You can use any tag name in HTML, and it will be part of the DOM and can be styled."

So while using it made your html page "official unapproved", it didn't break the page either. um, try styling your invented elements in Internet Explorer. It wont work. You might not consider that broken, but the fact that custom tags are invalid and dont work in Internet Explorer, I dont see how you can argue theyre allowed.

I mean, he doesnt back up his statement with anything. Just because Douglas Crockford said it, it doesnt mean its true.

This is what the specs say: "This specification does not define how conforming user agents handle ... elements ... not specified in this document. [...] we recommend the following behavior: If a user agent encounters an element it does not recognize, it should try to render the element's content. [...] authors and users must not rely on specific error recovery behavior" - IMHO this means that Crockfor is wrong, for once.

@Costa: HTML is useful because it's a set of agreed meanings for tags. For example, browsers make links clickable because we've agreed (via the HTML spec) that the <a> tag is a link to another page. You can create your own markup salad, but it won't have meaning to anyone else except yourself. For a given purpose, that might be fine, but you're not really using HTML any more.

Is there a way to create your own html tag in HTML5? - Stack Overflow

html5
Rectangle 27 23

I'm not so sure about these answers. As I've just read: "CUSTOM TAGS HAVE ALWAYS BEEN ALLOWED IN HTML."

The point here being, that HTML was based on SGML. Unlike XML with its doctypes and schemas, HTML does not become invalid if a browser doesn't know a tag or two. Think of <marquee>. This has not been in the official standard. So while using it made your HTML page "officially unapproved", it didn't break the page either.

Then there is <keygen>, which was Netscape-specific, forgotten in HTML4 and rediscovered and now specified in HTML5. And also we have custom tag attributes now, like data-XyZzz="..." allowed on all HTML5 tags.

So, while you shouldn't invent a whole custom unspecified markup salad of your own, it's not exactly forbidden to have custom tags in HTML. That is however, unless you want to send it with an +xml Content-Type or embed other XML namespaces, like SVG or MathML. This applies only to SGML-confined HTML.

Also of interest here: librador.com/2009/10/20/Styling-undefined-tag-names-in-HTML "You can use any tag name in HTML, and it will be part of the DOM and can be styled."

So while using it made your html page "official unapproved", it didn't break the page either. um, try styling your invented elements in Internet Explorer. It wont work. You might not consider that broken, but the fact that custom tags are invalid and dont work in Internet Explorer, I dont see how you can argue theyre allowed.

I mean, he doesnt back up his statement with anything. Just because Douglas Crockford said it, it doesnt mean its true.

This is what the specs say: "This specification does not define how conforming user agents handle ... elements ... not specified in this document. [...] we recommend the following behavior: If a user agent encounters an element it does not recognize, it should try to render the element's content. [...] authors and users must not rely on specific error recovery behavior" - IMHO this means that Crockfor is wrong, for once.

@Costa: HTML is useful because it's a set of agreed meanings for tags. For example, browsers make links clickable because we've agreed (via the HTML spec) that the <a> tag is a link to another page. You can create your own markup salad, but it won't have meaning to anyone else except yourself. For a given purpose, that might be fine, but you're not really using HTML any more.

Is there a way to create your own html tag in HTML5? - Stack Overflow

html5
Rectangle 27 2

When using XHTML you can mix it with other XML content, f.e. MathML, SVG or your own proprietary format, by just changing namespace at some point. Also, you can embed XHTML inside other XML documents.

(well, actually MathML and SVG can be used in non-XML HTML5 too, but they are special-cased)

IE doesn't support HTML5 in the first place though, does it?

I always had the freedom not to call IE a web browser. HTML5 was designed for compatibility, so at least some parts of a web page will work.

@jalf, it does. Well, depends what you mean by support. HTML5 is designed to be backwards compatible. It follows the principle of graceful degradation.

HTML5 syntax - HTML vs XHTML - Stack Overflow

html xhtml html5
Rectangle 27 1

Consider your audience and your needs. I write pages such as class tests with a target audience of students in my courses who use FireFox 3 in an Ubuntu equipped computer laboratory. I need SVG with MathMl embedded as a foreignObject in the SVG. I use the HTML5 doctype and new HTML5 tags freely.

html5 - Any reason not to start using the HTML 5 doctype? - Stack Over...

html html5 doctype
Rectangle 27 1

Consider your audience and your needs. I write pages such as class tests with a target audience of students in my courses who use FireFox 3 in an Ubuntu equipped computer laboratory. I need SVG with MathMl embedded as a foreignObject in the SVG. I use the HTML5 doctype and new HTML5 tags freely.

html5 - Any reason not to start using the HTML 5 doctype? - Stack Over...

html html5 doctype
Rectangle 27 2

HTML5 is not part of SGML but XHTML is prt of XML which is part of SGML. So you can have empty tags within HTML5 but not within XHTML.

You can extend XHTML with any XML structure as long as you provide a DTD for that format. in HTML5 there are only some extesions like SVG, MathML which you can use.

I really liked XHTML because it is like XML but HTML5 has a lot more to offer beside other XML formats. Just google a bit what Google, Mozilla, YouTube etc. has to offer with HTML5 and how much you can do with pure HTML5+CSS3 and without the need of JavaScript.

XHTML is not a part of XML - XHTML is XML.

Technically in XHTML you can have empty tags; you just can't have unclosed empty tags.

@Richard: Sorry forget the unclosed. @Bears: XHTML is not equal to XML it is "A" XML format and part of the XML language.

What is the role of xhtml in Html5? - Stack Overflow

xhtml html5
Rectangle 27 7

When and how optional end tags should behave, in HTML5 spec:

Void elements only have a start tag; end tags must not be specified for void elements.

Element Type    Start Tag  End Tag
=============== =========  =========
Normal          -          O (some)
   html         O*         O*
   head         O*         O*
   body         -          O*
   li           -          O*
   dt           -          O*
   dd           -          O*
   p            -          O*
   rt           -          O*       
   rp           -          O*
   optgroup     -          O*
   option       -          O*
   colgroup     O*         O*
   thead        -          O*
   tbody        -          O*
   tfoot        -          O*
   tr           -          O*
   td           -          O*
   th           -          O*
   otherwise    -          -
Raw text        -          -
   script
   style
RCDATA          -          -
   textarea
   title
Void            -          F
   area
   base
   br
   col
   command
   embed
   hr
   img
   input
   keygen       
   link
   meta
   param
   source
   track
   wbr
Foreign         -          -          
   MathML
   SVG

Commenting to note that, as per the spec, self-closing void elements is not required but also not forbidden.

First, there doesn't appear to be a <command> element, at least not according to the HTML 5 spec linked to above. Secondly, it specifically states that "end tags must not be specified for void elements." Personally, I think this is stupid - not requiring it is acceptable but disallowing it is ridiculous, but that's just me. Am I reading the wrong spec? I should also mention that it does allow, e.g. <br/>, i.e. a self-closing void element. Just another instance of lack of consistency if you ask me.

w3c - HTML5: Where is the spec for which end tags are forbidden? - Sta...

html5 w3c
Rectangle 27 11

Use HTML (HTML4 Strict or HTML5).

XHTML1.0 has exactly the same semantics and separation of presentation from structure as HTML4.01. Anybody who says otherwise, hasn't read the specification. I encourage everybody to read the spec it's suprisingly short and uninteresting.

  • Stylesheets were introduced in HTML4.01 and were not changed in XHTML1.0.
  • Presentational elements were deprecated in HTML4.01 and were not removed in XHTML1.0.

There are no untractable differences in HTML and XHTML that would make parsing of one much slower than another. It depends how the parser is implemented.

  • Both SGML and XML parsers need to load and parse entire DTD in order to understand entities. This alone is usually more work than parsing of the document itself. HTML parsers almost always "cheat" and use hardcoded entities and element information. XHTML parsers in browsers cheat too.
  • Parsing of HTML requires handling of implied start and end tags, and real-world HTML requires additional work to handle misplaced tags.
  • Proper parsing of XHTML requires tracking of XML namespaces.
  • Draconian XML rules require checking if every character is properly encoded. HTML parsers may get away with this, but OTOH they need to look for <meta>.

The overall difference in cost of parsing is tiny compared to time it takes to download document, build DOM, run scripts, apply CSS and all other things browsers have to do.

At the end of the day, why choose XHTML over HTML? - Stack Overflow

html xhtml
Rectangle 27 11

Use HTML (HTML4 Strict or HTML5).

XHTML1.0 has exactly the same semantics and separation of presentation from structure as HTML4.01. Anybody who says otherwise, hasn't read the specification. I encourage everybody to read the spec it's suprisingly short and uninteresting.

  • Stylesheets were introduced in HTML4.01 and were not changed in XHTML1.0.
  • Presentational elements were deprecated in HTML4.01 and were not removed in XHTML1.0.

There are no untractable differences in HTML and XHTML that would make parsing of one much slower than another. It depends how the parser is implemented.

  • Both SGML and XML parsers need to load and parse entire DTD in order to understand entities. This alone is usually more work than parsing of the document itself. HTML parsers almost always "cheat" and use hardcoded entities and element information. XHTML parsers in browsers cheat too.
  • Parsing of HTML requires handling of implied start and end tags, and real-world HTML requires additional work to handle misplaced tags.
  • Proper parsing of XHTML requires tracking of XML namespaces.
  • Draconian XML rules require checking if every character is properly encoded. HTML parsers may get away with this, but OTOH they need to look for <meta>.

The overall difference in cost of parsing is tiny compared to time it takes to download document, build DOM, run scripts, apply CSS and all other things browsers have to do.

At the end of the day, why choose XHTML over HTML? - Stack Overflow

html xhtml
Rectangle 27 715

Most of the roles you see were defined as part of ARIA 1.0, and then later incorporated into HTML5. Some of the new HTML5 elements (dialog, main, etc.) are even based on the original ARIA roles.

There are two primary reasons to use roles in addition to your native semantic element.

Reason #1. Overriding the role where no host language element is appropriate or, for various reasons, a less semantically appropriate element was used.

In this example, a link was used, even though the resulting functionality is more button-like than a navigation link.

<a href="#" role="button" aria-label="Delete item 1">Delete</a>

Screen readers will hear this as a button (as opposed to a link), and you can use a CSS attribute selector to avoid class-itis and div-itis.

*[role="button"] {
  /* style these a buttons w/o relying on a .button class */
}

Reason #2. Backing up a native element's role, to support browsers that implemented the ARIA role but haven't yet implemented the native element's role.

For example, the "main" role has been supported in browsers for many years, but it's a relatively recent addition to HTML5, so many browsers don't yet support the semantic for <main>.

<main role="main"></main>

This is technically redundant, but helps some users and doesn't harm any. In a few years, this technique will likely become unnecessary.

I see some people make up their own. Is that allowed or a correct use of the role attribute?

That's a valid use of the attribute unless a real role is not included. Browsers will apply the first recognized role in the token list.

<span role="foo link note bar">...</a>

Out of the list, only link and note are valid roles, and so the link role will be applied because it comes first. If you use custom roles, make sure they don't conflict with any defined role in ARIA or the host language you're using (HTML, SVG, MathML, etc.)

Why did you put universal selector in front of [role="button"]?

[role="button"]
a[role="button"], span[role="button"]

"In a few years, this technique will likely become unnecessary". Idk anything about accessibility, but with things like angular and web components creating custom tags, I can imagine this becoming more of a necessity.

@xdhmoore I think he specifically meant the redundant technique of setting a role to the same value as the tag, not the use of role in general.

What is the purpose of the "role" attribute in HTML? - Stack Overflow

html
Rectangle 27 715

Most of the roles you see were defined as part of ARIA 1.0, and then later incorporated into HTML5. Some of the new HTML5 elements (dialog, main, etc.) are even based on the original ARIA roles.

There are two primary reasons to use roles in addition to your native semantic element.

Reason #1. Overriding the role where no host language element is appropriate or, for various reasons, a less semantically appropriate element was used.

In this example, a link was used, even though the resulting functionality is more button-like than a navigation link.

<a href="#" role="button" aria-label="Delete item 1">Delete</a>

Screen readers will hear this as a button (as opposed to a link), and you can use a CSS attribute selector to avoid class-itis and div-itis.

*[role="button"] {
  /* style these a buttons w/o relying on a .button class */
}

Reason #2. Backing up a native element's role, to support browsers that implemented the ARIA role but haven't yet implemented the native element's role.

For example, the "main" role has been supported in browsers for many years, but it's a relatively recent addition to HTML5, so many browsers don't yet support the semantic for <main>.

<main role="main"></main>

This is technically redundant, but helps some users and doesn't harm any. In a few years, this technique will likely become unnecessary.

I see some people make up their own. Is that allowed or a correct use of the role attribute?

That's a valid use of the attribute unless a real role is not included. Browsers will apply the first recognized role in the token list.

<span role="foo link note bar">...</a>

Out of the list, only link and note are valid roles, and so the link role will be applied because it comes first. If you use custom roles, make sure they don't conflict with any defined role in ARIA or the host language you're using (HTML, SVG, MathML, etc.)

Why did you put universal selector in front of [role="button"]?

[role="button"]
a[role="button"], span[role="button"]

"In a few years, this technique will likely become unnecessary". Idk anything about accessibility, but with things like angular and web components creating custom tags, I can imagine this becoming more of a necessity.

@xdhmoore I think he specifically meant the redundant technique of setting a role to the same value as the tag, not the use of role in general.

What is the purpose of the "role" attribute in HTML? - Stack Overflow

html
Rectangle 27 1

It is not possible to have comment inside a CDATA section. In XML, and hence in HTML when using XHTML syntax, a CDATA section is a used to escape blocks of text containing characters which would otherwise be recognized as markup. It has simple syntax: it begins with <![CDATA[ and ends with the ]]>. No markup of any kind is recognized between the limiters. In HTML5, CDATA sections in HTML syntax are defined in an ad hoc manner and can only used to embed external content, namely SVG or MathML content; they may contain comments as per general XML rules, but they are no comments from HTML viewpoint, just data.

The above answers the question in the title. The question in the body seems to be different and not quite clear. The sample code contains no CDATA section at all. It contains only a head element containing a comment and the character data .... (and whitespace). There is no script element, since data that would otherwise constitute such an element is wrapped inside a comment, hence ignored. And neither is there any CDATA section, since when parsing a comment, only the comment terminator string is recognized, no markup.

how to comment in HTML html cdata

Rectangle 27 20

A Self-closing tag is a special form of start tag with a slash immediately before the closing right angle bracket. These indicate that the element is to be closed immediately, and has no content. Where this syntax is permitted and used, the end tag must be omitted. In HTML, the use of this syntax is restricted to void elements and foreign elements. If it is used for other elements, it is treated as a start tag.

Start tags must have the following format:

  • Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.

The syntax <foo/> opens and immediately closes the foo element if it is a MathML or SVG element (i.e. not an HTML element).

Conclusion: What Robert Longson wrote in his answer is still valid. This warning in IE11 developer tools is wrong. Using the self-closing syntax in HTML5 is valid (but only for void elements, such as <br/>; or foreign elements, which are those from MathML and SVG).

html - Closing SVG tags, explicit or self closing? - Stack Overflow

html html5 svg
Rectangle 27 20

A Self-closing tag is a special form of start tag with a slash immediately before the closing right angle bracket. These indicate that the element is to be closed immediately, and has no content. Where this syntax is permitted and used, the end tag must be omitted. In HTML, the use of this syntax is restricted to void elements and foreign elements. If it is used for other elements, it is treated as a start tag.

Start tags must have the following format:

  • Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.

The syntax <foo/> opens and immediately closes the foo element if it is a MathML or SVG element (i.e. not an HTML element).

Conclusion: What Robert Longson wrote in his answer is still valid. This warning in IE11 developer tools is wrong. Using the self-closing syntax in HTML5 is valid (but only for void elements, such as <br/>; or foreign elements, which are those from MathML and SVG).

html - Closing SVG tags, explicit or self closing? - Stack Overflow

html html5 svg
Rectangle 27 1

No, there is really no way to emulate such things in HTML and CSS. If you try to use a brace { in large size, it will get very ugly, as the stroke width increases. For 200% or 250%, this might be tolerable, but for 700% not.

The pragmatic approach is to use MathJax, a widely used JavaScript library that formats mathematical expressions. It can handle a subset of LaTeX, too:

The point here is that MathJax processes the HTML document and recognizes and implements LaTeX code (which is just character data from the HTML perspective).

Alternatively, you can use MathJax to implement a subset of MathML:

<!doctype html>
<title>Big brace demo 2</title>
<script src=
http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
></script>
<math>
<mtext>2014-01-05</mtext>
<mfenced open="{" close="">
<mtable>
<mrow><mtext>Lorem ipsum </mtext></mrow>
<mrow><mtext>Lorem ipsum </mtext></mrow>
<mrow><mtext>Lorem ipsum </mtext></mrow>
</mtable>
</mfenced>
</math>

In principle, you could use just the MathML code, without MathJax support, but a) this would not really be HTML (even though HTML5 allows MathML code to be included this way even in HTML serialization), b) browser support would be limited, mainly Firefox.

Is there anyway to change the font that MathJax uses? After some experimentation, I see that the CSS body approach does not change it.

@Adam, thats an interesting question, but really a separate question that should probably be asekd separately (after checking the documentation).

Hmm, okay. I'll have to look into this more. In any event, +1. Thanks for the suggestion, though as things stand, I would prefer a solution that only relies on HTML and CSS, so I've gone ahead and accepted Niels's answer.

Note from the future: cdn.mathjax.org is nearing its end-of-life, check mathjax.org/cdn-shutting-down for migration tips (and perhaps update your post for future readers).

Extensible curly bracket with HTML and CSS - Stack Overflow

html css html5 css3
Rectangle 27 715

Most of the roles you see were defined as part of ARIA 1.0, and then later incorporated into HTML5. Some of the new HTML5 elements (dialog, main, etc.) are even based on the original ARIA roles.

There are two primary reasons to use roles in addition to your native semantic element.

Reason #1. Overriding the role where no host language element is appropriate or, for various reasons, a less semantically appropriate element was used.

In this example, a link was used, even though the resulting functionality is more button-like than a navigation link.

<a href="#" role="button" aria-label="Delete item 1">Delete</a>

Screen readers will hear this as a button (as opposed to a link), and you can use a CSS attribute selector to avoid class-itis and div-itis.

*[role="button"] {
  /* style these a buttons w/o relying on a .button class */
}

Reason #2. Backing up a native element's role, to support browsers that implemented the ARIA role but haven't yet implemented the native element's role.

For example, the "main" role has been supported in browsers for many years, but it's a relatively recent addition to HTML5, so many browsers don't yet support the semantic for <main>.

<main role="main"></main>

This is technically redundant, but helps some users and doesn't harm any. In a few years, this technique will likely become unnecessary.

I see some people make up their own. Is that allowed or a correct use of the role attribute?

That's a valid use of the attribute unless a real role is not included. Browsers will apply the first recognized role in the token list.

<span role="foo link note bar">...</a>

Out of the list, only link and note are valid roles, and so the link role will be applied because it comes first. If you use custom roles, make sure they don't conflict with any defined role in ARIA or the host language you're using (HTML, SVG, MathML, etc.)

Why did you put universal selector in front of [role="button"]?

[role="button"]
a[role="button"], span[role="button"]

"In a few years, this technique will likely become unnecessary". Idk anything about accessibility, but with things like angular and web components creating custom tags, I can imagine this becoming more of a necessity.

@xdhmoore I think he specifically meant the redundant technique of setting a role to the same value as the tag, not the use of role in general.

What is the purpose of the "role" attribute in HTML? - Stack Overflow

html
Rectangle 27 4

As you have clarified that you're using HTML5... from the HTML5 spec:

Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.

The foreign elements are those from the MathML and SVG namespaces. As you can see, none of these elements are the div element, and therefore your second example is invalid HTML5.

css -
vs
- Stack Overflow

css html
Rectangle 27 4

As you have clarified that you're using HTML5... from the HTML5 spec:

Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.

The foreign elements are those from the MathML and SVG namespaces. As you can see, none of these elements are the div element, and therefore your second example is invalid HTML5.

css -
vs
- Stack Overflow

css html