17 December 2016
Lecture 4: Basic HTML Document Structure
The basic HTML document structure is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page title</title>
</head>
<body>
<p>Hello world.</p>
</body>
</html>
The code above is as same as the Codepen code below:
In Codepen you should only type the part that you want to be inside the <body> --- </body> part. The <body> --- </body> tag contains the main page content.
But if you use an text editor to create your .html file, you must use the basic template shown at the beginning.
The <!DOCTYPE html> declares that the page is an HTML 5 document.
The <html> --- </html> tag contains two parts:
The <head> --- </head> and the <body> --- </body>
The <head> --- </head> contains what is called the meta data. This part is not displayed in the web page but it contains important information for the browser.
For example, the <meta charset="utf-8"> line tells the browser which encoding is to be used to render the page. And the <title> --- </title> contains the page title, which gets displayed as the tab name when you open the page in a browser.
As mentioned before, you don't need to include the <title> --- </title> in Codepen. But it must be included in any HTML document that you type in a text editor.
You should have noticed by now that one HTML tag may contain other tags inside it and so on. But the tags must be properly nested. For example, the following code is invalid:
<div>This is some text.<p>We have p tag.</div>And div tag.</p>
The code is invalid because we have opened a div tag and then a p tag. But while closing them we have closed the div tag before the p tag. (We will discuss more about the div tag later.)
The correct way to write the above code can be as below:
<div>This is some text.<p>We have p tag.</p>And div tag.</div>
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment