Tuesday, August 25, 2015

HTML 5 - A Quick Reference

Get a Quick Reference of HTML5

1.) Are you new to Web design?
2.) Are you a beginner to HTML5? 
3.) Are you willing to create new webpage on your own?

If your answer is YES, then this article is surely going to help you a lot. Today, with this blog post, we are going to talk about HTML5 for beginners, where we will define what HTML is and how it evolved from HTML to HTML5, why you should learn it, what you require for learning HTML5, and much more.

Let us begin now.

What is HTML5?

HTML is an abbreviated form of Hypertext Markup Language, which is used to build web pages that, informs a web browser to visually represent its elements, such as text and images with a set of codes and symbols. Moreover, HTML is the W3C (World Wide Web) recommended standard for creating websites. Tim Berners-Lee, the founder of HTML, introduced the HTML to the world in 1990.


Since 1990 HTML have go through a lot of modifications and improvements based on the suggestions from a wide group of web designers and developers to overcome the difficulties they face while making interactive websites. After the initial recommendation of HTML, it came in new versions such as HTML 2.0 in 1995, HTML 3.2 in 1997, HTML 4.0 in 1997, and HTML 4.01 in 1999, which is then followed by the latest HTML5.

Why to learn HTML?

Many people asks that why we need to learn HTML, when there are pre-designed templates are readily available such as wordpress,etc. It is good question. Not all the readily available website templates are bug free. If you need to customise or edit or alter the webpage, you need to know HTML and CSS. If you learn how HTML works and how to code in HTML, and once you are skilled in HTML, you can easily view the source code and make the customization correctly. But remember only if you are well skilled in HTML.



What is needed for learning HTML?

1.) HTML Editor- Notepad, Notepad++, Adobe Dreamweaver,etc..
2.) Browser - Chrome, Firefox, Internet Explorer, etc..
3.) Little bit of interest in learning and patience.

HTML5 :

There are 2 things to need to know before start learning HTML5.
       a.) The basic HTML5 tags and elements.
       b.) The structure of an HTML5 webpage.
       c.) Cascading Style sheet (CSS).


Basic HTML5 Tags:

As HTML is a markup language it consists of various tags and elements. Tags are generally used in pairs, namely; an opening tag and a closing tag. An opening tag signifies that the browser should render the content placed after it by using all of its given properties, and a closing tag informs the browser about the end of that particular tag.

For example, the opening <html> tag defines the starting point of an HTML page, and its closing </html> tag defines that the HTML content ends here. These tags help browsers to understand what to display, when to display, and what not to display.


Apart from the above mentioned two tags, there are some tags which we call as the self closing tags. Additionally there are some empty HTML elements, which are used without content. For example; the <br> tag is used for single line break, and no content is placed for this tag. Above HTML tags are called as stand alone tags.

These are the commonly used and newly introduced HTML5 tags. 

TAGS
HTML5 NEW ELEMENTS
<!DOCTYPE HTML>
<HEADER>
<HTML>
<HGROUP>
<HEAD>
<NAV>
<TITLE>
<ASIDE>
<BODY>
<FIGURE>
<DIV>
<SECTION>
<P>
<ARTICLE>
<SPAN>
<FOOTER>
<H1>
<AUDIO>
<IMG>
<VIDEO>
<UL>

<OL>

<LI>

<TABLE>

<TR>

<TD>

<IMG>

<BR>

<HR>

<FORM>

<INPUT>

<SELECT>

<OPTION>

<TEXTAREA>

<!-- -->


Basic Structure of HTML:

<HTML>
<HEAD>
<TITLE> Introduction to HTML</TITLE>
</HEAD>
<BODY>
<H1>HELLO WORLD!</H1>
<P> Introduction to HTML</P>
</BODY>
</HTML>

Output:



 HELLO WORLD!

 Introduction to HTML



Basic Structure of HTML5:


<HTML>
<HEAD>
<TITLE> Introduction to HTML5</TITLE>
</HEAD>
<BODY>
<HEADER>
   <H1>LOGO</H1>
</HEADER>
<DIV>
 <ASIDE> SIDE BAR </ASIDE>
  <SECTION>
<ARTICLE> MAIN CONTENT</ARTICLE>
        <ARTICLE> MAIN CONTENT</ARTICLE>
       <ARTICLE> MAIN CONTENT</ARTICLE>
  </SECTION>
<FOOTER>
   COPYRIGHTS INFO
</FOOTER>
</DIV>
</BODY>
</HTML>

Output:


HTML5 basic structure

These are the basic things to learn in HTML5. There are more elements to be learnt in HTML5 and those topics will be discussed in later posts.

Source: instructables

2 comments:

Thanks for your comments. It'll be published after admin's approval !