Top 10 HTML tags that everyone should know.

Programs must be written for people to read, and only incidentally for machines to execute. ”

– Abelson / Sussman

Welcome to the world of HTML. In recent times there are tons of opportunities in web development and to be a proficient web developer having a sound knowledge of HTML, CSS and JavaScript is essential. Continuing with the previous blog legacy on LINUX this blog focuses on basic HTML tags that everyone should know in order to create a simple webpage and eventually a website.

Prerequisite: You don’t need any previous knowledge of programming, this is for absolute beginners but anyone who has some working knowledge of HTML then this blog would be a great revision.

You will need: A text editor like Notepad++, Sublime Text 3, etc, a web browser that supports HTML5 like Google Chrome, Mozilla Firefox, IE, etc.

Basic HTML Document Structure:

Although various versions of HTML have been released but basics remains same. First open Notepad++ and save your first html file as FirstWebpage.html.

Note: Remember all html files are saved as .htm or .html

htmlsnip1

So this is the basic format of any html file where an html webpage begins with an opening and closing tag <html> </html>. Then comes the head tag <head> </head> which contains many other tags like <title> </title> which is used to create title written on the tab of your web browser. The body tag <body> </body> contains the content of your webpage like the information, pictures, videos, music, etc.

Note: In HTML5 before beginning with <html> tag it is necessary to add <!DOCTYPE html>

Top 10 HTML tags that everyone should know….

1)Paragraph and line break: To create a new paragraph use <p> </p> tag whereas if you want to start from a new line without starting a new paragraph then use <br/> only, it has no closing tag if observe closely.

htmlsnip3htmlsnip4

2)Text formatting tags: These tags help in formatting the special text of your content in variety of different ways possible like italic, bold, small and large text, etc.

htmlsnip5                                                                                   htmlsnip6

3)Header, navigation and footers: If you observe any website closely they have headers for large headings and company logo, a navigation section to browse through different web pages, articles and footers which contain information about copyrights, privacy policy, terms and conditions, etc.

4)Links: Links are integral part of any website. You can add link to text or image that will enable user to click on it and direct them to another webpage. The link tag is <a href=”about.html”>About us</a>. You can also add URL to any website in href that will open that website when clicked by user.

5)List: You can list your items in two ways in html. First is ordered list in which you can list down items with numbers like 1,2,3, etc. Or using alphabets a, b, c, d, etc. Second is unordered list in which it uses bullet marks.

htmlsnip7                                                                                 htmlsnip8

6)Horizontal line and comments: To create a horizontal line use <hr/> tag. You can add comments in your html file but these comments will not be displayed in your browser but it is for your own reference.Please see above HTML code for example.

7)Image: to add image to your webpage use <img src=”image.jpg”/> tag where you have to add image source in src. Here image.jpg is in the same file in which all html files are put. Notice that <img> has no closing tag. You can also change image size with height and width attributes and border with border attribute.

8)Background and text colour: You can add background colour to your webpage using bgcolor  tag and text colour with font tag having color attribute.

htmlsnip9                                                                            htmlsnip10

9)Audio: In HTML5 there are three formats of playing an audio file .mp3, .wav and .ogg format. You can use <audio> </audio> tag to add an audio player inside your webpage. Controls attribute specifies the audio controls that will be displayed such as play/pause button, etc.

10)Video: It is same as audio, by using <video> </video> tag you can add video. In source you can even add an URL to the video you want to display.

htmlsnip11

Now these were the basics of creating a webpage. To master web development this is not enough. You can search for more html5 features online and study them in detail. Some of the features are web storage and Geo-location API, creating tables and forms, drag and drop API, etc.

Thanks for reading and I hope this helps. For any query comment down bellow.

You can follow me on Google+ by clicking on the link below

www.google.com/+AkarshSinghOriginals

Written by Akarsh Singh 

     P_20151110_184408_BF

12 Comments on “Top 10 HTML tags that everyone should know.

  1. Hey very nice blog!! Man .. Excellent .. Amazing .. I will bookmark your site and take the feeds alsoI’m satisfied to find a lot of useful info right here within the post, we’d like develop extra strategies in this regard, thanks for sharing. dkbkggdkegdd

  2. Hahahahahahaha, this politics related YouTube video is really so comical, I loved it. Thanks in favor of sharing this. gfegadeeeeck

  3. obviously like your web-site however you have to check the spelling on quite a few of
    your posts. Many of them are rife with spelling issues and I find it very troublesome
    to inform the reality on the other hand I will definitely come back again.

  4. Hello! I understand this can be somewhat off
    topic nevertheless i was wondering when you
    knew where I really could find a captcha plugin for my
    comment form? I’m utilizing the same blog platform as yours and I’m having difficulty finding one?
    Thanks a whole lot!

Leave a Reply

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