Scribd
Upload
39 views28 pages

html5 PDF

The document provides an overview of HTML 5 including its introduction, recent browser versions, differences from HTML 4, how browsers render HTML documents, the structure of an HTML document, and new elements introduced in HTML 5.

Uploaded by

Xuan Vinh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
39 views28 pages

html5 PDF

The document provides an overview of HTML 5 including its introduction, recent browser versions, differences from HTML 4, how browsers render HTML documents, the structure of an HTML document, and new elements introduced in HTML 5.

Uploaded by

Xuan Vinh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

11 October 2018

HTML 5

Vinh Mai

1/28
Overview

1 Introdution
2 Recent version browser
3 HTML 5 differences from HTML 4
4 Browser render html document
5 Structure of html
6 Sumary

2/28
Introdution

HTML (Hyper Text Markup Language)


HTML 5.2 (14/12/2017): version recommendation
HTML 5.3 (09/08/2018): version working draf

3/28
Recent version browser

1 Chrome: 69
2 Firefox: 62
3 Opera: 55
4 IE: 11
5 Edge: 17
6 Safari: 12

4/28
HTML 5 differences from HTML 4

1 Syntax
2 Elements, Attributes, APIs

5/28
Syntax

1 <!DOCTYPE>
2 Character encoding

6/28
Syntax

<!DOCTYPE>

At beginning of the file .html


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

Version HTML 4

7/28
Syntax

Character encoding:

HTML 5:
<meta charset="UTF-8">

HTML 4:
<meta http-equiv="Content-Type"
content="text/html" charset="UTF-8">

8/28
Elements, Attributes and APIs

1 New elements:
Structure: header, footer, section, main, article, aside, nav,
fifure, template

Other: video, audio, track, embed, mark, progress, meter,


time, ruby, canvas, datalist, output...
2 Changed elements
3 New attributes
4 APIs

9/28
Browser render html document

Figure 1: Browser render html document on Web-kit

10/28
Structure of html document
<!DOCTYPE html>
<html> // root element

<head> // metadata
<title>
<meta>
<link>
<script>
</head>

<body> // content

<script> // script
</body>
</html>

11/28
HTML, Body element

1 HTML
Root element of html document
Encouraged to specify language based on lang attribute

// elements
<html lang="en">
</html>

2 Body: content of document

12/28
Document metadata: head element

Metadata for document, information of website


Consist:
<title>: name of document, show on tab bar.
<base>: set default url for all relative url
<style>: css internal
<link>
<meta>

13/28
Link tag
3 primary types:
external css:

<link href="main.css" rel="stylesheet"


type="text/css">

icon:

<link rel="icon shortcut" href="./icon.png">

manifest:

<link rel="manifest" href="./manifest.json">

14/28
Meta tag

Character endcoding:
<meta charset="UTF-8">

Using attributes to carry information: name, content


<meta name="viewport" content="">
<meta name="description" content="">
<meta name="keyworks" content="">
<meta name="robots" content="index, follow">

15/28
Scripting

1 Script tag: block for script


Async, defer attributes only use with external script.

16/28
17/28
Scripting

1 Noscript tag: affect when user turns off Javascript on browser

Use in head tag or out of head tag.

18/28
Elements

Structural elements on HTML 5: section, article, aside, main,


header, footer, nav.

19/28
Article

Specifies an independent block content. the content should be


entire seld-conttained (it’s own things)
Example: new article, blog post...

// elements
<article>
<header>
<h2> Heading </h2>
</header>
<p> paragraph <p>
<p> paragraph <p>
</article>

20/28
Section

Specifies a subsection of block content, title in


particular(heading).
Forms part of something else
Example: chapters in book, posts in blog.

21/28
Section
// elements:
<article class="blog">
<h1> blog </h1>

<section class="post">
<h2> heading </h2>
<p> Paragraph <p>
</section>

<section class="post">
<h2> heading </h2>
<p> Paragraph <p>
</section>

</article>

22/28
Header
Group represents elements to introduce content
Case use:
header of page
header of self-contained of block content (as article tag)

// elements:
<article class="blog">
<header>
<img />
<input />
</header>
</article>

Example: header contain logo, search form...

23/28
Footer

Similar with header tag.


Example: footer contain footer navigation, info of author,
contact...

// elements:
<footer>
<nav>
<a href=""></a>
<a href=""></a>
</nav>
<p>Copyright 2009</p>
</footer>

24/28
Main

Content of main is unique of document


Main topic, main function of document
Not consist: navigation links, copyright information, logo,
banners or search form.

25/28
Nav
Enclose site navigation
Typical use list of elements in content (ul)
Can use any where: main site navigation, pagination,
previous/next article links...

// elements:
<nav>
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</nav>

26/28
Aside
Content of aside tag is indirectly related to content document
Example: sidebars, group navigation,

// elements:
<aside>
<h2> blog </h2>
<ul>
<li><a href=""></a>
</ul>
<h2> blog </h2>
<ul>
<li><a></a></li>
</ul>
</aside>

27/28
Summary

Using new elements in HTML 5:


Semantic elements, help content specifies.
Support SEO

28/28

You might also like