HTML5 Syntax - HTML 5

What is syntax in HTML5?

HTML 5 has a "custom" HTML syntax which is compatible with both HTML 4 and XHTML1 documents published on the Web, but it is not compatible with more ambiguous SGML features of HTML 4.
HTML 5 does not have same syntax rules as XHTML where lower case tag names are needed. An attribute can have a value for closing all empty elements.
HTML5 has lot of flexibility and would support the following:
  • Uppercase tag names.
  • Quotes are optional for attributes.
  • Attribute values are optional.
  • Closing empty elements are optional.

The DOCTYPE

DOCTYPEs in older versions of HTML are lenghty because the HTML language was SGML based and it requires a reference to a DTD.
Syntax to specify DOCTYPE is shown below:
<!DOCTYPE html>
Above syntax is not case sensitive.

Character Encoding

Syntax to specify Character Encoding is shown below
<meta charset="UTF-8">
Above syntax is not case sensitive.
The <script> tag
It is a easy to add a type attribute with a value of "text/javascript" to script elements as shown below
<script type="text/javascript" src="scriptfile.js"></script>
HTML 5 removes extra information required and user can use below syntax
<script src="scriptfile.js"></script>
The <link> tag
Earlier <link> was written as shown below
<link rel="stylesheet" type="text/css" href="stylefile.css">
HTML 5 removes extra information required and user can use below syntax
<link rel="stylesheet" href="stylefile.css">

HTML5 Elements

HTML5 elements are marked up using start tags and end tags and the tags are delimited using angle brackets along with the tag name in between.
Difference between start tags and end tags is that the end tag includes a slash before the tag name as shown below
<p>...</p>
HTML5 tag names are not case sensitive and can be written in all uppercase or mixed case. But most common convention is to stick with lower case.
<p>...</p> means the page contains a paragraph and some elements are prohibited from containing any content at all and are known as void elements. Example: br, hr, link and meta etc.
Below is the complete list of HTML5 Elements.

Tag

Description

<!--...-->

Specifies a comment

<!DOCTYPE>

Specifies the document type

<a>

Specifies an anchor

<abbr>

Specifies an abbreviation

<acronym>

Deprecated:Specifies an acronym

<address>

Specifies an address element

<applet>

Deprecated: Specifies an applet

<area>

Specifies an area inside an image map

<article>

New Tag: Specifies an independent piece of content of a document, such as a blog entry or newspaper article

<aside>

New Tag:Specifies a piece of content that is only slightly related to the rest of the page.

<audio>

New Tag:Specifies an audio file.

<base>

Specifies a base URL for all the links in a page

<basefont>

Deprecated: Specifies a base font

<bdo>

Specifies the direction of text display

<bgsound>

Specifies the background music

<blink>

Specifies a text which blinks

<blockquote>

Specifies a long quotation

<body>

Specifies the body element

<br>

Inserts a single line break

<button>

Specifies a push button

<canvas>

New Tag:This is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.

<caption>

Specifies a table caption

<center>

Deprecated: Specifies centered text

<col>

Specifies attributes for table columns

<colgroup>

Specifies groups of table columns

<command>

New Tag:Specifies a command the user can invoke.

<comment>

Puts a comment in the document

<datalist>

New Tag:Together with the a new list attribute for input can be used to make comboboxes

<dd>

Specifies a definition description

<del>

Specifies deleted text

<details>

New Tag:Specifies additional information or controls which the user can obtain on demand.

<dir>

Deprecated: Specifies a directory list

<div>

Specifies a section in a document

<dl>

Specifies a definition list

<dt>

Specifies a definition term

<embed>

New Tag:Defines external interactive content or plugin.

<fieldset>

Specifies a fieldset

<figure>

New Tag:Specifies a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.

<b>

Specifies bold text

<big>

Deprecated:Specifies big text

<i>

Specifies italic text

<small>

Specifies small text

<tt>

Deprecated:Specifies teletype text

<font>

Deprecated: Specifies text font, size, and color

<footer>

New Tag:Specifies a footer for a section and can contain information about the author, copyright information, et cetera.

<form>

Specifies a form

<frame>

Deprecated:Specifies a sub window (a frame)

<frameset>

Deprecated:Specifies a set of frames

<head>

Specifies information about the document

<header>

New Tag:Specifies a group of introductory or navigational aids.

<hgroup>

New Tag:Specifies the header of a section.

<h1> to <h6>

Specifies header 1 to header 6

<hr>

Specifies a horizontal rule

<html>

Specifies an html document

<isindex>

Deprecated: Specifies a single-line input field

<iframe>

Specifies an inline sub window (frame)

<ilayer>

Specifies an inline layer

<img>

Specifies an image

<input>

Specifies an input field

<ins>

Specifies inserted text

<keygen>

New Tag:Specifies control for key pair generation.

<keygen>

Generate key information in a form

<label>

Specifies a labelfor a form control

<layer>

Specifies a layer

<legend>

Specifies a title in a fieldset

<li>

Specifies a list item

<link>

Specifies a resource reference

<map>

Specifies an image map

<mark>

New Tag:Specifies a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.

<marquee>

Create a scrolling-text marquee

