Custom tags… why not?

by

Custom tags are not evil

just consider this:

  • They are not recognized in IE 6-8 by default -> you have to use JavaScript to introduce each custom tag you use on the page e.g: document.createElement('custom-tag') This means your website will only render correctly with JavaScript turned on
  • In most browsers your custom tags will be treated as inline elements like <span>, this means you have to write CSS to declare them as custom-tag { display: block }
  • There is no resource I found that could proof that custom tags have any negative impact on search engines. In fact Google released Angular.js which promotes custom tags (<pane> and <tab>) in its examples on the front page.
  • Most HTML Editors will mark your custom tags as invalid HTML, because they are not in the official spec.

To summarize:

  • Use custom tags when there are important elements that have more
    meaning than <div> and there is no existing HTML 4/5
    equivalent    . This is especially true for web applications which
    parse the DOM for special tags/attributes/classes to create
    components (like Angular.js).
  • If all you build is a simple website with normal content, stick
    to standard HTML. You will want your website to work also without
    JavaScript turned on.
  • If you build a web application where custom tags could really
    help to make the source cleaner and express special semantics, use
    them. All negative implications mentioned above (JavaScript has to be
    turned on / CSS declaration) won’t matter for these cases. The same
    rules apply to custom attributes.

For more details on this topic: IE compatibility for Angular.js

More Related Contents:

  1. How do you get the footer to stay at the bottom of a Web page?
  2. How do you easily horizontally center a using CSS? [duplicate]
  3. Floating elements within a div, floats outside of div. Why?
  4. How to style HTML5 range input to have different color before and after slider?
  5. CSS Floating Divs At Variable Heights [duplicate]
  6. Footer at bottom of page or content, whichever is lower
  7. Is there a way to make a child DIV’s width wider than the parent DIV using CSS?
  8. 2 column div layout: right column with fixed width, left fluid
  9. Is float for layout bad? What should be used in its place?
  10. How to add a scrollbar to an HTML5 table?
  11. How do I style the HTML5 form validation error messages with CSS?
  12. How to create equal height columns in pure CSS [duplicate]
  13. How do I right align div elements?
  14. override css for html5 form validation/required popup
  15. What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?
  16. How does object-fit work with canvas element?
  17. How to make a element expand or contract to its parent container?
  18. scale HTML5 Video and break aspect ratio to fill whole site
  19. Disable zoom on a div, but allow zoom on the page (an alternate div)
  20. How to auto adjust the height according to content in it?
  21. layer on top of PDF
  22. element not working in Internet Explorer 11
  23. Split Div Into 2 Columns Using CSS
  24. Why can’t I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height
  25. How to display and hide a div with CSS?
  26. How to make responsive table [closed]
  27. Styling HTML and BODY selector to height: 100%; vs using 100vh
  28. Why adds extra top margin?
  29. CSS Floating Divs with different height are aligned with space between them
  30. Horizontal scroll in DIV with many small DIV’s inside (no text)

Leave a Comment