Introduction to HTML 5 - aakash14goplani/FullStack GitHub Wiki
HTML5 is a markup language used for structuring and presenting content on the World Wide Web. In earlier versions of HTML, the containers weren't so specialized. Before HTML5, all we had to work with was general containers, and this was a problem for search engines. By only having the generic elements to work with, elements like a div, which stands for division, or a span, which is a container used for smaller amounts of content, search engines couldn't be as accurate as they would like to in trying to figure out the most important parts of the page to index. So a big part of HTML5 is the addition of containers or HTML elements that are very specific about the purpose and intent of the content it's describing. So, what is HTML5? HTML5 is the combination of new HTML elements and sometimes new attributes to existing elements plus new JavaScript APIs implemented in the browser, and there're a lot of them. And all of that together is what's considered HTML5.
- W3C.
- WHATWG (Web Hypertext Application Technology Working Group).
- ECMAScript.
There are a number of new elements in JavaScript APIs that are introduced in HTML5. And the elements include some feature-rich elements that allow you to draw on the page like canvas down to a little more mundane functionality like giving the browser a hint of where to conduct hyphenation in a long word. The point behind many of these elements is not necessarily to add any new distinctive behavior to the page itself, but rather to describe content within the page to a search engine.
-
<main>...</main>element: The main element is used to wrap, well, the main content of the page. The point of an element like this is to tell a search engine that the most important information regarding search relevance is in this element. By way of contrast, navigation links in the header, copyright information, and other such secondary content would not be in the main element.
<body>
<main>
...
</main>
</body>-
<article>...</article>element: Inside the main element, you may very well find the article element. And as the name of the element hints, the content that goes inside the article element represents a way to group together information signaling to the search engine that the content inside is really important as opposed to content that might be surrounding it. This is just getting even more specific than what's found in the main element. And, in fact, you can often have more than one article element on the page. Here, you might find a literal magazine article or maybe a blog post or any markup that makes up the primary content of the page. Now like I noted previously, this is one of the elements that doesn't change the look or the behavior of any of the content in the browser, but it gives what we call semantic meaning to the content. So if you wrap your content inside an article element, the search engine will know that this information is the most important content on the page in relevance to the search request.
<body>
<main>
<article>...</article>
<article>...</article>
...
</main>
</body>-
<aside>...</aside>element: Now in contrast to the content found in article, you may have some side content that you want to feature on a page. So the aside element is used to flag content that might be important, but maybe not as necessary as the rest of the content on the page. The best way to think about this is like a sidebar in a printed magazine. So while this information may be important, it's not crucial to what's being displayed on the page.
<body>
<main>
<article>
<aside>...</aside>
</article>
</main>
</body>-
<section>...</section>element: Now sometimes you might have content that's best grouped together in a logical way, and that's the purpose of the section element. Section is a bit like thedivelement. You use it to group related content, but the grouping is for a logical group rather than for visual purposes, which is often how adivis used.
<body>
<main>
<section id="right-rail">
<article id="asset-1">
<div>...</div>
</article>
<article id="asset-2">
<div>...</div>
</article>
</section>
<section id="full-width-rows">
...
</section>
</main>
</body>-
<header>...</header> & <footer>...</footer>elements: And all of this content is often framed by a header or footer. The header and footer are such a common construct that the associated elements are tailor-made to create a logical bucket for this content. By surrounding appropriate content with these tags, you can signal to a search engine the purpose for the markup inside these areas. -
<nav>...</nav>element: Now one of the most common elements found inside a header or footer is the nav element. The nav element is a logical container for site navigation. This is explicitly reserved for links that point to locations a part of the origin web page. So, in other words, you would have links to the Contact, About Us, and Events pages of the website, but you wouldn't add in links to other domains from inside the nav structure. You can certainly still add those links inside the header and footer, but you just don't include them inside a nav element itself. -
Other important tags are:
<meter>,<progress>,<time>,<figure>,<figcaption>,<details>,<summary>,<mark>,<bdi>,<wbr>,<output>,<embed>,<video>,<source>,<datalist>,<math>
- Graphics and Typography
- Interaction, Events, and Messaging
- Storage and Files
- Real Time Communications
- Web Components
- Performance Analysis
- Security and Privacy
- Drag and Drop
- Async
- History
- Service Workers
Now that you have a lot of context to work with, let's turn our attention to some code. What we'll do is quickly review an HTML4 page and then look at the equivalent page written in HTML5.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
<style type="text/css">
...
</style>
<script type="text/javascript">
...
</script>
<div id="container">
<div id="header">
<div id="nav"></div>
</div>
<div id="section-right-rail">
<div id="article-asset-1">
<div>...</div>
</div>
</div>
<div id="footer"></div>
</div>
<script src="/abc.js" type="text/javascript"></script>
</body>
</html>-
And the first thing you'll notice is I'm declaring a DOCTYPE. Now this is set as a Transitional DOCTYPE. And this is important because we want to give a clue to the browsers of how to interpret this page as it encounters the markup. Being a good XHTML citizen, I went ahead and put in a namespace, again, so the browser knows how to interpret the markup, and what sort of rules to enforce as it's interpreting the page. Case Sensitive
-
Further down, there's a little style that's being applied to the page. And I'm setting the content type to text/css. And also the same thing with JavaScript, the content type is being set to text/javascript.
So now let's take a look at the same page writing a little bit different using HTML5, and let's discuss some of the differences. Now when we take a look at the HTML5 page in the browser, it's basically the same thing except we'll notice a few changes that are actually quite considerable.
<!DOCTYPE HTML">
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta http-equiv="refresh" content="30">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<style>
...
</style>
<script>
...
</script>
<main>
<header>
<nav></nav>
</header>
<section id="right-rail">
<article id="asset-1">
<h1>...</h1>
<a href="/pqr.htm">
<figure>
<figcaption>This is a caption</figcaption>
<img src="xyz.jpg" />
</figure>
</a>
</article>
</section>
<footer></footer>
</main>
<script src="/abc.js" type="text/javascript"></script>
</body>
</html>-
So now let's take a look at the underlying markup so we can talk about some of the differences that you'll see there. Now here inside the code, you'll notice on line 1, we still have DOCTYPE, but it's just HTML. That's all there is. We don't need to create a traditional DOCTYPE or a standards DOCTYPE or anything like that. This just says HTML. And this flags to the browser that it can interpret this page as an HTML5 page.
-
And that does two things.
- Number one, it gives you the ability to access all the new elements and JavaScript APIs on the page.
- And, number two, it does away with some of the very strict rules that were in force with XHTML.
-
Now I'm setting the language for the page, and then you'll see some best practices used in this page that you want to pay close attention to.
-
So here I'm saying that the character set for the page is
utf-8. And then thehttp-equiv,x-ua-compatible, content set toie=edgeonly has relevance for Internet Explorer and basically is telling Internet Explorer to try and use the latest version possible. -
Down here
viewport, this is important for mobile devices. Here it's saying you want the width of the page to be device width and setting the initial zoom level or the initial scale to 1. -
Now as we come down the page a little bit, again, we've got style and script elements. But you'll notice the type attribute is missing from style and script. So pretty much for styling a page, CSS has exclusively been the only language we've used for a very long time. So CSS is the default language used for the style element, so you no longer have to add it. For scripts, JavaScript has been the de facto standard for a very long time. There was once a day where you might add interactivity to page using VBScript, but that was a very long time ago, and you won't see that anymore these days. So JavaScript is the default language. So when you're doing inline scripts, you do not need the type element.
-
Now when we talk about loading scripts in from external sources, down here I'm bringing in scripts using an extra request so the type argument is required. But it's only required when you're referencing external JavaScript.
-
Let's go back up to the top of the page for a moment. Now if we take a look at the contents of the page, you'll notice that many of the elements are quite different. So within the body of the page, first, we have the main element. And with the main element, you can have one and only one main element on each HTML5 page. Inside of that, we have the header for the page itself. And then inside the header, we have nav.
-
Now the nav element as you may recall from the slides said that any links or navigation found within that element point to a location within the website itself. So we're not linking to external sites from here. So we're saying this is the navigation for the site here itself. And that's very important for search engines. So that makes up most of the header, which is the navigation. And now we have an article on the page. Now the article wraps up the primary content for the page. This does not have the same restrictions as the main element. You can have more than one article on the page. And, in fact, a very practical application might be, let's say, you're building a website for an actual magazine. You may have more than one article on the page, but this gives a heavier weight to the content found in these elements, especially when it comes to search indexing.
-
Now something else that you might find interesting is that inside the article, I also have an h1 element. Now before you could have one and only one
h1element on the page in order to achieve high search engine rankings. But now since elements have a semantic meaning to their parent, you could have anh1inside the header and inside the article and perhaps even inside the footer. So now you're not stuck with saying that this is the heading, the main heading for the entire page. So depending on the container that it's in, you can say that this is the main heading for that specific container. And so in this instance, this is the main header of the article. -
Now next we have a section, and sections are used to create logical groupings of content that's on the page. Now before HTML5 we would just use divs everywhere. And divs are great. And often the practical application between a
divand asection, they're basically the same thing. But what you want to do is usediv'swhen you need to change the appearance of something on the page. So if you need a container to attach some style rules to, then you'd use adiv. Now you use asectionwhen you want to create a logical group between elements. But it doesn't have any sort of change on the final UI. -
So, here I'm creating a section, and inside that section, I have an anchor tag. Now what's interesting about this anchor tag is that before in previous versions of HTML, you could not have a block level element wrapped by an anchor. Now what do I mean by that? Well if we go back to our page, you'll notice that this whole image along with the caption is a link. And that is established by one single anchor tag. So that anchor wraps around the image and the caption, which provides a link for the whole thing. So now you can use anchors to provide links to block level items, as well as inline items. So you'll also see the use of the figure and figcaption elements here to wrap up the image on the page.
-
And then, finally, we're saying this semantically is the footer of the page, which includes some more links to information about me. And so now if you take a look at the overall skeleton of the page, inside the body, we have a main element with a header, an article, and a footer. And so when a search engine looks at this page, it has a very good idea of what to consider important and not important when it comes to relating to search terms. Now that you've had an introduction to the code, let's talk about how you might get started building one of your first HTML5 pages.
-
So the big question at this point is what do you do if you're developing an application and you really need a certain API, and it's not supported by all browsers, or maybe it's not supported by some at all. The second line of defense is to turn to fallbacks and polyfills.
-
As the name suggests, a fallback is an implementation that you can fall back to that's usually done by a third party with a different API than what you might find natively implemented in the browser. An example here is a popular library called Q which provides an implementation for Promises, which is an API that's used to deal with asynchronous processing. And it was available far before any browser supported Promises natively. Now the API, the functions in your code calls, was different than what was spec-ed out for the native browser implementation, but you generally got the same functionality. And that's the hope of a fallback, to provide similar functionality as a native feature but maybe just with a different API.
-
A polyfill, on the other hand, is meant to replicate the exact same interface, as well as functionality as how the native implementation would be built in to the browser. The benefit to using a polyfill is that once browser support is ubiquitous, the idea is that you can simply remove the polyfill from your application, and the functionality will remain unchanged.
-
So let's take a look at a new API like video. So there's three different classifications. You have use, caution, and avoid. So in this case, it says use with polyfill, and it gives you a description of how you can use the API and what you might want to consider if you're going to use it in a production scenario. Oftentimes, it's perfectly acceptable to use it with modern browsers, but if you want to use it with older browsers, then you might have to use a polyfill.
-
Now let's take a look at another one that's classified as caution, and that's IndexedDB. Here, this is marked as caution with fallback because not all the browsers have completely implemented the API.
-
Let's take a look at one last one, and that is WebSQL. This is marked as avoid. The WebSQL API is officially deprecated and is not being worked on in any browser. So this is certainly an API that if you're going to use, you need to know exactly why you're using it and what the dangers are should you rely upon it.