In This Tutorial
DOCTYPE declaration
The <!doctype > is the way to declare or instruct your web browser that which version of HTML you are going to use to write a web page. This is the first thing to do on your web page even before the <html> tag. This definition is also called Document type Definition or DTD.
Remember that, the <!doctype> is a declaration of the HTML version. It is neither the part of HTML nor an HTML tag. The <!doctype> is supported by all major web browsers like Chrome, Firefox, Internet Explorer, Safari, Opera etc.
HTML5 doctype example
<!DOCTYPE html>
<html>
<!—HTML 5 code, tags –>
</html>
The above example tells the web browser that this web page is going to be an HTML 5 document followed by the HTML code.
Note that, there is no closing tag of the <!DOCTYPE>.
DOCTYPE declaration for HTML 5
In HTML 5, which is the latest version of HTML the <!doctype> is declared as follows:
<!DOCTYPE html>
That is how you simply use HTML after the DOCTYPE declaration. This tells the web browser that your web page will use HTML 5. The HTML 5 has a lot of new features like new semantic elements, new form types, multimedia elements like <video>, <audio> etc.
Examples of using doctype
Following are a few DOCTYPE examples with different HTML tags.
Example of div style for setting font size and color
The following example sets the font size and color of the text by using div style attribute.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>HTML div demo</title>
</head>
<body>
<div style=“font-size: 18px;color: red;”>This is div style demonstration! This is div style demonstration</div>
</body>
</html>
|
div background color
The example below shows how to set the div background color with the style attribute. The background property of CSS background-color is used to define the background color of the div.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<html>
<!DOCTYPE html>
<head>
<title>HTML div demo</title>
</head>
<body>
<div style=“background-color: #FFFF00;font-size: 18px;color: red;”>This is div style demonstration! This is div style demonstration</div>
</body>
</html>
|
Example of using HTML <th> tag
The example below shows a table with the employee names, ages, and salaries. The headers are placed in <th> tags.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!DOCTYPE html>
<html>
<head>
<title>HTML table demo</title>
</head>
<body>
<table border=“1”>
<tr>
<th>Employee Name</th>
<th>Employee Age</th>
<th>Employee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>35</td>
<td>$5000.00</td>
</tr>
<tr>
<td>Tina</td>
<td>24</td>
<td>$3500.00</td>
</tr>
<tr>
<td>Adams</td>
<td>31</td>
<td>$4000.00</td>
</tr>
</table>
</body>
</html>
|
You can see, we started the web page with HTML 5 declaration: <!DOCTYPE html> in above examples.
What if doctype tag or DTD is not specified
Your web page may work normally if no document type definition, DTD is specified. However, this is always recommended to declare the doctype. As such doctype specifies which HTML version you are using, this piece of information helps or is required by some useful tools like Validator by w3c. This tool helps in validating the markup in your web document. Similarly, other tools may also require which version of HTML you are using.
Also, this is quite helpful for browsers to trigger standard rendering mode if <doctype> specifies which HTML version is used or else browser will keep on guessing which HTML version is used and may cause some unexpected results.
DOCTYPE HTML public – for HTML 4.01
This is covered in a separate chapter. Click here to learn about HTML 4 declaration.
Leave A Comment?