Tech Junkie Blog - Real World Tutorials, Happy Coding!: HTML5 Tags

Sunday, June 19, 2016

HTML5 Tags

Not Supported in HTML5:

DOCTYPE tag:

HTML 4:

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

XHTML Strict:

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

XHTML Traditional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

New HTML5 Tags:

Layout:

UI:

Language:

Security:

Data Type:

Event Handling:

Invokes a command for a button or html element, such as a Javascript function (only supported in IE9):
```
<command>
```

External Application/Objects:

Embed external objects/content that sometimes requires a plugin such as Flash contents :
```
<embed>
```

Media:

Sound content:
```
<audio>
```
Video content:
```
<video>
```
Subtitles for video or audio:
```
<track>
```
List of sources(different media formats) for video or audio, the browser will play the supported video format:
```
<sources>
```

Graphics:

Like a painting canvas that you can fill with graphics via scripting usually Javascript on the fly:
```
<canvas>
```

Content:

Details the user can expand and collapse:
```
<details>
```
Details tag in Firefox Version 22.0:

Details tag in IE 10.0.9200.16618:

Details tag in Chrome Version 27.0.1453.116 m:

Collapsed View In Chrome:

Expanded View In Chrome:
Text next to the arrow in <details> tag:
```
<summary>
```
Grouping of cotent, usually used in conjunction with <figcaption> to display an image with a caption:
```
<figure>
```
Caption for &ltfigure&gt tag:
```
<figcaption>
```
Format text in a different direction than adjacent text:
```
<bdi>
```
Section of the page:
```
<section>
```
A caption:
```
<caption>
```
A content item:
```
<article>
```
Related content item:
```
<aside>
```
Highlight text:
```
<mark>
```
Dialog box or window, a markup of conversions (not the dialog window more of like a transcript of a chat):
```
<dialog>
```