Thursday, December 12, 2013

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.


<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

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

Learn HTML 5 - Structure Part 2 First HTML5 Webpage

No comments:

Post a Comment