WEBVTT - TechStuff Looks at HTML5
0:00:02.520 --> 0:00:05.760
Get in touch with technology with tech Stuff from hof
0:00:06.120 --> 0:00:14.240
dot com. Hello again, everyone, and welcome to tech Stuff.
0:00:14.280 --> 0:00:15.920
My name is Chris Poulette and I'm an editor at
0:00:15.920 --> 0:00:18.040
how Stuff Works dot com. Sitting here across from me
0:00:18.200 --> 0:00:24.959
as usual as senior writer Jonathan Strick. I crave baked goods. Uh. Yeah,
0:00:25.000 --> 0:00:28.360
you know, we don't really have a lot of outtakes
0:00:28.440 --> 0:00:31.480
on this ship. I managed to say every bun last
0:00:31.520 --> 0:00:35.760
time and another and then I referenced it and you
0:00:35.840 --> 0:00:39.120
got it. Anyway, Thanks, You're welcome. So anyhow, we'll talk
0:00:39.120 --> 0:00:42.239
a little bit about HTML five. Why don't we? Why not?
0:00:42.880 --> 0:00:45.680
All right then, So, first of all, I would like
0:00:45.720 --> 0:00:48.519
to tell everyone out there in the listening audience we
0:00:48.600 --> 0:00:52.239
are currently recording this episode in the afternoon, in the
0:00:52.240 --> 0:00:54.640
middle of the week. Now, the reason why that's interesting
0:00:54.680 --> 0:00:57.720
to us is that we normally record on Friday mornings
0:00:58.080 --> 0:01:00.280
at the end of a long week, but this is
0:01:00.320 --> 0:01:06.640
a Tuesday afternoon and I'm feeling a little zany. So okay,
0:01:06.640 --> 0:01:10.480
but HTML five, So HTML five, before we even get
0:01:10.520 --> 0:01:12.959
into that, we need to talk about what hypertext markup
0:01:13.040 --> 0:01:17.400
language is. Yes, Now, this is the stuff that essentially,
0:01:17.400 --> 0:01:20.600
this language is what helps a web web developer design
0:01:20.640 --> 0:01:23.800
a web page so that it appears a certain way
0:01:23.840 --> 0:01:26.520
when you access it with a web browser. It's a
0:01:26.640 --> 0:01:30.800
very basis of making stuff appear on a web page
0:01:31.080 --> 0:01:33.480
the right way. And so this dates all the way
0:01:33.480 --> 0:01:37.360
back to the early nineties. Do you remember the early nineties? Yes, yeah,
0:01:37.640 --> 0:01:40.440
what a magical time that was. Huh No, no, you're right,
0:01:40.520 --> 0:01:43.800
let's move on. So but but in general, this is
0:01:43.840 --> 0:01:45.959
the stuff that has the tags in it that tell
0:01:46.640 --> 0:01:49.360
you know, the tag is essentially a message to the
0:01:49.400 --> 0:01:53.040
web browser saying, when you see this tag, you need
0:01:53.080 --> 0:01:57.800
to take this action, uh and make whatever comes after
0:01:57.920 --> 0:02:01.760
that appear a certain way on website. Or it may
0:02:01.840 --> 0:02:03.640
just be to help lay it out a certain way.
0:02:04.280 --> 0:02:07.520
And so, uh, there were a lot of tags that
0:02:07.560 --> 0:02:11.800
were developed for HTML, and eventually, uh, it got to
0:02:11.840 --> 0:02:14.720
the point where there needed to be a new implementation
0:02:14.800 --> 0:02:19.040
of HTML because it was starting to get a little clunky, right,
0:02:19.120 --> 0:02:21.640
you know, they had a lot of tags there and
0:02:21.720 --> 0:02:25.359
it was not elegant and confusing for someone who was
0:02:25.440 --> 0:02:27.120
just trying to start up a website. So there were
0:02:28.120 --> 0:02:32.360
attempts to make that more streamlined. Yeah, just just for clarification,
0:02:32.360 --> 0:02:36.120
when we're talking about tags, basically, uh, an HTML document
0:02:36.240 --> 0:02:40.959
document is simply a text document um. So it's it's
0:02:41.000 --> 0:02:45.200
basically your your your letters, your numbers, uh, all those
0:02:45.280 --> 0:02:50.320
kinds of standard text characters with no formatting whatsoever. In fact,
0:02:50.440 --> 0:02:52.800
you're the ones supplying the formatting. If you want something
0:02:52.919 --> 0:02:56.959
in in bold in the current version of HTML, you
0:02:56.960 --> 0:02:59.480
would type I want this text in bold, and before
0:02:59.520 --> 0:03:02.760
that you would type of tag called strong, which is
0:03:02.800 --> 0:03:05.560
put in between in between brackets, and at the end
0:03:05.600 --> 0:03:08.160
of the text that you want bold, you would put
0:03:08.200 --> 0:03:09.880
what they call a clothes tag, which is a slight
0:03:10.120 --> 0:03:12.960
variant on that, basically to say, I want the following
0:03:13.000 --> 0:03:15.560
in bold. I wanted to stop here, and it goes
0:03:15.600 --> 0:03:17.960
in for that. It could be italic, it could be underlined,
0:03:18.000 --> 0:03:20.120
it could be struck through or you That's how you
0:03:20.160 --> 0:03:22.440
put in hyperlinks, that's how you put in images. Is
0:03:22.480 --> 0:03:26.160
alway these little tags and it's all in uh more
0:03:26.240 --> 0:03:28.040
or less plain English. You're not doing a lot of
0:03:28.040 --> 0:03:32.680
calculation like you would in any a typical programming language,
0:03:32.680 --> 0:03:35.480
like for example, see where you're actually putting in variables
0:03:35.480 --> 0:03:38.280
and all that stuff. That's why HTML is is popular
0:03:39.000 --> 0:03:41.520
for people who are sort of dabbling in the idea
0:03:41.680 --> 0:03:44.240
of programming because it sort of gives you an idea
0:03:44.240 --> 0:03:46.400
of what coding is like without a whole lot of
0:03:46.920 --> 0:03:50.400
coding UM and you and it's very simple to do.
0:03:50.480 --> 0:03:55.280
It's based on a standard page definition UM, which is
0:03:55.640 --> 0:03:59.960
maintained by the UH the W three C, the World
0:04:00.000 --> 0:04:03.360
Old Wide Web Consortium. Yeah, I love that word. Yep,
0:04:03.520 --> 0:04:06.920
Web's great word. UM an consortium is also awesome. Oh
0:04:07.000 --> 0:04:09.520
yeah that too. So yeah, if you were to go
0:04:09.600 --> 0:04:11.560
and view a web page, if you were to view
0:04:11.600 --> 0:04:14.400
the source of that web page, uh, the you can
0:04:14.440 --> 0:04:17.240
look at the source code. It's essentially it's really just
0:04:17.360 --> 0:04:20.159
a series of directions like what we said, that tell
0:04:20.200 --> 0:04:23.960
the browser what how to lay that page out. And
0:04:24.040 --> 0:04:27.640
so it's not software. HTML is not a programming language.
0:04:27.800 --> 0:04:30.760
It's a markup language. And what happens is that the
0:04:30.839 --> 0:04:35.240
companies that make the web browsers have to incorporate the
0:04:35.360 --> 0:04:39.760
whatever the standard version of HTML happens to be into
0:04:39.760 --> 0:04:42.640
the web browser so that when you access a website,
0:04:43.000 --> 0:04:47.800
it uh it it displays that website the right way
0:04:48.000 --> 0:04:52.599
asterisk asterisk and the asterisk there is that they don't
0:04:52.880 --> 0:04:55.719
have to nobody's telling them. They have to abide by
0:04:55.800 --> 0:04:58.360
all the laws, which has been a point of much
0:04:58.400 --> 0:05:02.120
contention in the past, because UM, there will be a
0:05:02.200 --> 0:05:05.560
standard release. There was HTML two and three, and now,
0:05:05.680 --> 0:05:08.719
as of the time we're recording this in September two
0:05:08.720 --> 0:05:12.680
thousand twelve, the official recognized version of HTML is HTML four.
0:05:13.680 --> 0:05:16.760
UM it's it's been updated a couple of times, and
0:05:17.000 --> 0:05:19.480
people thought that HTML wasn't going to be updated at
0:05:19.480 --> 0:05:23.120
all anymore, that it was essentially dead. But leave that
0:05:23.160 --> 0:05:28.919
for a minute. UM. The thing is UM these these specifications.
0:05:29.080 --> 0:05:34.360
The browser manufacturers Google for Chrome, UH, Apple for Safari
0:05:34.400 --> 0:05:38.000
Opera which is a Norwegian company, Microsoft for i E
0:05:38.800 --> 0:05:42.520
UM Internet Explorer, and and and others. There are many others. UM.
0:05:42.560 --> 0:05:45.320
They basically have to adopt the guts of this thing.
0:05:45.480 --> 0:05:47.280
So if you wanted your text to be bold, you
0:05:47.320 --> 0:05:49.800
can use the old B or you can use the
0:05:49.800 --> 0:05:52.960
newer strong and they're they're all going to recognize that.
0:05:53.120 --> 0:05:56.680
But they're they're usually backwards compatible, so that because if
0:05:56.720 --> 0:05:59.760
they weren't backwards compatible, any web page that had been
0:05:59.800 --> 0:06:03.760
does mine with the old tags would be unrecognizable and
0:06:03.760 --> 0:06:06.719
would not display properly on your screen. So if you
0:06:06.960 --> 0:06:08.760
need to get your MIDI file fixed, you can still
0:06:08.800 --> 0:06:12.520
go back to a page from and observe that. Um.
0:06:13.040 --> 0:06:15.640
But that was the thing for a while, was oh well,
0:06:16.200 --> 0:06:19.200
filling the name of the company here isn't completely compliant
0:06:19.200 --> 0:06:22.680
with the newest standard of HTML. And um, you know,
0:06:22.720 --> 0:06:25.719
Microsoft went on their own for a while, and um
0:06:26.080 --> 0:06:28.760
that was it wasn't the kind of thing that the
0:06:28.800 --> 0:06:31.760
average person would notice. It was more of a tech
0:06:32.080 --> 0:06:34.520
head thing where they were going, well, you know so
0:06:34.680 --> 0:06:39.040
and so it was more compatible. Yeah, so the HTML
0:06:39.520 --> 0:06:44.640
four and also x htmlor UM, which is another type
0:06:44.640 --> 0:06:52.039
of market language, these languages. Well, HTML four anyway, that
0:06:52.160 --> 0:06:56.560
was the latest version, the one that everyone is considered
0:06:56.600 --> 0:07:01.640
the standard. The current standard was released in a late nineties. Yes,
0:07:01.880 --> 0:07:06.480
so you've got this uh, this markup language that's over
0:07:06.560 --> 0:07:09.040
a decade old. And here's the problem. The problem is
0:07:09.080 --> 0:07:12.440
that the markup language as it was designed back then
0:07:13.000 --> 0:07:18.040
could not support some of the more rich Internet UH
0:07:18.160 --> 0:07:21.600
features that we've come to know and love over the years,
0:07:22.280 --> 0:07:25.480
things like video and audio. Stuff that is a more
0:07:25.560 --> 0:07:29.360
of a rich experience was not supported in HTML four. Yeah.
0:07:29.400 --> 0:07:31.320
As a matter of fact, if you go to UH
0:07:31.520 --> 0:07:34.960
many popular sites, um, you're going to and view the
0:07:35.000 --> 0:07:38.240
source as Jonathan suggested a moment ago. You're gonna see HTML,
0:07:38.320 --> 0:07:41.240
but you're also likely to see other stuff in there too,
0:07:41.280 --> 0:07:43.480
And you're gonna say, but, Jonathan and Chris, you told
0:07:43.520 --> 0:07:45.760
me that i'd pretty much be able to read the
0:07:45.840 --> 0:07:48.360
text file in the back end. What's all this other
0:07:48.440 --> 0:07:53.000
programming stuff? Well, it could be JavaScript, which popular, which
0:07:53.080 --> 0:07:57.080
is UH a language, a very mild programming language that
0:07:57.120 --> 0:08:00.080
you can use to add some interactivity to websites. And
0:08:00.080 --> 0:08:03.160
you're also likely to see UH an embed code for
0:08:03.400 --> 0:08:08.480
FLASH on a lot of interactive media sites. UM and
0:08:09.160 --> 0:08:12.400
probably just about everybody listening to this US is UH
0:08:12.440 --> 0:08:14.840
familiar with flash. But it was a technology developed by
0:08:14.920 --> 0:08:20.200
the UH design software company Macromedia before it merged with Adobe,
0:08:21.000 --> 0:08:26.160
UH slash acquired by Adobe, and UM. Basically, UH flash
0:08:26.160 --> 0:08:31.720
has been the standard for many years for designing rich
0:08:32.240 --> 0:08:36.800
Internet content, animations, embedding video and things not not YouTube
0:08:36.880 --> 0:08:40.240
videos or things like that or vino. But you know,
0:08:40.440 --> 0:08:43.680
special people would produce these things in house and put
0:08:43.720 --> 0:08:46.400
them on their websites, or they would contract a designer
0:08:46.440 --> 0:08:49.280
to put this kind of interactive content on there. A
0:08:49.280 --> 0:08:51.120
lot of shopping sites like to use it so you
0:08:51.120 --> 0:08:54.560
can customize your room or things the UM and and
0:08:54.600 --> 0:08:59.680
so HTML itself doesn't have any way to do that
0:09:00.040 --> 0:09:02.719
kind of content. Now, you can link to something, you
0:09:02.760 --> 0:09:06.800
can embed an image, UM or or files on the site,
0:09:06.800 --> 0:09:08.600
but you might if you click on that file, it
0:09:08.720 --> 0:09:13.400
might just load in another UM another kind of application,
0:09:13.480 --> 0:09:16.400
for example UM. So it really didn't support it the
0:09:16.440 --> 0:09:19.480
way that it could be done if you used flash
0:09:19.760 --> 0:09:21.640
for example. Right, So instead what you would have to
0:09:21.640 --> 0:09:24.920
do is install these plug ins into your browser. So
0:09:24.960 --> 0:09:28.800
these are plug ins or extensions that would make your
0:09:29.080 --> 0:09:33.400
browser capable of seeing this kind of information, because again,
0:09:33.440 --> 0:09:36.160
on their own, they might not necessarily be able to
0:09:36.160 --> 0:09:38.559
do that. So if you've ever gone to a website
0:09:38.559 --> 0:09:40.960
and it's prompted you to install a plug in, first
0:09:40.960 --> 0:09:44.520
of all, be careful, yes, because that's a very common
0:09:44.559 --> 0:09:48.720
technique of installing malware onto your computer. If it's if
0:09:48.720 --> 0:09:52.160
it's a site that you trust, and you feel reasonably
0:09:52.200 --> 0:09:55.720
sure that there's not any uh hanky nor panky going
0:09:55.800 --> 0:09:59.240
on at that particular moment, then that might be what
0:09:59.360 --> 0:10:01.360
you need. You might to install a plug in order
0:10:01.360 --> 0:10:03.560
to view whatever that content is or interact with that
0:10:03.679 --> 0:10:07.360
site in some way. So that was one of the
0:10:07.400 --> 0:10:11.440
reasons why, uh, there there needed to be this update
0:10:11.480 --> 0:10:15.320
to HTML was to design a markup language that was
0:10:16.440 --> 0:10:18.920
backwards compatible so that you could still see those old sites,
0:10:18.960 --> 0:10:23.480
but also more streamlined again, so that someone who's building
0:10:23.520 --> 0:10:27.280
something from the ground up starting with HTML five would
0:10:27.280 --> 0:10:30.400
be able to do so without it being too confusing.
0:10:30.480 --> 0:10:32.880
They didn't want the barrier to be too high, and
0:10:32.920 --> 0:10:36.320
also they wanted to be able to natively support these
0:10:36.440 --> 0:10:41.440
rich Internet interactions without the requirement of some sort of
0:10:41.600 --> 0:10:45.680
additional plug in. So this is what kind of prompted
0:10:46.280 --> 0:10:50.680
companies like Apple in particular to push for HTML five
0:10:50.800 --> 0:10:55.960
because the uh, the alternative is to support all these plugins,
0:10:56.120 --> 0:11:00.320
and if there were just one type of plug for
0:11:00.400 --> 0:11:05.680
each type of rich media kind of experience, maybe that
0:11:05.679 --> 0:11:07.880
wouldn't be such a big deal. You know. It would
0:11:07.880 --> 0:11:10.520
mean that perhaps the browser would be clunkier than it
0:11:10.559 --> 0:11:13.160
needed to be, but you would have that one solution.
0:11:13.200 --> 0:11:16.320
But the fact is, there's not just one solution. For
0:11:16.360 --> 0:11:19.319
a while, there were there were a few different competing
0:11:19.400 --> 0:11:21.880
technologies that we're all doing the same sort of thing.
0:11:22.400 --> 0:11:24.080
But it would mean that, you know, you could be
0:11:24.080 --> 0:11:27.160
watching video on one site and everything's fine, and then
0:11:27.200 --> 0:11:28.839
you would go to a different site and suddenly it
0:11:28.840 --> 0:11:31.439
would prompt you to get a different kind of plug
0:11:31.440 --> 0:11:34.080
in because the plug and you were using does not
0:11:34.200 --> 0:11:36.880
work with that particular video. So the two in particular,
0:11:36.920 --> 0:11:39.319
I'm thinking of our flash and silver Light. Yes, a
0:11:39.360 --> 0:11:42.920
silver light came from Microsoft, and uh, anyone who was
0:11:42.920 --> 0:11:46.480
watching um I remember in the two thousand I think
0:11:46.480 --> 0:11:49.520
it was a two thousand eight Olympics where if you
0:11:49.559 --> 0:11:51.959
wanted to watch the stuff online you had to use
0:11:52.000 --> 0:11:55.040
silver light, at least in the United States, And so
0:11:55.320 --> 0:11:58.320
U that meant that I installed silver Light on my
0:11:58.360 --> 0:12:00.640
computer because I wanted to watch some of the stuff.
0:12:01.080 --> 0:12:04.040
And and you know, it's it's just not an ideal
0:12:04.080 --> 0:12:06.520
solution in the sense that you know, you've got a
0:12:06.520 --> 0:12:09.800
browser that's getting heavier and heavier as far as code
0:12:09.840 --> 0:12:12.040
is going, because you're plugging in all this stuff. It
0:12:12.040 --> 0:12:14.480
would be nicer if it were all built in from
0:12:14.520 --> 0:12:16.920
the ground up and you didn't have to worry about that.
0:12:17.520 --> 0:12:19.520
So that was one of the reasons for HTMO five.
0:12:19.600 --> 0:12:24.559
Another was that we're slowly getting closer to this idea
0:12:24.559 --> 0:12:29.760
of the semantic web, where the web is quote unquote
0:12:29.760 --> 0:12:32.440
getting smarter. And what I mean by that is that
0:12:32.559 --> 0:12:36.600
it's easier for you to access the information you are
0:12:36.640 --> 0:12:41.840
particularly interested in. So if I'm doing a search for
0:12:42.760 --> 0:12:47.080
a very specific type of information with the semantic Web,
0:12:47.440 --> 0:12:51.800
I would ideally get precisely what I needed from that,
0:12:51.880 --> 0:12:54.440
and not just a bunch of links to things that
0:12:54.600 --> 0:12:57.160
may or may not have the answer to my question.
0:12:57.920 --> 0:13:02.400
Uh So, h g mL five has organizational tags in it,
0:13:02.800 --> 0:13:07.000
things like section or article or side or header that
0:13:07.120 --> 0:13:09.719
can help when you're doing a search. It can help
0:13:09.760 --> 0:13:15.400
identify things that are more important within the confines of
0:13:15.440 --> 0:13:17.719
that web page than others. So that way, let's say
0:13:17.720 --> 0:13:20.280
that you're a web page developer and you've used these
0:13:20.280 --> 0:13:23.960
tags to kind of organize your web page. You've got
0:13:23.960 --> 0:13:27.200
an entire section that's about the search terms that I'm
0:13:27.200 --> 0:13:30.040
looking for. It's more likely that that's going to come
0:13:30.120 --> 0:13:32.360
up for me when I'm using some sort of search tool,
0:13:32.880 --> 0:13:35.360
because you have laid it out in such a way
0:13:35.400 --> 0:13:38.720
that the search engine knows, hey, this is a section
0:13:38.800 --> 0:13:43.079
that directly pertains to the search terms that were entered. Um,
0:13:43.200 --> 0:13:46.880
so those were that's also another consideration. So HTML five
0:13:47.840 --> 0:13:51.120
has really had a big push, particularly from companies like Apple,
0:13:51.240 --> 0:13:55.760
over the last well several years, actually UH, and that
0:13:56.160 --> 0:13:58.400
has been the battle cry for a lot of these
0:13:58.440 --> 0:14:02.520
companies that HTML five is the future. You should stop
0:14:02.559 --> 0:14:06.400
developing for things like flash and other plug ins because
0:14:06.520 --> 0:14:09.600
that's just holding us back. Instead, put your energy toward
0:14:09.760 --> 0:14:13.360
getting the HTML five to a complete standard, because as
0:14:13.360 --> 0:14:17.720
it stands now, it's still being developed. Yeah, the UH
0:14:17.880 --> 0:14:22.040
HTML five, for all of its uh prominence in the
0:14:22.080 --> 0:14:24.960
tech news in the last couple of years, UM, you
0:14:24.960 --> 0:14:28.520
you would think that it was fairly new. But an
0:14:28.600 --> 0:14:32.560
organization called what would well Okay, that's my best guess
0:14:32.560 --> 0:14:35.000
on how to pronounce it, w h A t w G.
0:14:35.200 --> 0:14:39.480
That's the Web Hypertext Application Technology Working Group. Basically, it's
0:14:39.520 --> 0:14:45.840
a group of companies or organizations that decided to UH
0:14:45.880 --> 0:14:51.280
put their efforts together and update HTML. The idea is, UH,
0:14:51.280 --> 0:14:54.000
you know, or behind it was, hey, we don't you know,
0:14:54.360 --> 0:14:59.120