Dec 12

Learn HTML 5 – Structure Part 2 First HTML5 Webpage

Learn HTML 5 - Structure Part 2 First HTML5 Webpage

Learn HTML 5 – Structure Part 2 First HTML5 Webpage

Here is an example of one of the simplest HTML5 documents you can create. It starts with the HTML5 doctype, followed by a page title and then followed by some content, in this case a single paragraph.

Explanation

  • The DOCTYPE declaration defines the document type
  • The text between <html> and </html> describes the web page
  • The text between <body> and </body> is the visible page content
  • The text between <h1> and </h1> is displayed as a heading
  • The text between <p> and </p> is displayed as a paragraph

Result would be like below :

HTML5 First Demo

HTML Tags

HTML markup tags are usually called HTML tags

  • HTML tags are keywords (tag names) surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, with a forward slash before the tag name
  • Start and end tags are also called opening tags and closing tags
<tagname>content</tagname>

What is the DOCTYPE for?

But why is there a doctype at all? All browsers have two different ways of reading your document – standard mode and quirks mode. If you don’t tell them what kind of document they are handling, the will go into quirks mode. Think of this as the old way of reading your document – there might be some flaws and you can be sure that not all browsers read your document the same way. Declaring a doctype forces the browsers to go into standard mode – the “new” way of reading your document. Using standard mode, most browsers will read your document the same way and they will actually understand what you are writing.

To make the HTML5 document easier for yourself to understand, you would want to use the two section-elements <head> and <body>. Using these sections you clearly separate the information about your page (the head) from the actual content (body)

HTML Page Structure

Below is a visualization of an HTML page structure:
HTML Page Structure

HTML Versions

Since the early days of the web, there have been many versions of HTML:

VersionYear
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML52013

What you have learned so far:

  • Always declare the doctye – <!DOCTYPE html>
  • Use the element <head> to separate the information about your page
  • Use the element <body> to separate the actual content of your webpage
  • Using <html>, <head>, and <body> is a matter of style when you use HTML5, but it makes the structure of the page clearer to you.
  • Indenting your markup makes it easier to comprehend
  • You can nest one element inside another element

Permanent link to this article: http://zappmania.in/2013/12/12/learn-html-5-structure-part-2-first-html5-webpage.htm

Leave a Reply

Your email address will not be published.