Knowledge Never Sets
As we have already seen the structure of html document. The root of the document is html tag then there are two child tags head and body.
Head tag contains meta data of a web page like title, meta,link,base.
Syntax
1 2 3 4 5 6 7 8 9 | <html> <head> . . </head> <body> </body> </html> |
Example
1 2 3 4 5 6 7 8 | <html> <head> <title>My First Page</title> </head> <body> Hello How are you. </body> </html> |
To show data in subscript and in superscript format we use <sub>..</sub> and <sup>..</sup> tags.
1 2 | X<sup>2</sup>+Y<sup>2</sup> H<sub>2</sub>O |
Example:
Output:
X2+Y2
H2O
For creating bold Itelic and Underline text we use following syntax.
We can also use nesting of tags
Example:
1 2 3 4 | <b>This is a bold text</b> <i>This is a italic text</i> <u>This text is a underline</u> <b><i>This is a bold and italic text</i></b> |
Output:
This is bold text
This is italic text
This text is underline
This is bold and italic text
General Synax of html5 is
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html lang="en"> <head> ... </head> <body> ....... </body> </html> |
<!DOCTYPE html> specifies that this document is html 5 document and you can use all html5 tags here.
<html> is root tag of html document it contains two child tags <head> and <body>
<head> specifies that this portion contains heading information of page we can use many other tags here like <title> which is used to specify the title of page and may other.
<body> we put the contents which you would like to display on browser.
Inside body tag we use many different html tags to proper formatting the data.
Example
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html lang="en"> <head> <title>My First Html Page</title> </head> <body> <h1>Welcome to my first html page</h1> </body> </html> |
In above syntax start and end tags are optional.
if you dont want to use any attribute with root tab ie <html lang=”en”> then you can omit this
So syntax with out root tag
1 2 3 4 5 6 7 | <!DOCTYPE html> <head> ... </head> <body> ....... </body> |
Exampe of html document
Example
1 2 3 4 5 6 7 | <!DOCTYPE html> <head> <title>My First Html Page</title> </head> <body> <h1>Welcome to my first html page. Removed root tag</h1> </body> |
In the XHTML syntax we have to specify the xmlns to declare that it is a HTML namespace.
We can use lang or xml:lang attribute to specify the language
Syntax with xmlns
1 2 3 4 5 6 7 | <html xmlns="http://www.w3.org/1999/xmlns" xml:lang="en"> <head> ... </head> <body> ....... </body> |
Example
1 2 3 4 5 6 7 8 | <html xmlns="http://www.w3.org/1999/xmlns" xml:lang="en"> <head> <title>My First Html Page</title> </head> <body> <h1>Welcome to my first html page. Removed root tag</h1> </body> </html> |
Example
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <!DOCTYPE html> <html lang="en"> <head> <title>My First Html Page</title> </head> <body> <h1 style="background-color:cyan;font-size:20px">Welcome to my first html page</h1> <p>Keep learnig html5 its simple and easy </p> </body> </html> |
The pre tag is used to display preformatted text in HTML document. pre tag preserves the content structure it can be used to show pre-formated data stored in the database and in another documents and to show computer codes programs to HTML document.
Syntax:
1 | <pre>... |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <title> Example of HTML pre tag </title> </head> <body> <pre> This is a pre tag example. This preserves the text strutcture Done!! |