how the browser interpret non-standard/custom html tag

custom html tags
non-standard html tags
html custom tags css
custom html examples
is not a valid custom element name
html generic text tag
html tag reference
html elements

I'm new to front end development.just a question on how the browser interpret non-standard/custom html tag. Because when use Angular, there is a tag called:

<body>
  <app-root ng-version="xxx">
    <div>                        
       ...
       <ul _ngcontent-c0>...</ul>   
    </div>
  </app-root>
</body>

Below is my questions:

Q1-how browsers interprets app-root? should it be an error when browsers parse the html file? or does it mean that I can add any non sense tag into the html like <NonSense></NonSense> and the browsers just ignore it?

Q2-When browsers parse non-standard attributes like _ngcontent-c0? does the browsers just ignore them and I can add any nonsense attribute to html tag like:

<h1 non-sense-attr></h1>

Q1. As you have guessed, is not a standard HTML tag. This is a custom selector tag that refers to a particular component. It tells Angular where our component should be rendered. Once we finish creating it, our root component will load its template HTML between the tags included above.

Q2. Refer this link, For more explanation about ViewEncapsulations Refer this

Should I use non-standard tags in a HTML page for highlighting , So, short answer: stick to standard HTML elements only and style them Some argue that since certain popular browsers do not handle custom tags in a if a tag exists in the spec (<mark>) which clearly covers the semantic meaning of the � Hello peeplez. I have an odd problem. When I put the ANSI symbol for "less than" ("<"), the word STRONG and then the ANSI symbol for "greater than" (">") in my web page, followed by some text, then close


Custom Elements

Web Components are a set of web platform APIs that allows creating new custom, reusable, encapsulated HTML tags to use in web pages and web apps.

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

One of the features of Web Components is Custom Elements. With Custom Elements, a developer (or platform) can introduce non-standard HTML elements, which will be processed by most modern browsers.

Custom Attributes

You can indeed add any custom attributes. The browsers ignore them. In the context of Angular, the custom attributes are added by the framework for view encapsulation and projection. In your example <ul _ngcontent-c0>...</ul> can be used (automatically by Angular) in the rendered CSS to apply specific styles to that particular ul element like so:

ul[_ngcontent-c0] { ... }

Custom Elements: defining new elements in HTML, Your browser may not support the functionality in this article. ever wondered why the HTML parser doesn't throw a fit on non-standard tags? What Is a Custom HTML Tag? With HTML you use the <b> tag, for example, to show bold text. If you need a list, then you use the <ul> tag with its child tag <li> for each list item. Tags are interpreted by browsers and, together with CSS, determine how the content of a webpage is displayed and also how parts of the content behave.


Custom Elements v1: Reusable Web Components, Custom elements allow web developers to define new HTML tags, extend existing ones, It brings a web standards-based way to create reusable components using used for defining a custom element and teaching the browser about a new tag. a custom element is no different than using a <div> or any other element. HTML HTML Tag Reference HTML Browser Support HTML Event Reference HTML Color Reference HTML Attribute Reference HTML Canvas Reference HTML SVG Reference HTML Character Sets Google Maps Reference CSS CSS Reference CSS Browser Support CSS Selector Reference Bootstrap 3 Reference Bootstrap 4 Reference W3.CSS Reference Icon Reference Sass Reference


HTML elements reference, or part of a document. <title>, The HTML Title element ( <title> ) defines the document's title that is shown in a browser's title bar or a page's tab. It has no effect on the content or layout until styled using CSS. <dl>, The HTML it were regular HTML. In addition, you can create custom versions of standard HTML elements. It's main function is yes to render HTML + CSS and to interpret JS, but it also has a ton of other small features which help make navigating the net user friendly.


Using custom elements, Note: Custom elements are supported by default in Firefox, Chrome, A custom element's class object is written using standard ES 2015 Autonomous custom elements are standalone — they don't inherit from standard HTML elements. Note: connectedCallback may be called once your element is no� One of the key features of the Web Components standard is the ability to create custom elements that encapsulate your functionality on an HTML page, rather than having to make do with a long, nested batch of elements that together provide a custom page feature. This article introduces the use of the Custom Elements API.


Attributes and properties, For element nodes, most standard HTML attributes automatically become When the browser parses the HTML to create DOM objects for tags, So, if an attribute is non-standard, there won't be a DOM-property for it. Sometimes non- standard attributes are used to pass custom data from HTML to� Structuring Your HTML Document. The <main> element is a structural and semantic element that defines the main section of a page where the content appears. Similar elements include <article>, which denotes an article within an HTML file, and <aside>, which describes a note or comment.