<menu>

Deprecated: Specifies a menu list

<meta>

Specifies meta information

<meter>

New Tag:Specifies a measurement, such as disk usage.

<multicol>

Specifies a multicolumn text flow

<nav>

New Tag:Specifies a section of the document intended for navigation.

<nobr>

No breaks allowed in the enclosed text

<noembed>

Specifies content to be presented by browsers that do not support the <embed>tag

<noframes>

Deprecated:Specifies a noframe section

<noscript>

Specifies a noscript section

<object>

Specifies an embedded object

<ol>

Specifies an ordered list

<optgroup>

Specifies an option group

<option>

Specifies an option in a drop-down list

<output>

New Tag:Specifies some type of output, such as from a calculation done through scripting.

<p>

Specifies a paragraph

<param>

Specifies a parameter for an object

<cite>

Specifies a citation

<code>

Specifies computer code text

<dfn>

Specifiesa definition term

<em>

Specifies emphasized text

<kbd>

Specifies keyboard text

<samp>

Specifies sample computer code

<strong>

Specifies strong text

<var>

Specifies a variable

<plaintext>

Deprecated: Render the raminder of the document as preformatted plain text

<pre>

Specifies preformatted text

<progress>

New Tag:Specifies a completion of a task, such as downloading or when performing a series of expensive operations.

<q>

Specifies a short quotation

<ruby>

New Tag:Together with <rt> and <rp> allow for marking up ruby annotations.

<script>

Specifies a script

<section>

New Tag:Represents a generic document or application section.

<select>

Specifies a selectable list

<spacer>

Specifies a white space

<span>

Specifies a section in a document

<s>

Deprecated: Specifies strikethrough text

<strike>

Deprecated: Specifies strikethrough text

<style>

Specifies a style definition

<sub>

Specifies subscripted text

<sup>

Specifies superscripted text

<table>

Specifies a table

<tbody>

Specifies a table body

<td>

Specifies a table cell

<textarea>

Specifies a text area

<tfoot>

Specifies a table footer

<th>

Specifies a table header

<thead>

Specifies a table header

<time>

New Tag:Specifies a date and/or time.

<title>

Specifies the document title

<tr>

Specifies a table row

<u>

Deprecated: Specifies underlined text

<ul>

Specifies an unordered list

<video>

New Tag:Specifies a video file.

<wbr>

New Tag:Specifies a line break opportunity.

<wbr>

Indicate a potential word break point within a <nobr> section

<xmp>

Deprecated: Specifies preformatted text

HTML5 Attributes

Elements may contain attributes which can be used to set various properties of an element.
Few attributes are defined globally and can be used on any element, whereas others are defined for only specific elements. All attributes have a name and a value. Below is the example of an HTML5 attributes which shows how to mark up a div element with an attribute named class using a value of "example" −
<div class="example">...</div>
Attributes can be specified within start tags and should not be used in end tags.
HTML5 attributes are not case sensitive and can be written in all uppercase or mixed case. But most common convention is to stick with lower case
Here is a complete list of HTML5 Attributes.

Attribute

Options

Function

accesskey

User Defined

Specifies a keyboard shortcut to access an element.

align

right, left, center

Horizontally aligns tags

background

URL

Places an background image behind an element

bgcolor

numeric, hexidecimal, RGB values

Places a background color behind an element

class

User Defined

Classifies an element for use with Cascading Style Sheets.

contenteditable

true, false

Specifies if the user can edit the element's content or not.

contextmenu

Menu id

Specifies the context menu for an element.

data-XXXX

User Defined

Custom attributes. Authors of a HTML document can define their own attributes. Must start with "data-".

draggable

true,false, auto

Specifies whether or not a user is allowed to drag an element.

height

Numeric Value

Specifies the height of tables, images, or table cells.

hidden

hidden

Specifies whether element should be visible or not.

id

User Defined

Names an element for use with Cascading Style Sheets.

item

List of elements

Used to group elements.

itemprop

List of items

Used to group items.

spellcheck

true, false

Specifies if the element must have it's spelling or grammar checked.

style

CSS Style sheet

Specifies an inline style for an element.

subject

User define id

Specifies the element's corresponding item.

tabindex

Tab number

Specifies the tab order of an element.

Title

User Defined

"Pop-up" title for your elements.

Valign

top, middle, bottom

Vertically aligns tags within an HTML element.

Width

Numeric Value

Specifies the width of tables, images, or table cells.

HTML5 Document
Below tags have been introduced in HTML5
  • Section − section tag represents a generic document or application section and can be used combining with h1-h6 for indicating the document structure
  • Article − article tag represents an independent piece of content of a document like a blog entry or newspaper article.
  • Aside − aside tag represents a piece of content which is slightly related to rest of the page.
  • Header − header tag represents the header of a section.
  • Footer − footer tag represents footer for a section and contains author, copyright information, etc.
  • nav − nav tag represents a section of the document which is intended for navigation.
  • Dialog − dailog tag is used to mark up a conversation.
  • Figure − figure tag is used to associate a caption together with some embedded content, like a graphic or video.
  • The markup for an HTMl 5 document is shown below

Output

Output

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 5 Topics