Are custom elements valid HTML5?

2018-12-31 15:49发布

站内问答 / Html5
563 11 3

I've been unable to find a definitive answer to whether custom tags are valid in HTML5, like this:

<greeting>Hello!</greeting>

I've found nothing in the spec one way or the other:

http://dev.w3.org/html5/spec/single-page.html

And custom tags don't seem to validate with the W3C validator.

11条回答
千与千寻千般痛.
2楼-- · 2018-12-31 16:13

The Custom Elements specification is available in Chrome and Opera, and becoming available in other browsers. It provides a means to register custom elements in a formal manner.

Custom elements are new types of DOM elements that can be defined by authors. Unlike decorators, which are stateless and ephemeral, custom elements can encapsulate state and provide script interfaces.

Custom elements is a part of a larger W3 specification called Web Components, along with Templates, HTML Imports, and Shadow DOM.

Web Components enable Web application authors to define widgets with a level of visual richness and interactivity not possible with CSS alone, and ease of composition and reuse not possible with script libraries today.

However, from this excellent walk through article on Google Developers about Custom Elements v1:

The name of a custom element must contain a dash (-). So <x-tags>, <my-element>, and <my-awesome-app> are all valid names, while <tabs> and <foo_bar> are not. This requirement is so the HTML parser can distinguish custom elements from regular elements. It also ensures forward compatibility when new tags are added to HTML.

Some Resources

查看更多
0人赞 添加讨论(0) 举报
旧时光的记忆
3楼-- · 2018-12-31 16:13

To give an updated answer reflecting modern pages.

Custom tags are valid if either,

1) They contain a dash 

<my-element>

2) They are embedded XML 

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

This assumes you are using the HTML5 doctype <!doctype html>

Considering these simple restrictions it now makes sense to do your best to keep your HTML markup valid (please stop closing tags like <img> and <hr>, it's silly and incorrect unless you use an XHTML doctype, which you probably have no need for).

Given that HTML5 clearly defines the parsing rules a compliant browser will be able to handle any tag that you throw at it even if it isn't strictly valid.

查看更多
0人赞 添加讨论(0) 举报
宁负流年不负卿
4楼-- · 2018-12-31 16:16

Basic Custom Elements and Attributes

Custom elements and attributes are valid in HTML, provided that:

  • Element names are lowercase and begin with x-
  • Attribute names are lowercase and begin with data-

For example, <x-foo data-bar="gaz"/> or <br data-bar="gaz"/>.

A common convention for elements is x-foo; x-vendor-feature is recommended.

This handles most cases, since it's arguably rare that a developer would need all the power that comes with registering their elements. The syntax is also adequately valid and stable. A more detailed explanation is below.

Advanced Custom Elements and Attributes

As of 2014, there's a new, much-improved way to register custom elements and attributes. It won't work in older browsers such as IE 9 or Chrome/Firefox 20. But it allows you to use the standard HTMLElement interface, prevent collisions, use non-x-* and non-data-* names, and define custom behavior and syntax for the browser to respect. It requires a bit of fancy JavaScript, as detailed in the links below.

HTML5 Rocks - Defining New Elements in HTML
WebComponents.org - Introduction to Custom Elements
W3C - Web Components: Custom Elements

Regarding The Validity of The Basic Syntax

Using data-* for custom attribute names has been perfectly valid for some time, and even works with older versions of HTML.

W3C - HTML5: Extensibility

As for custom (unregistered) element names, the W3C strongly recommends against them, and considers them non-conforming. But browsers are required to support them, and x-* identifiers won't conflict with future HTML specs and x-vendor-feature identifiers won't conflict with other developers. A custom DTD can be used to work around any picky browsers.

Here are some relevant excerpts from the official docs:

"Applicable specifications MAY define new document content (e.g. a foobar element) [...]. If the syntax and semantics of a given conforming HTML5 document is unchanged by the use of applicable specification(s), then that document remains a conforming HTML5 document."

"User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them."

"User agents are not free to handle non-conformant documents as they please; the processing model described in this specification applies to implementations regardless of the conformity of the input documents."

"The HTMLUnknownElement interface must be used for HTML elements that are not defined by this specification."

W3C - HTML5: Conforming Documents
WhatWG - HTML Standard: DOM Elements

查看更多
0人赞 添加讨论(0) 举报
荒废的爱情
5楼-- · 2018-12-31 16:22

I would like to point out that the word "valid" can have two different meanings in this context, either of which is potentially, um, valid.

  1. Should an HTML document with custom tags be considered valid HTML5? The answer to this is clearly "no." The spec lists exactly what tags are valid in what contexts. This is why an HTML validator will not accept a document with custom tags, or with standard tags in the wrong places (like an "img" tag in the header).

  2. Will an HTML document with custom tags be parsed and rendered in a standard, clearly-defined way across browsers? Here, perhaps surprisingly, the answer is "yes." Even though the document would not technically be considered valid HTML5, the HTML5 spec does specify exactly what browsers are supposed to do when they see a custom tag: in short, the custom tag acts kind of like a <span> - it means nothing and does nothing by default, but it can be styled by HTML and accessed by javascript.

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(3)