webdevlinux - logo Web Dev Linux

HTML Standards and Syntax

There are some HTML standards which are defined by World Wide Web Consortium is also known as W3C. We need to follow their standards to make a valid HTML document.

HTML Standards syntax HTML Standards Terms

HTML Syntax

There are the basic terms of an HTML document

  • The Doctype
  • Character encoding declaration
  • HTML Elements
  • HTML Tags
  • Attributes
  • Contents
  • Comments

Doctype

Doctype is a required term in a valid HTML Document. It says to the browser, the HTML version that the document is written in. Doctype declaration is case-insensitive.

This is the Doctype declaration of HTML5

<!DOCTYPE html>

Character Encoding Declaration

This tells the character encoding we used to store the HTML document. Generally, We use UTF-8 encoding.

In HTML5 We declare it like this

<meta charset="utf-8">

There are some other ways to set character encoding declaration on an HTML file. We will learn them later in an another lesson.

HTML Elements

Simply We can say that HTML element is a single segment in an HTML Document. There are the examples of HTML elements.

<a href="http://www.webdevlinux.com">Visit WDL</a>
<input>
<hr>
<option>Male</option>

HTML elements are categorized as void elements, normal elements, raw text elements, escapable raw text elements and Foreign elements.

HTML Elements can have HTML Tags, Attributes and Contents

HTML Tags

HTML Tags tells the start and end of an HTML Elements. Some Elements have both start tag and end tag

Example :
Start Tag : <option>
End Tag : </option>
Start Tag : <a>
End Tag : </a>

Some Elements only have the start tag and no end tag. We called them void elements.  Take a look at the examples to understand about the tags of void elements

Example :
<hr>
<input type="color">

Optionally, We can also write void elements with a slash before the ending bracket.

Example :
<hr/>
<meta charset="utf-8" />

Attributes

HTML Start tags can have attributes. There are global attributes and specific attributes for some tags.

These are the examples for attributes

href="http://www.webdevlinux.com"
type="color"

Contents

Things between of an Element start tag and end tag is known as the content of the element. Void elements have no contents.

Examples :
<a href="http://www.webdevlinux.com" target="_blank">Visit WDL</a>
Content of this element is : Visit WDL

<input type="color">  
There is no contents

<p>My Name is <input></p>
Content of this p element is : My Name is <input>

HTML Comments

We can have comments anywhere in an HTML Document except inside of a tag name. HTML Comments are not displayed on the browser and it is just a note for the developer. Comments are starting with the characters <!-- and ending with the characters -->

Example :
<!-- Coded by WDL on 20161220 -->  This is a valid comment
<p <!-- Paragraph -->>I am free on</p>   This is a invalid comment

We also use comments to temporary hide some elements from the browser.

HTML Standards of nesting elements

The nesting element is another name for placing elements inside another element.

If an element has both start and end tags then its' end tag must be placed at the end of its content. In other words, end tag cannot be placed outside of element content.

This is an example for a valid nesting

<p>1<sup>st</sup></p>

This is an example for invalid nesting

<p>1<sup>st</p></sup>

HTML Standards can be changed version to version, We need to be updated with the version we are working on. Always follow HTML Standards to be a great developer.