Can I relabel this html5?

Hi - please could someone tell me whether I could just re-label this template that’s in:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

to html5? which I believe would be just:

<!DOCTYPE html>

or does it violate html5 in any way?

My problem is I need an easy way to embed audio - which html5 offers.

Thank you for your kind help - Val

The easiest way to determine if it isn’t valid is to go to http://validator.w3.org/#validate_by_uri+with_options

Enter your site address, click More Options, and choose HTML5 (experimental) from the Document Type dropdown. If you get errors, you know you have a few things to correct. :smile:

Yes, it’s fine to replace one doctype with another. The browser doesn’t really care, as long as there’s a doctype of some kind. The browser will also run your videos just fine even if you don’t change the doctype. The only issue comes up when you are using a validator, which will throw errors … but they are no concern in themselves. (The validator is only there to warn you of possible coding errors. Unfortunately, it’s too stupid to overlook doctype/element clashes, which are essentially irrelevant.)

…but may lead to unexpected results, especially is switching between “strict” and “transitional” doctypes.

I discovered this by chance very recently. One page on a site I was building included a Google map, so I temporarily changed the doctype to transitional, just to stop the validator showing me errors I already knew about. It took me ages to equate that change with the reason the spacing between my header image and my navbar vanished on that page, but that’s what it was.

1 Like

hey cool, highlighting it & clicking </> works for me! Thank you!

Thanks greatly for everyone’s feedback. I don’t feel so scared any more re changing doctype. I was petrified of quirks mode where IE might display nothing (or so I thought). I’m a real ignoramus. Sitepoint forum members actually coded all the core css/php for my site template (excess css that makes your eyebrows crawl is me).

I like the audio bar that displays in html5 (when you embed mp3) that doesn’t in html4 (or at least I assumed it doesn’t).

That basically happens when you don’t have a doctype at all.

Because modern browsers understand HTML5 elements like audio, they display them no matter what the doctype is. In that regard, the doctype is irrelevant to them. They don’t suddenly forget what an audio or video element is because you used an older doctype. (It would be like you suddenly forgetting the last 40 years of history just because you put a 1960s hat on your head.)

Well going off of the OPS code where no URL was set, that’s an incomplete doctype and would trigger quirks mode.

Yeah, on her actual site it’s the full Transitional doctype:

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

Which is really HTML 3.2 with a few HTML 4 tags thrown in.

Surely people should look at finishing updating their HTML to the current HTML 4 standard (strict doctype) before starting to use the yet to be finalised HTML 5 proposed tags.

HTML 5 doesn’t have a doctype because it isn’t based on the SGML document markup standard. Instead HTML 5 has added <!doctype html> as an HTML tag to turn off quirks mode. XHTML 5 ( the XHTML equivalent to HTML 5) doesn’t have that even because XHTML doesn’t have a quirks mode.

<!doctype html> is a valid HTML 2 / 3.2 / 4 short doctype so if you want to actually validate your page according to a particular standard you will need to select the standard to validate against. Validating against a transitional doctype is pointless as that means you are not using a particular standard but are part way through transitioning from one to another.

1 Like

thank you! Really fascinating. I tried changing an old 4.01 Transitional page to <!doctype html> and everything displays fine, even the dropdown menus! Except the audio only works on pages done in css (like that template above). It doesn’t work on the old <table> pages, e.g.

==> http://www.greensmoothie.com/eat/carbs-1.php

I’m using this:

<p><audio controls><source src="val.mp3" type="audio/mpeg">
Please use a browser like Firefox or Safari to hear this mp3</audio></p>

It doesn’t make sense really. I wonder why, when <audio> is stuck inside a <table> it doesn’t work?

thanks, Val

Is there really an audio element on that page.? A clue as to where to look would help. I’m on a tablet right now.

Oh dear, sorry, I took it out since it doesn’t work. Here I’ve copied the page into a robots nofollow with the audio element added

http://greensmoothie.com/eat/test.php

In google chrome + safari you can see the audio player image but it doesn’t play!. FF is unable to even display the image.

thank you for looking into this :slight_smile: There’s so much of my site in <tables>'s and there’s no way I’d ever find the time to update it into the new template!

Am I just confused, or do you mean this:

It’s playing very nicely here on Firefox 32.

(But with 146 validation errors on your page, it’s maybe not surprising if some things don’t work…)

I’ve just discovered if I actually upload the mp3, then it does stream in FF, IE + Chrome, but not in Safari - in safari my IDM (internet download manager) asks me if I want to download it, but I want it to stream. Doesn’t play in Opera but I’m guessing that’s because w3schools says Opera doesn’t support mp3 yet.

Safari supports mp3?? I wonder why it doesn’t want to play it? Surely it’s not the table’s when the other browsers are ok with them?

Works fine for me in Safari (Mac). Are you on a PC? If so, don’t worry about it, because Safari on PC is long dead and buried now.

off topic:

What a lovely South African accent!

thank you! I tried it with my iphone and it works. Yes I was on PC. Thanks for letting me know S-for-PC is not to be trusted.

well I’d never have guessed in a million years that all I need do is change the header file of both newer css pages + old table pages to <!doctype html> and I can easily and for free add audio to my entire site. Very grateful to everyone who gave feedback :smile:

haha thank you for accent comment. Kudus for recognizing the country!

You don’t even need to change the doctype since the only thing the browsers look for is <!doctype html - and ignore anything following). It is only validators that need the extra information and you can always override the doctype to validate against any HTML version - you have to for HTML 5 anyway since the “doctype” it uses is also a valid doctype for HTML 2 through 4 as well as all versions of XHTML except for XHTML5 (which doesn’t have a doctype).

oh I see so that’s what ralphm meant when he wrote: “modern browsers understand HTML5 elements like audio, they display them no matter what the doctype is. In that regard, the doctype is irrelevant to them.”

I finally got it! Thank you.

1 Like