What potential drawbacks come with opting for html5 semantic tags instead of traditional div elements?

A question with an unconventional twist has been raised several times before and the discussion continues. Despite this, no concrete disadvantages or evidence of their complete absence have been found.

I fully support advancements in technology and creating semantic documents. I have already embraced the use of new semantic tags in my coding practices (it's quite satisfying!). However, I can't help but wonder if there are any obscure drawbacks that one should be aware of.

  • Could there be rendering issues on older versions of Internet Explorer?
  • How does backward compatibility of CSS selectors like article come into play?
  • Are there any unexpected side effects to the DOM?
  • ...(anything at all)?
csshtmlbrowsercompatibility

Answer №1

Outdated browsers may struggle with recognizing html5 elements, requiring you to establish default style rules in your CSS.

In certain scenarios, implementing a shim or shiv can be necessary. For more information on this, check out: https://css-tricks.com/snippets/javascript/make-html5-elements-work-in-old-ie/

Remember, older browsers like Internet Explorer might not even identify these elements as such, potentially altering the structure of your DOM. Sometimes they display html5 tags as plain text, visible to users.

If you're unable to support new html5 elements, a practical workaround involves using divs with corresponding classes matching desired element names. Instead of <article>, consider using <div class="article">.

This method aligns with the modern "mental model", allowing you to conceptualize content as articles, asides, and more. Furthermore, transitioning to full html5 specification in the future becomes simpler by searching for specific classes and replacing divs accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenges encountered when creating HTML output using JasperReports

Currently, I am using Jasper Report within my application to generate reports in PDF format, which is working well. However, we now need the ability for users to view these reports in HTML format within the application without the inline CSS present in the ...

htmlcsspaginationjasper-reports

Can a custom CSS be linked directly to the angular-cli.json file?

I'm trying to incorporate custom CSS into my angular-cli.json file, but I haven't been able to find a successful method. I attempted to use the following code: "styles": [ "styles.css", "http://site.test/mycss.css" ], However, it does ...

cssjsonangular

In search of assistance in delivering HTML form data to a public HTTP service

Seeking assistance with forwarding html form data to a public http service. Any guidance or tutorial recommendations would be greatly appreciated! Below is the structure of my form: <span class="text"> <input class="text" type="text" name="First ...

phpjavascripthtml

Linking the location of the pop-up to the currently selected text box

I am currently experimenting with setting the top and left values relative to the selected_element (which is active at the time of triggering the popup) in a manner similar to a tooltip. I attempted to use $().position() in combination with jQuery, but it ...

javascriptjquerycssposition

Using jQuery to animate the grayscale filter with a value of 0

Currently, I am implementing the Waypoints jQuery plugin to add animation to a series of images as a user scrolls over them. My goal is to apply certain CSS properties - opacity:1, filter:grayscale(0), -webkit-filter:grayscale(0), and -moz-filter:grayscale ...

jquerycssjquery-waypoints

Having issues with Firefox rendering JavaScript and CSS correctly

I'm trying to figure out if it's the row class from Bootstrap that's causing issues, or if there's a problem with my JS/CSS not loading properly in Firefox. It seems to be working fine in Chrome and Safari. Any ideas on what could be go ...

javascripthtmlcsstwitter-bootstrap

What is the best way to hide my rectangle in HTML?

Just starting out with Wix for my website. I have a block of HTML code that creates a blue rectangle, but I want it to disappear automatically after 30 seconds. What additional code do I need to achieve this effect? Also, is there any unnecessary code I c ...

javascriptjqueryhtmlcss

Is there a way to reduce the spacing between these child containers when they wrap?

I'm looking to reduce the space between my child divs when they wrap It seems like the issue lies within the media query * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 10px; width: 100%; } html, bo ...

htmlcssalignment

Guide to match the size of <td> with an <img>

I am currently attempting to align several images in my HTML using the <table> element. My goal is to eliminate any white space between the images. You can view my progress so far in this JSFiddle example: JSFiddle example. However, I am still encoun ...

htmlcsshtml-table

Displaying the blog post title in the metadata information

Currently, I am facing a challenge with my Jekyll site's Search Engine Optimization because I am having difficulty setting meta information. ... <meta name="og:title" content="{{ seo_title }}" /> ... <!-- now in my for post-loop: --> {% f ...

htmlseojekyll

Encountering a server error - what triggers this message upon utilizing .htaccess?

When I include a .htaccess file within a directory named admin containing the code below: AuthName "Alertme" AuthType Basic AuthUserFile /mobs/.htpasswd require valid-user and a .htpasswd file with the following credentials: rajasekar:66Acdia7gE1to Upo ...

phphtml.htaccess

Tips for stopping body scrolling when using a push-side menu

I am working on integrating a push-side menu plugin called Responsive Menu into a WordPress theme. Following the answer from SO @Congrim, I have successfully implemented a method to lock the body at scroll when the push-menu is open, with all elements incl ...

javascriptjqueryhtmlcsswordpress

Tips on relocating the input position to the top

Currently, I have a text input that is centered horizontally when typing text. However, I want it to be positioned at the top instead. See the following code: height: 143px; width: 782px; font-family: 'Roboto Mono'; background: #FFFFFF; border ...

htmlcss

Increase the spacing between accordion panels on a webforms ASP.NET application

Tech: This webpage is built on an Asp.net Webforms application using a master page and an ajax accordion control. All elements for the page are contained within a designated placeholder. The design of the webpage includes an ajax accordion with multiple A ...

cssasp.netajaxwebformsaccordionpane

Column on the far right of the grid with a frozen position

I need to design an Angular grid where the last column remains frozen. This frozen column should display the summation of all row values, and the last row should be editable. I am able to create the Angular grid itself, but I am struggling with how to stru ...

javascriptangularjshtmlcss

What could be causing the issue with the focus not being activated when clicking on the input field in Vue?

I am facing an issue where I have to click twice in order to focus on a specific input field, and I'm having trouble setting the cursor at the end of the input. I attempted to use $refs, but it seems like there may be a deeper underlying problem. Any ...

javascripthtmlvue.js

What is the reason behind Object.hasOwn(x,y) being different from Reflect.ownKeys(x).includes(y) when x represents a CSSStyleDeclaration object and y is a hyphenated property such as 'z-index'?

Both of these conditions are true: 'z-index' in getComputedStyle(document.body) // true Reflect.has(getComputedStyle(document.body), 'z-index') // true Additionally, the following statements also evaluate to true, indicating that &apo ...

javascriptcss

Unable to retrieve HTML code with PHP's file_get_contents function

I have been trying to retrieve the HTML content of a webpage using the code below: $url = "http://mysmallwebpage.com/"; $html = file_get_contents($url); Unfortunately, it seems that the file_get_contents function is unable to open URLs in certain formats ...

phphtml

Make a diamond shape appear when hovering over a menu item

One of the menu items on my website displays an orange box when hovered over. .menu > li > a:hover:after { position: absolute; left: 0px; border-style: solid; border-color: transparent; } However, I am aiming to create a diamond sha ...

htmlcsscss-shapes

Hit the jackpot by guessing the word PHP!

I recently developed an application for a local radiostation that features a word guessing game with a Jackpot. Upon entering the page, $message displays the current amount of the Jackpot. The Jackpot increases by 5 every time someone incorrectly guesses t ...

phphtmlsqlpdo