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.
There are the basic terms of an HTML document
- The Doctype
- Character encoding declaration
- HTML Elements
- HTML Tags
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
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
There are some other ways to set character encoding declaration on an HTML file. We will learn them later in an another lesson.
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 tells the start and end of an HTML Elements. Some Elements have both start tag and end tagExample :
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 elementsExample :
<hr> <input type="color">
Optionally, We can also write void elements with a slash before the ending bracket.Example :
<hr/> <meta charset="utf-8" />
HTML Start tags can have attributes. There are global attributes and specific attributes for some tags.
These are the examples for attributes
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>
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
This is an example for invalid nesting
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.