It might surprise you to know that you can create a webpage document by simply typing any text into a simple ASCII text editor, like Windows Notepad, or Mac Textedit. Do not use a fancy word processor because they add their own tags that interfere with HTML.
Notepad is a simple editor that saves text only in ASCII format. To save in ASCII format in Textedit you have to use Format - Convert To plain Text before typing anything. Or set use plain text; add .txt extension when saving in the Preferences of Textedit.
Every webpage starts out with a basic set of tags. Shown below is the template for a basic webpage. Type these tags into a file and than save it with the .htm file extension.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>The HTML5 Herald </title> </head> <body> </body> </html>
Now, I will describe the tags starting with the first line and working my way down the page.
<!doctype html>
The doctype (Document Type Declaration) tells the browser what type of document it is. The doctype tag should always be first at the top of the HTML file. There are different doctypes for older versions of HTML, and the doctype tag tells the browser how to interpret the code. This tag defines the document as containing HTML5.
<html lang="en">
Just below the doctype line is the html element. The html element contains the lang attribute set with a value of "en". This specifies that the document is in English.
An html attribute is a property name and value within an opening tag that provide additional information about the element. An example might be width="500". Each type of HTML element has specific attributes. Each attribute has a default value that will be used if you don't specify that attribute within the HTML tag.
Because this is XHTML we need a closing </html> tag, which you'll find at the bottom of the code. To put it another way, the <html></html> element is a container for all the other elements of the webpage.
<head>
The next line of our page is the <head> element. The head element defines the head section. The head section contains any code that must be interpreted before the body of the webpage can be rendered. The head section usually contains CSS and JavaScript code. It also contains <meta> elements. Meta elements are tags placed in the head section of your webpage that help define its contents. For example, a description meta tag is used by search engines to display a description of your page in their search results.
In this case the head section contains the <meta charset="utf-8">, which defines the character set used to encode the webpage. The utf-8 (8-bit Unicode Transformation Format) character set is character encoding capable of encoding all 1,112,064 characters in Unicode using four 8-bit bytes.
There are many other types of Meta elements, but we need only the character set Meta tag for now.
The head section also contains the <title> tag. This is were you type the title of your webpage as you want it to be displayed in the browser's title bar.
Just below the closing </title> tag line is the closing </head> tag.
<body>
Just below the closing </head> tag is the opening <body> tag. Between the opening and closing </body> tag is were all the HTML code for all the visual elements of the webpage should be placed. Since this is a just a template, there are no visual elements.
Just below the closing </body> tag is the closing </html> tag. This indicates the last bit of webpage code has been entered.
If you submitted this template to your browser (in most systems by double-clicking on its file name, you would see nothing. To continue further, make a copy of this template, then enter some text into the body element. Then when you submitted this new page to your browser, the text will be displayed.
To be technically correct, when you type text into the body section as I described above, it should be contained within a paragraph element <p>Your text.</p>. The browser would take text just typed in to the body element and (behind the scenes) place it within an anonymous element. So it would display, it just would not be coded technically correct.
More HTML Code:
• Code For a Basic 2-Column Fluid Webpage Layout
• HTML abbr and acronym Tag
• HTML Text Tags Basics
• Changing the Size of an Image on Your Webpage
• Use an Image as a Form Submit Button
• How to Write and Run HTML
• HTML Definition List
• Radio Button Basics
• Easy Code to Add Yahoo Site Search to Your Website
• Webpage DOCTYPE Declarations Explained