Certain web browsers may encounter issues when rendering HTML5 content if the doctype declaration is incorrect

After hearing so much about HTML5, I decided to take the plunge and create a website using it yesterday. Surprisingly, everything looked fine on Chrome and my desktop PC, as well as on notebooks and netbooks. However, when I tested it on a Samsung S4 using Chrome and Opera for Android, the website looked terrible.

Feeling frustrated, I switched the doctype from HTML5 to 4.1 strict and re-uploaded the website. To my surprise, the site started looking good again on Chrome and an older version of Opera (not the new mini).

Now come the questions:

How is it possible that a website built with HTML5 is not recognized by certain browsers with its specified doctype, yet switching to an older doctype makes it work?

What would be your recommendation for the doctype in this case to ensure multi-browser compatibility, given that HTML5 is still not fully supported by all browsers?

Lastly, remember how I mentioned that my website was looking bad due to the doctype issue yesterday? Well, today the same page with the HTML doctype is suddenly working fine on Chrome for Android again. Could it be related to caching from the copy I uploaded while using the 4.1 strict doctype?

And here is the doctype I am currently using:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
androidhtmlcss

Answer №1

Consider using the specified doctype:

<!DOCTYPE html>

HTML 4.x was developed based on SMGL (http://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language). HTML 5, on the other hand, no longer requires a DTD (Document Type Definition), allowing you to simply use this tag to instruct browsers how to display your website. While not all browsers fully interpret HTML5, it is widely supported enough to confidently declare your page as HTML5.

In response to your first query, specific examples would help clarify the situation. It's possible that older doctypes are disregarded by browsers in favor of interpreting content as HTML5, as mentioned earlier.

Regarding your final question, it is indeed likely that the issue relates to a cached version of the webpage!

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

Responsive design with Flexbox, interactive graphics using canvas, and dynamic content resizing

I'm having difficulties with my canvas-based application. I have multiple canvases, each wrapped in a div container alongside other content. These containers are then wrapped in an "hbox" container. The objective is to create a dynamic grid of canvas ...

javascriptcsshtmlcanvasflexbox

Navigating the challenges of screen rotation changes

I've been struggling to manage screen orientation changes in my Android application without much success. Here's how I have set it up in my manifest: <activity android:name="{youractivityname}.MainActivity" android:label="@s ...

javaandroid

How to distinguish between clicking once and double clicking in jQuery

Currently, I am developing a basic tic tac toe game for two players with the help of jQuery. The main requirement is to insert an "X" when the user single clicks and an "O" when they double click on the designated square. Here is how I achieved this functi ...

jqueryhtmlwebweb-applications

Ways to combine multiple tags in HTML using jQuery

I'm new to jQuery and I want to add multiple tags to my HTML but I'm not sure how to do it. Here's the jQuery code I wrote but I keep getting an error: var message = "hello"; var additionalMessage = '<li class="message-entry"& ...

jqueryhtml

The image disappears when I click on a link and then return to the main page, but this only happens in Mozilla Firefox

Upon opening the main page, everything functions flawlessly. However, if I navigate to another page through one of my href links and then return to the main page, my div with the class "bild" disappears. Oddly enough, this issue only occurs in Mozilla Fire ...

htmlcss

Revolutionize iPad user experience with seamless HTML5 video integration

What is the most effective method for dynamically embedding HTML5 video to ensure compatibility with the iPad? (using pure Javascript) I'm having difficulty getting this approach to work: <div id="placeholder"><script type="text/javascript" ...

javascripthtmlipadvideoembed

At what browser width does Bootstrap's container no longer display a border?

I'm in the process of creating a flexible website design. https://i.sstatic.net/68qW2.png Everything seems to be going well so far. Here's what I have: <div class="container"> <div class="products-block"> <h2>Prod ...

htmlcsstwitter-bootstrap

"Troubleshooting a Javascript guessing game that isn't functioning with a do-

I have been working on a JavaScript and HTML guessing game, but unfortunately, it's not functioning as expected with the following requirements: The game should take input from the user (three attempts allowed). After entering the number, it should c ...

javascripthtmlbootstrap-5do-while

Accessing a precise div element in a webpage

Currently, I am utilizing Vue.js and Nuxt for my web development. One issue I am facing is related to anchors. Specifically, when I navigate to mysite.com/page1#section1, I want the page to scroll to section1. In my code, I have the following snippet: < ...

javascripthtmlvue.js

What is the best way to apply custom css to a Google Plus share button within an iframe?

I am having an issue with the CSS on my share button. The Google style is causing my CSS to reset. Here is the iframe code I am using: <iframe src="https://apis.google.com/u/0/_/+1/fastbutton?usegapi=1&amp;size=tall&amp;origin=http%3A%2F%2F ...

cssbuttoniframeshare

Dynamically showcasing content in an HTML table

Having trouble with this code snippet. It's supposed to iterate through array objects and display them in an HTML table. The third row should have buttons, but nothing is showing up. Can you spot the issue? Here's the HTML code: <html> & ...

javascripthtmlhtml-table

The process of combining a CssStyleCollection with a System.Web.UI.WebControls.Style

I am working with a list item and trying to apply styles using System.Web.UI.WebControls.Style. However, I noticed that there isn't a MergeStyle option similar to what's available for controls. Instead, there is an Attributes.CssStyle property of ...

asp.netcsslistitem

Tips for refreshing innerHTML without altering the entire content

I've written a JavaScript code that uses AJAX to periodically send an XMLHttpRequest to fetch data from a PHP file. The data retrieved is then added to the innerHTML of a <p> tag. However, every time new content is added, the entire paragraph se ...

javascripthtmlajax

Navigating into the forbidden territory of the if block that holds secrets untold

Encountering an issue with the angularjs $location feature. I have set up an auth interpreter that redirects to the login page if a 401 error (unauthorised) is returned by the server. In my app.js file, both the auth interpreter and the account data loadin ...

htmlangularjs

The Issue of Horizontal Scrolling - None of the elements are out of

I am facing an issue with an unwanted horizontal scroll on my website and I can't seem to identify the cause. The header of my site is quite simple, utilizing display: flex, justify-content: center, marin-top: 5vh, along with some padding on the logo ...

javascripthtmlcss

Utilizing HTML and CSS to Position Text Adjacent to the Initial and Final Elements in a Vertical List

Exploring a simple number scale ranging from 1 to 10, I experimented with different ways to represent it. Here's my attempt: <div class="rate-container"> <p class="first">Extremely Unlikely</p> <a class=" ...

htmlcss

Why is audio being heard by other applications during a STREAM_VOICE_CALL session?

When I initiate an audio call or audio broadcast in my application, the first step is to request audio focus from the audio manager. audioManager.requestAudioFocus(null,audioManager.STREAM_VOICE_CALL, AudioManager.AUDIOFOCUS_GAIN_TRANSIENT| AudioManager.A ...

android

Is there a way to easily center bootstrap cards without also centering the text within them?

I'm currently using the card code provided by Bootstrap on their site, but I'm having trouble center-aligning the cards on my page without also center-aligning the text within the cards. Here's what I have at the moment --> https://i.sst ...

csshtmlbootstrap-4

How DataTables Handles Loading and Rendering Time Delay

Utilizing DataTables in conjunction with Bootstrap 4 for client-side processing while displaying approximately 2,000 records. The loading time is acceptable, but upon refreshing the page (F5), I observe an unformatted DataTable briefly appearing. It seems ...

javascriptjquerycsstwitter-bootstrapdatatables

Tips for successfully passing a JavaScript function into a dynamically generated div

Is it possible to pass a JavaScript function to a dynamically created div? I am trying to do this in the code snippet below. While replacing the script string with a normal string works, is there a way to include a JS script using createTextNode? newD ...

javascripthtmldom