Core Elements

DOCTYPE

DOCTYPE decides how to render an html web document.

There are two modes for an HTML document, quirks mode and strict mode. Strict mode renders the webpage content according to the W3C recommendations. Quirks mode is the way in which old web browsers used to render the web page. If DOCTYPE tag is not defined properly then your web page will be rendered in quirks mode and will give ambiguous page layout of your webpage for different web browsers.

So always keep a habit of defining DOCTYPE tag in your html document.

Different versions of html have different syntax for defining DOCTYPE. The latest and simplest syntax is for html5 and can be defined as follows:

<!DOCTYPE html>

html tag

html tag is the next tag after doctype and tells the web browsers that its an html document. It is a root element that contains other tags.

head tag

head tag contains all the header information. It must contain title tag. Other tags that can be included in head are as follow:

  • base tag - sets base url for all relative urls
  • meta tag - contains information about data.
  • link tag - used to add stylesheet
  • style tag - used to define style
  • script tag - used to add javascript file

title tag

title tag is used inside head tag. It is used to define the title of a webpage that is displayed on the titlebar of a web browser.

body tag

body tag is used to define the main content of a web page. It includes different elements like paragraph, hyperlinks and other contents.

Things to do

  • Open notepad++.
  • Paste the following code(its better to write it instead of copying it):
    <!DOCTYPE html>
<html>
<head>
    <title>put your title over here</title>
</head>
<body>
This is my first web page. Edit this line.
</body>
</html>
  • Save the file and name it core.html or core.htm. Name it anything you want, just make sure that you end the file name with .html or .htm extension.
  • Now open the file in a browser to view your first web-page.
  • Finally open the file using notepad again and play with the code. Change title or body content and view the result.
<< Introduction to HTML Working with text >>