How to use HTML5

What do I need to do in order to use HTML5?

My client’s website was written entirely in HTML4, but there is an audio feature that I think is only offered in HTML5 and it might be nice to use that.

Suggestions?

Check the recently added controls and features by googling it. try following link for the same.

Check the features that your application using can be achievable via html5 without breaking , for this u can use http://caniuse.com/

Always have the fallback support for older browsers that your application did

then change your application without worries

That basically means it was written entirely in HTML5, too. :stuck_out_tongue:

As long as browsers understand an element, you can use it. So you can use the audio element right now in all the browsers that matter (to most people).

Just change your doctype in the first line of page to

<!DOCTYPE html>

Yes, it’s neater to do that, although it’s kind of academic. The only practical use changing the doctype has is during validation.

Yeah, but it’s also a way to feel the change :smile:

4 Likes

I’ve said this before to you but I guess it didn’t really latch on.

HTML5 is purely additive to HTML4. It’s not like you just upgrade browsers from old to new, and boom; you are out of HTML4 and into HTML5. No; not like that at all.

HTML5 is basically just new attributes, new elements, new ways to build your webpage. They can be used or they can be ignored. You can pick bits and pieces to use (like HTML5 form validation bits).

You need to get it out of your head HTML4 and 5 are different.They are not. Please forget HTML4/5 exist.

There is only “HTML”.

Same with CSS2.1/3/4 (technically CSS2.1/3/4 properties don’t exist).

IT"S ALL CSS :slight_smile: .No need to put labels on this stuff :wink: .

1 Like

This is sort of two threads in one, and I started another one about the audio part called: Using HTML to Play Audio Clip

I totally crashed and burned in that attempt, which leads me to believe that maybe I need to change some stuff at the top of that HTML page? :confused:

If you want to discuss what’s going wrong with your audio player, I’d strongly suggest you continue the discussion in that topic. Otherwise it’s going to become hopelessly confused between two threads.

1 Like

I do listen to you @RyanReese - quite often!!

But as I recall from this weekend, there were a few that disagreed with your above explanation. (And I’m not taking sides here.)

The main thing I am trying to figure out is if I have to change like the first 10 lies of each HTML page, because there is lots of scarey stuff at the top that I never have really understood, and I know 5-8 years ago, there were some pretty heated debates among developers about HTML vs XHTML vs XML and how you had to set things up differently at the top of each page.

I figured maybe I had to do that for HTML5 - because as I mentioned to @ralphm, my attempt at audio just using HTML5 failed miserably!!

Here is what the top of my HTML section looks like for every PHP script…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <!-- HTML Metadata -->
    <title>Some Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="Some Description" />
    <meta name="keywords" content="Some Keywords" />

No they were arguing about the wording that w3schools presented. They were not disagreeing with what I said. They were poitning out that w3schools poorly worded their explanation of HTML4/5 attributes to you when you first brought up that quote.

I hate to be a dictator about this, but what I said in post #7 is pure truth and you should not question it. Accept it. Research it if you want, but you’ll just have to trust me that I am correct.

@RyanReese,

So how should I redo the HTML header info in Post #10?

Certainly it must be tweaked!

I mean this is what I’d do at the top of every file. Note that the charset is updated to the HTML5 version and self closing isn’t critical.

<!DOCTYPE html>
<html>
<head>
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <title>Title</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
  <meta name="description" content="Some Description">
  <meta name="keywords" content="Some Keywords">
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link href="/css/resets.css" type="text/css" rel="stylesheet">
  <link href="/css/main.css" type="text/css" rel="stylesheet">
</head>

Can you explain how we went from this…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

To this…

<!DOCTYPE html?

And what about switching from…

<meta content="IE=edge" http-equiv="X-UA-Compatible">

To this…

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

What does this do…

<meta name="viewport" content="width=device-width,initial-scale=1">
  1. You don’t need XHTML. My doctype I switched is the HTML5 doctype and is completely compatible since it’s technically the one from HTML2 (IIRC).
  2. We didn’t switch the IE edge to utf-8!

!!!

This is what we switched.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

To

 <meta charset="UTF-8">

Was that THAT hard to see? How do you think I switched your utf-8 charset with…the ua-compatible meta tag? I’m bewildered. Truly I am.

Then I added in these.

  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta name="viewport" content="width=device-width,initial-scale=1">

The first one gets IE out of compatibility mode and reports the highest version available.
The second is to basically let mobile users see the responsive display you want them to see. Otherwise, on mobile/desktop, users will see the desktop version of your page, but zoomed out. Noone wants that.

If you don’t need to support IE8 and earlier then XHTML 5 is a possible alternative to HTML. You don’t need the doctype in that case as XHTML doesn’t have a quirks mode for the doctype to turn off.

You do need to either provide closing tags for all the ones you open or include the / to make them self closing.

Most important change is the MIME type so as to serve the page as XHTML - otherwise it is just HTML with ignorable errors.

Considering the users skill level, I think it’s extremely inadvisable in this situation to even put the thought in their head :wink: . Need to hammer down the fundamentals of HTML first.

I agree with Ryan.

The first thing the OP needs to use HTML5 is to understand the fundamentals of HTML and ALSO his content.

Tho document becomes HTML5 with the addition of the proper doctype ( mentioned earlier) , but this mean you have automatic backwards compatible support; consideration needs to be given to that as well.

A good brush up on semantics might also be advisable. Everyone gets all googly eyed about the sound and video tags… and forget the mess-o-divs from their legacy HTML4 that could be restructured as SECTIONS, ARTICLES, HEADER, etc…

The main thing I was attempting to point out is that unless you have the MIME type set correctly for XHTML that those /> in the source are errors and should be removed.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.