Welcome to the World of Web. HTML Stands as the Skeleton of Web Design. Complete name of HTML is “Hypertext Markup Language”. Compare to a programming language C or C++ markup languages are easy and fun to learn. A programming language comes with Data Types, Loops, Conditional Statements or Object Oriented Programming features. While a markup language only required tags and its attributes to learn. To make your journey easier here we are presenting HTML tutorial for beginners.
The initial version of HTML was introduced on the year of 1993 by W3C (World Wide Web Consortium) & WHATWG (Web Hypertext Application Technology Working Group). HTML is the standard markup language to Create web pages. HTML is also used to Create user interface for Mobile applications. To Getting Started with HTML you required any text editor like Notepad or Notepad++.
Structure of a HTML page
Basic Structure of a HTML page is similar to a Human body. Top of the page comes with head. Then body and the end part is called footer. Look at the example below.
<!DOCTYPE html> <html> <head> <title>HTML Tutorial for beginners</title> </head> <body> <h2>Add Topic Heading here</h2> <p>Hello World!</p> </body> </html>
Here <!DOCTYPE html> is used to make the browser aware about that this is a HTML5 web page. Inside head tag I added title tag. Title tag is responsible to display which for this page is. Like title tag we can use meta tag under head tag. Meta speaks details of a web page. Generally there are various types of meta tags available in HTML but Commonly we use keywords, description or language meta tags. Body is the part where we do develop user interface. In the above example here inside my body tag I have heading tag and a paragraph tag.
Basic Rules to Develop a HTML page
1. In Client Browser to identify the page that this is a HTML5 document you required to declare <!DOCTYPE html> at the top of the page. This must be your first line while creating a HTML5 web page.
2. Title says about the headline of a story. Always make practice to add title tag in the head section of a HTML5 page. Title tag helps in Search Engine Optimization (SEO).
3. There are various meta tags. Few common used meta tags are Keyword and Description. Before deploy your application to production server make a habit to add keywords & description for page. Keep remember your description must not more than 160 words. Keywords can be comma separated strings. For better performace it is always wise to add not more than 5 to 6 keywords. Provide Character encoding meta tag to your HTML page. Ex. <meta charset=”UTF-8″>.
4. In HTML5 use the power of Semantic Elements. Structure page take less time to debug. Generally a HTML page Comes with 4 to 5 sections like Head, Body or Footer. Learn the adnvaced HTML5 Semantic elements and use them as required.
5. HTML is not a case sensitive language. <STRONG> is similar as <strong>. But it is a good practice to use lower case letters while developing HTML.
6. Never ever miss an end tag in HTML. It breaks hirarchy. There are two ways to end a HTML tag. For an example img tag can be end like “</img>” or “/>”. It is a good practice to choose “/>” in place of “</img”> end tag. But in the matter of a paragraph tag you must require “</p>”.
7. In a tag while defining an attribute always use lower case letters. For an Example replace <div CLASS=”tabview”> with <div class=”tabview”>.
8. While declaring attribute value use double quotes.
9. In production server always avoid in-line CSS. For an example it’s a bad practice to develop <div style=”float:left;” />. In this place you can add a class to the div and take your Styles to that Class.
10. Keep HTML5 document extension to “.html” in place of “.htm”.
11. Use language attribute with your html tag. Ex. <html lang=”en-us”>.
12. For Internet Explorer Compatibility mode use <meta http-equiv=”X-UA-Compatible” content=”IE=Edge”>.
13. While defining attributes to a HTML tag maintain the sequence order like class, id or name, data-*, src, type, href, for, value, title or alt, role & aria-*.
14. During you integrate CSS or JS file to your HTML5 document don’t include type=”text/css” or type=”text/javascript”. Modern browsers are too smart they can detect without the attributes.
Heading Tags (H1, H2, …, H6)
Generally H1 to H6 tag we used to display topic title or sub-titles of a HTML page. To instruct Search engines about your topic, heading tags are very helpful. H1 tag is more important heading tag then H6 tag. Never use heading tag to make texts bold or big.
Paragraph
In HTML <p> tag is used to define a Paragraph. Browser automatically add space to top and bottom of a paragraph. A paragraph starts with <p> and ends with </p>.
Line Break
In HTML to bring a new line we use <br />. While adding a new line tag use <br /> in place of only <br>.
Using CSS with HTML
There are 4 different ways to Apply CSS in a HTML document. These are In-line CSS, Embedded CSS, Linked CSS & Imported CSS.
Example of In-line CSS
<div style="font-size: 14px; color: #FF0000;">This is in Red Color</p>
Example of Embedded CSS
<style type="text/css">
h2 {
font-size: 14px;
color: #2d2d00;
font-weight: 600;
}
</style>
Example of Linked CSS
<link rel="stylesheet" href="custom/custom.css" type="text/css" media="screen, projection" />
Example of Imported CSS
@import url('/css/color.css');
HTML Text Formatting Tags
<strong> – Use to defines bold or important labels.
<em> – Defines emphasized text.
<i> – Defines italic text.
<sub> – Defines subscripted text.
<sup> – Defines superscripted text.
<ins> – This tag we use to insert text in to a pre-defined paragraph.
<del> – Del is used to delete text from a pre-defiend paragraph.
How to Comment in HTML?
The following Syntax we use to Comment in HTML.
<!– Your Comments goes here –>
HTML Link
In HTML we use anchor tag to place a link. A link helps to redirect user from one page to other HTML page. Syntax to Create a link is as below.
<a href="http://www.example.com" target="_blank" rel="nofollow">Link text goes here</a>
While Creating a link using target=”_blank” we can instruct the browser to open that link in a new window.
HTML Image
While designing a web page image plays great role. In HTML we use <img> tag to place images. Image tag supports all types of images such as jpeg, png or gif. The following syntax we use to add an image using image tag.
<img src="http://example.com/logo.png" alt="Logo" title="Logo" />
In image tag src attribute helps to define the image path. Image path can be absolute or an url too. For better performance in image tag it is a good practice to use alt and title attributes. These attributes give defination to an image.
HTML Table
In a web page generally we use table to display data in a structural way. A table comes with rows and columns. In HTML to create a table we use the following syntax.
<table> <td> <tr>First Row of First Column</tr> <tr>Second Row of First Column</tr> <tr>Third Row of First Column</tr> </td> <td> <tr>First Row of Second Column </tr> <tr>Second Row of Second Column </tr> <tr>Third Row of Second Column</tr> </td> </table>
The above table is with 2 columns and 3 rows.
Frequently used of HTML Tags
Compare to older versions of HTML, HTML5 is rich with many new features. To design a web page more better HTML5 is enrich with advanced Structural Elements & Form elements. Some of them are as below.
<header> – While Designing a HTML file header tag helps to define page header in a separate block.
<main> – In a HTML document main is the area in between header & footer. Main tag in HTML5 helps to design better structure of a HTML document.
<footer> – In a web page HTML footer tag helps to define page footer in a separate block.
<nav> – Nav element in HTML5 helps to define navigation links under a single tab.
<progress> – Progress tab act like an indication. If some job running in background using this control we can show how much work is in progress.
<mark> – Mark tag in HTML5 helps to Highlight text easily.
<meter> – Meter tag in HTML5 help to present scalar measurement within a known range.
<dialog> – Using dialog tag we can show popup like window in HTML5. Dialog tag supports Chrome version 37+, Safari 6+ & Opera 24+.
<article> – article tag defines an Article in the document. Using article tag we can categorized content area in a HTML file.
<aside> – aside tag defines content aside from body content.
<bdi> – bdi tag helps to identify text that might be formatted in a different direction from normal text.
<time> – time tag helps to specify date & time part in a HTML file.
<section> – To identify a particular section in a HTML document section tag is useful.
<wbr> – Defines a possible line-break.
<audio> – Using audio tag in HTML5 we can define music.
<video> – Using video tag in HTML5 we can define movie.
<embed> – embed tag act like a plugin. Using embed tag we can integrate external application to HTML5 document.
<source> – source tag helps to declare file path for audio or video elements.
<track> – Defines tracks for video & audio.
<canvas> – Canvas is a new HTML5 element to draw Graphics using Client Script. Read more about HTML5 Canvas.
<svg> – HTML5 Supports SVG. svg tag helps to draw graphics using SVG.
Do you like this Story about HTML Tutorial for beginners? Share us.
