Your first look at HTML5 markup

      No Comments on Your first look at HTML5 markup

A simple HTML5 markup

<html>
<head>
<title>my page</title>
</head>
<body>
My first page-simple html markup
</body>
</html>

THE HTML5 Doctype

A simple HTML markup starts with <!Doctype html>. It simply tells anyone reading the markup that HTML5 code follows.The first thing about html5 doctype it that it is striking simple.HTML doctype dosenot define any particular version for HTML,it just indicates that the page contain HTML.

Why do web pages require DOCTYPE?

Without doctype most of the browsers enter into quirks mode.In this mode the browsers, they render pages according to some buggy rules they used int older versions.Doctype tells a browser that you want stricter standard mode.

<html></html>

Secondly we choose to wrap our document in the html tag.Up until HTML5 all other version and demanded the use of html tag,fact being that it has no effect on the browsers. HTML5 makes thisĀ  completely optional.

The head and body tags

Most web developers agree that using traditional <head> and <body> tags can help avoiding confusion by separating the information about the page and the actually content.It can be particularly used for adding scripts,style sheets and meta.

<html>
<head>
</head>
<body>
</body>
</html>

The title tag

The <title></title> tag in HTML contains the title for your page.Anything that is described in the title tag becomes your page’s title.Both head and body can contain the title tag.

<html>
<head>
<title>my page</title>
</head>
<body>
My first page-simple html markup
</body>
</html>

HTML Basic elements
An HTML element usually consists of a start tag and end tag, with the content inserted in between
Content goes here….HTML elements are contained in thetag.These build a page

    • HTML headings are defined with the h1 to h6 tags.
      h1 defines the most important heading. h6 defines the least important heading.

      This is heading 1

      This is heading 2

      This is heading 3

      This is heading 4

      This is heading 5
      This is heading 6

 

  • HTML links are defined in a tags.The link’s destination is defined in the href attribute
    This is a link

     <a href="http://www.scanfcode.com">This is a link</a>
  • HTML paragraphs are wrapped in the p tag.
    <p>This is a paragraph</p>
    
    <p>This is another paragraph</p>
    
  • HTML images are defined with the tag.
    The source file (src), alternative text (alt), width, and height are provided as attributes.

     <img src="scanfcode.jpg" alt="scanfcode.com" width="104" height="142" />

Character encoding
Character encoding is the standard that tells your computer how to convert a file into sequence of bytes when it is stored. HTML5 makes it easy.All you need to do is adding a meta element in the head of a document.

<meta charset="UTF-8"/>

Language attribute
It is considered good to indicate your web page’s natural language.They are useful-for example search engines can filter the pages they show in results in context to a particular language.To specify a language you can use the lang attribute along with the language code.The most popular way is to use html tag.

 <html lang="en">//English language defined

Adding style sheets
Professional web developers use style sheets.Style sheets are linked by using tag in the head elements.It looks like this:

<link rel="stylesheet" href="style_sheetlink.css"/>

Adding javascript
Javascript is more about novel web applications.It is added as below:

<script src="script.js"></script>

Leave a Reply

Your email address will not be published. Required fields are marked *