When building a website, it’s important to understand which HTML elements will be rendered by web browsers, and which ones will be ignored. Certain obsolete or invalid elements may be ignored, while others are simply not supported in some browsers.
Elements Ignored for Historical Reasons
There are a few HTML elements that were once commonly used in web pages, but have since become obsolete and are ignored by modern web browsers. These include:
- Font – Used to style text with different fonts. Replaced by CSS.
- Center – Centered text or images. Replaced by CSS text-align property.
- Strike – Strikethrough text. Replaced by CSS text-decoration property.
This text will be ignored
These tags have been deprecated in favor of using CSS for styling and formatting content. While they may still work in some older browsers, all modern browsers will ignore them.
Invalid HTML Elements
There are also some element names that are simply invalid, meaning they were never part of any HTML specification. These will often be ignored by browsers as well. For example:
Because “invalid” is not a valid HTML element name, browsers will ignore it and render only the text inside. Any styling applied to the invalid element will also be ignored. Using invalid HTML is not recommended.
In the early days of the web, some browsers supported custom proprietary elements that were never part of the HTML standard. These included elements like:
- Marquee – Scrolling text in Netscape and Internet Explorer
- Blink – Flashing text in Netscape
- Spacer – Blank space in Netscape
These non-standard elements were never supported by all browsers. Modern browsers will ignore them entirely. Again, using invalid or proprietary HTML is not recommended in today’s web pages.
Obsolete Presentation Elements
HTML once included a number of presentational elements used for styling content. With the introduction of CSS, these elements were deprecated in favor of using CSS for presentation. Some of these obsolete HTML tags that are often ignored include:
- Big – Big text
- Small – Small text
- Blink – Flashing text
- Bold – Bold text
- Italic – Italic text
- Underline – Underlined text
This big text will be ignored
This small text will be ignored
This bold text will be ignored
This italic text will be ignored
This underlined text will be ignored
These presentational HTML tags have all been deprecated in favor of using CSS instead. Browsers will render only the contained text without the presentational styling.
Along with elements, there are some attributes that have become obsolete or invalid that browsers will ignore:
- Align -Aligned text and images. Replaced by CSS.
- Background – Background image. Replaced by CSS.
- Color – Text color. Replaced by CSS.
- Height – Image height. Replaced by CSS.
- Width – Image width. Replaced by CSS.
- Invalid – Invalid proprietary attribute.
This aligned text will be ignoredBackground image will be ignored
Colored text will be ignored
Height and width attributes will be ignored
As with deprecated elements, invalid or obsolete attributes are simply ignored by browsers. Web authors should replace them with CSS.
Unsupported HTML5 Elements
HTML5 introduced dozens of new elements aimed at better structuring web page content. However, some of these elements are not universally supported across all major browsers yet. Elements that may be partially or fully ignored include:
- Article – Article content
- Aside – Sidebar content
- Details – Disclosure widget
- Dialog – Dialog window
- Figcaption – Figure caption
- Figure – Embedded content
- Footer – Section footer
- Header – Section header
- Main – Main content
- Mark – Highlighted text
- Nav – Navigation links
- Section – Document section
- Summary – Disclosure widget summary
- Time – Date/time
This highlighted text may be ignored
Support for these HTML5 elements is growing, but varies across browsers. Using them today may result in inconsistent rendering. For the best compatibility, supplement HTML5 tags with basic div tags.
Certain HTML elements related to accessibility are also partially supported or fully ignored by some browsers. These include:
- Main – Container for main content
- Aside – Supplementary content
- Header – Introductory content
- Footer – Closing content
- Nav – Navigation links
- Article – Self-contained content
- Section – Thematic grouping
- Details/Summary – Disclosure widget
Though intended to add semantic meaning for accessibility, support for these elements in screen readers and other assistive devices varies. Test thoroughly to ensure they are usable for all users.
Along with elements, HTML5 added several accessibility-related attributes that are partially supported or ignored. These include:
- Accesskey – Keyboard shortcut
- Autofocus – Auto focus element
- Hidden – Hide element
- Lang – Language code
- Tabindex – Tab order
- Contenteditable – Editable content
- Contextmenu – Custom context menu
- Draggable – Draggable element
- Dropzone – Drag-and-drop target
Autofocus may be ignored
This hidden paragraph may be ignored
Language code may be ignored
Support for these attributes varies, so test them thoroughly before relying on them for accessibility.
In addition to the attributes mentioned above, any non-standard or invalid attributes will be ignored by browsers. For example:
Invalid attribute ignored
Using non-standard attributes is not recommended, as browsers will simply ignore them without error. Rely only on validated attributes supported in the HTML specification.
Ignored White Space
One final quirk of HTML rendering in browsers is the treatment of white space. Multiple white space characters are collapsed into a single space, and trailing white space within element tags is ignored. For example:
This sentence has extra white space.
The extra white space will be collapsed and trailing white space disregarded. This can be inconvenient when attempting to indent or align HTML code.
When Elements Are Ignored
There are a few key scenarios where unknown HTML elements may get ignored by browsers:
- Obsolete presentational elements like font, center, etc.
- Completely invalid elements like invalid, bogus, etc.
- Proprietary non-standard elements like spacer, marquee, etc.
- Partially or unsupported HTML5 elements like section, header, etc.
- Obsolete attributes like align, bgcolor, height, etc.
- Invalid non-standard attributes.
Elements will generally be ignored silently without any errors. But for best results, adhere to valid HTML syntax and don’t rely on unsupported elements.
Checking Browser Support
To test if a specific HTML element or attribute is supported in your target browsers, there are a few options:
- View the page in multiple browsers and inspect the rendered code.
- Use a browser feature detection library like Modernizr.
- Check the browser support tables on CanIUse.com.
- Use a browser issue tracker like quirksmode.org.
- Consult the HTML and browser specifications.
Ideally, always test directly in your target browsers to catch any inconsistencies. Refer to resources like CanIUse.com to identify any lacking support.
Handling Unsupported HTML
When dealing with HTML elements that have partial or no browser support, you have a few options:
- Avoid them entirely and use alternate elements.
- Wrap them in basic div or span tags.
- Supplement with ARIA roles for accessibility.
- Detect support with Modernizr and selectively apply.
- Use polyfill scripts to add support.
With a combination of graceful degradation strategies and feature detection, you can build robust websites that properly handle unsupported HTML quirks.
The Future of HTML
The HTML specification is constantly evolving, which means elements and attributes will continue to change over time. What’s valid today may become obsolete in the future.
Stay up to date by:
- Referring to the latest W3C HTML 5.3 spec.
- Reading blogs and articles about HTML advances.
- Testing new elements in modern browsers.
- Using HTML validators and linting tools.
- Consulting caniuse.com support tables.
With a little research, you can feel confident using the latest, most broadly supported HTML features.
While you may occasionally run into an element or attribute that gets ignored, adhering to valid HTML is the best policy. Validate your markup, test often, and don’t rely on unsupported features. With care and research, you can avoid issues from ignored HTML in all modern browsers.