What is HTML5 Syntax?

HTML5 elements can contain attributes that are used for setting different properties of the element. All attributes have a name and a value:

The DOCTYPE

<!DOCTYPE html>

Meta Character Encoding

<meta charset = "UTF-8">

The <script> tag

<script src = "scriptfile.js"></script>

<link> tag

The<link>?tag defines the relationship between the document and external resources. I.e. in simple words, it is used to include the CSS files.

Use <link>? tag in <head>

<link rel = "stylesheet" href = "stylefile.css">

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 a background image behind an element
bgcolor numeric, hexadecimal, 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 an 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 the 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

The following tags have been introduced for better structure

  • section
  • article
  • aside
  • header
  • footer
  • nav
  • dialog
  • figure

HTML5 document which includes CSS and Java Script

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Web Page Title is here</title> 
        <script src="script.js"></script>
        <link rel="stylesheet" href="style.css">   
    </head>
    <body>
     <p>web page content goes here</p>
    </body>
</html>