What is HTML
HTML stands for Hyper Text Markup Language, which is the most used language for developing the web pages.
HTML was created by Berners-Lee in late 1991 but “HTML 2.0” was the first standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999. Now we are having HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.
Hello World Program:
<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>
</body>
</html>
Basic HTML Tags
HTML is a markup language and makes use of various tags to format the content. All HTML tags are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their corresponding closing tags. For example <html> has its closing tag </html> and <body> tag has its closing tag </body> tag etc.
Above example of HTML document uses following HTML tags and their usages:
This tag defines the document type and HTML version.
This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>…</head> and document body which is represented by <body>…</body> tags.
This tag represents the document’s header which can keep other HTML tags like <title>, <link> etc.
The <title> tag is used inside the <head> tag to mention the document title.
This tag represents the document’s body which keeps other HTML tags like <h1>, <div>, <p> etc.
This tag represents the heading.
This tag represents a paragraph.
World Wide Web Consortium (W3C) recommends to use lowercase tags starting from HTML 4. if you want to more about HTML Tags pls click w3schools html tags
HTML Structure
Here is a typical HTML basic structure and how to us html structure tags.
HTML Tag Structure
<html>
<head>
header related tags
</head>
<body>
body related tags
</body>
</html>
The Declaration
The <!DOCTYPE> declaration HTML Tags is used by the web browser to understand the version of the HTML used in the document. Current version of HTML5 and it makes use of the following declaration:
<!DOCTYPE html>
Heading Tags
Any Description starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. <h1> tag is large size and <h6> is small size.
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
This will produce following result:
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tags.
<!DOCTYPE html>
<html>
<head>
<title>Paragraph tag Example</title>
</head>
<body>
<p>This is a first paragraph of text.</p>
<p>This is a second paragraph of text.</p>
</body>
</html>
This will produce following result:
Here is a first paragraph of text.
Here is a second paragraph of text.
Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next line.
<!DOCTYPE html>
<html>
<head>
<title>Line Break tag Example</title>
</head>
<body>
<p>Hello<br/>
You delivered your assignment ontime Thanks<br/>
Mahnaz</p>
</body>
</html>
This will produce following result:
Hello
You delivered your assignment ontime Thank
Mahnaz
Â
Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
This will produce following result:
This text is not in the center.
                             This text is in the center.
Horizontal Lines
Horizontal lines are used to visually break up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr/>
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
This will produce following result:
This is paragraph one and should be on top
Preserve Formatting
Sometimes you want your text to follow the exact format of how it is written in the HTML document. In those cases, you can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document.
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
functiontestFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
This will produce following result:
functiontestFunction( strText ){
alert (strText)
}
No breaking Spaces
Suppose you want to use the phrase “10Jan 2000.” Here you would not want a browser to split the “10,Jan” and “2000” across two lines:
An example of this technique appears in the movie “10 Jan 2000.”
In cases where you do not want the client browser to break text, you should use a nonbreaking space entity  instead of a normal space.
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie “12 Angry Men.”</p>
</body>
</html>
HTML Element Tags
An HTML element Tags is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash as shown below with few tags:
Start Tag
<p>
<h1>
<div>
Content
This is paragraph content.
This is heading content.
This is division content.
End Tag
</p>
</h1>
</div>
So here <p>….</p> is an HTML element, <h1>…</h1> is another HTML element. There are some HTML elements which don’t need to be closed, such as <img…/>, <hr /> and <br /> elements. These are known as void elements.
Nested HTML Elements
It is very much allowed to keep one HTML element inside another HTML element:
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>
This will display following result:
This is italic heading
This is underlined paragraph
HTML Attributes
An attribute is used to define the characteristics of an HTML element and is placed inside the element’s opening tag. All attributes are made up of two parts: a name and a value:
- The nameis the property you want to set. For example, the paragraph <p> element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page.
- The valueis what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right.
Attribute names and attribute values are case-insensitive.
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<palign=”left”>This is left aligned</p>
<palign=”center”>This is center aligned</p>
<palign=”right”>This is right aligned</p>
</body>
</html>
This will display following result:
This is left aligned
                          This is center aligned
                                                                    This is right aligned
Core Attributes
The four core attributes that can be used on the majority of HTML elements (although not all) are:
- id
- title
- class
- style
The id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary reasons that you might want to use an id attribute on an element:
- If an element carries an id attribute as a unique identifier it is possible to identify just that element and its content.
- If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name.
<p id=”html”>This para explains what is HTML</p>
<p id=”CSS”>This para explains what is Cascading Style Sheet</p>
The Title Attribute
The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute:
The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element.
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3title=”Hello HTML!”>Titled Heading Tag Example</h3>
</body>
</html>
This will produce following result:
Titled Heading Tag Example
Now try to bring your cursor over “Titled Heading Tag Example” and you will see that whatever title you used in your code is coming out as a tooltip of the cursor.
The class Attribute
The class attribute is used to associate an element with a style sheet, and specifies the class of element. You will learn more about the use of the class attribute when you will learn Cascading Style Sheet (CSS). So for now you can avoid it.
The value of the attribute may also be a space-separated list of class names. For example:
class=”className1 className2 className3″
The style Attribute
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<pstyle=”font-family:arial; color:#FF0000;”>Some text…</p>
</body>
</html>
Â
This will produce following result:
Some text…
At this point of time, we are not learning CSS, so just let’s proceed without bothering much about CSS. Here you need to understand what are HTML attributes and how they can be used while formatting content.
Internationalization Attributes
There are three internationalization attributes, which are available for most (although not all) XHTML elements.
- dir
- lang
The dir Attribute
The dir attribute allows you to indicate to the browser the direction in which the text should flow. The dir attribute can take one of two values, as you can see in the table that follows:
Value
ltr
rtl
Meaning
Left to right (the default value)
Right to left
<!DOCTYPE html>
<htmldir=”rtl”>
<head>
<title>Display Directions</title>
</head>
<body>
This is how renders right-to-left directed text.
</body>
</html>
This will produce following result:
                                   This is how renders right-to-left directed text.
When dir attribute is used within the <html> tag, it determines how text will be presented within the entire document. When used within another tag, it controls the text’s direction for just the content of that tag.
The lang Attribute
The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only for backwards compatibility with earlier versions of HTML.
The values of the lang attribute are ISO-639 standard two-character language codes. Check HTML Language Codes: ISO 639 for a complete list of language codes.
<!DOCTYPE html>
<htmllang=”en”>
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>
Generic Attributes
Here’s a table of some other attributes that are readily usable with many of the HTML tags
Attribute
align
valign
bgcolor
background
id
class
width
height
title
Options
right, left, center
top, middle, bottom
numeric, hexidecimal, RGB values
URL
User Defined
User Defined
Numeric Value
Numeric Value
User Defined
Function
Horizontally aligns tags
Vertically aligns tags within an HTML element.
Places a background color behind an element
Places a background image behind an element
Names an element for use with Cascading Style Sheets.
Classifies an element for use with Cascading Style Sheets.
Specifies the width of tables, images, or table cells.
Specifies the height of tables, images, or table cells.
“Pop-up” title of the elements.
HTML Formatting
If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML.
Bold Text
Anything that appears within <b>…</b> element, is displayed in bold as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
This will produce following result:
The following word uses a bold typeface.
Italic Text
Anything that appears within <i>…</i> element is displayed in italicized as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>
This will produce following result:
The following word uses a italicized typeface.
Underlined Text
Anything that appears within <u>…</u> element, is displayed with underline as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>
This will produce following result:
The following word uses a underlined typeface.
Strike Text
Anything that appears within <strike>…</strike> element is displayed with strikethrough, which is a thin line through the text as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
This will produce following result:
The following word uses a strikethrough typeface.
Superscript Text
The content of a <sup>…</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character’s height above the other characters.
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>
This will produce following result:
The following word uses a superscript typeface.
Subscript Text
The content of a <sub>…</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character’s height beneath the other characters.
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>
This will produce following result:
The following word uses a subscript typeface.
Inserted Text
Anything that appears within <ins>…</ins> element is displayed as inserted text.
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del><ins>wine</ins></p>
</body>
</html>
This will produce following result:
I want to drink  wine
Deleted Text
Anything that appears within <del>…</del> element, is displayed as deleted text.
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del><ins>wine</ins></p>
</body>
</html>
This will produce following result:
I want to drink  wine
Larger Text
The content of the <big>…</big> element is displayed one font size larger than the rest of the text surrounding it as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>
This will produce following result:
The following word uses a big typeface.
Smaller Text
The content of the <small>…</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>
This will produce following result:
The following word uses a small typeface.
Grouping Content
The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page.
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<divid=”menu”align=”middle”>
<ahref=”/index.htm”>HOME</a> |
<ahref=”/about/contact_us.htm”>CONTACT</a> |
<ahref=”/about/index.htm”>ABOUT</a>
</div>
<divid=”content”align=”left”bgcolor=”white”>
<h5>Content Articles</h5>
<p>Actual content goes here…..</p>
</div>
</body>
</html>
This will produce following result:
CONTENT ARTICLES
Actual content goes here…..
The <span> element, on the other hand, can be used to group inline elements only. So, if you have a part of a sentence or paragraph which you want to group together, you could use the <span> element as follows
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <spanstyle=”color:green”>span tag</span> and the <spanstyle=”color:red”>div tag</span>alongwith CSS</p>
</body>
</html>
This will produce following result:
This is the example of span tag and the div tag alongwith CSS
These tags are commonly used with CSS.
HTML Phrase Tags
The phrase tags have been designed for specific purposes, though they are displayed in a similar way as other basic tags like <b>, <i>, <pre>, and <tt>..
Emphasized Text
Anything that appears within <em>…</em> element is displayed as emphasized text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
</html>
This will produce following result:
The following word uses a emphasized typeface.
Emphasized Text
Anything that appears within <em>…</em> element is displayed as emphasized text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
</html>
This will produce following result:
The following word uses a emphasized typeface.
Marked Text
Anything that appears with-in <mark>…</mark> element, is displayed as marked with yellow ink.
Â
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>
This will produce following result:
The following word has been marked with yellow.
Strong Text
Anything that appears within <strong>…</strong> element is displayed as important text.
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>
This will produce following result:
The following word uses a strong typeface.
Text Abbreviation
You can abbreviate a text by putting it inside opening <abbr> and closing </abbr> tags. If present, the title attribute must contain this full description and nothing else.
<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend’s name is <abbrtitle=”Abhishek”>Abhy</abbr>.</p>
</body>
</html>
This will produce following result:
My best friend’s name is Abhy.
Quoting Text
When you want to quote a passage from another source, you should put it in between <blockquote>…</blockquote> tags.
Text inside a <blockquote> element is usually indented from the left and right edges of the surrounding text, and sometimes uses an italicized font.
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>The following description of XHTML is taken from the W3C Web site:</p>
Â
<blockquote>XHTML 1.0 is the W3C’s first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>
This will produce following result:
The following description of XHTML is taken from the W3C Web site:
XHTML 1.0 is the W3C’s first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.
Short Quotations
The <q>…</q> element is used when you want to add a double quote within a sentence.
<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>
</html>
This will produce following result:
Amit is in Spain, I think I am wrong.
Keyboard Text
When you are talking about computers, if you want to tell a reader to enter some text, you can use the <kbd>…</kbd> element to indicate what should be typed in, as in this example.
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
</body>
</html>
This will produce following result:
Regular text. This is inside kbd element Regular text.
Samp Tag
The <samp>…</samp> element indicates sample output from a program, and script etc. Again, it is mainly used when documenting programming or coding concepts.
<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>
</html>
This will produce following result:
Result produced by the program is Hello World!
Address Text
The <address>…</address> element is used to contain any address.
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills –Â Hyderabad</address>
</body>
</html>
This will produce following result:
312A, Road No 22, Swindon Park – Swindon
HTML Comments
Comment is a piece of code which is ignored by any web browser. It is a good practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. Comments help you and others understand your code and increases code readability.
HTML comments are placed in between <!– … –> tags. So any content placed with-in <!– … –> tags will be treated as comment and will be completely ignored by the browser.
<!DOCTYPE html>
<html>
<head><!– Document Header Starts –>
<title>This is document title</title>
</head><!– Document Header Ends –>
<body>
<p>Document content goes here…..</p>
</body>
</html>
This will produce following result without displaying the content given as a part of comments:
Document content goes here…..
Valid vs Invalid Comments
Comments do not nest which means a comment cannot be put inside another comment. Second the double-dash sequence “–” may not appear inside a comment except as part of the closing –> tag. You must also make sure that there are no spaces in the start-of-comment string.
Here given comment is a valid comment and will be wiped off by the browser.
<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!–Â Â This is valid comment –>
<p>Document content goes here…..</p>
</body>
</html>
But following line is not a valid comment and will be displayed by the browser. This is because there is a space between the left angle bracket and the exclamation mark.
<!DOCTYPE html>
<html>
<head>
<title>Invalid Comment Example</title>
</head>
<body>
< !–Â Â This is not a valid comment –>
<p>Document content goes here…..</p>
</body>
</html>
This will produce following result:
< !– This is not a valid comment –>
Document content goes here…..
Multiline Comments
So far we have seen single line comments, but HTML supports multi-line comments as well.
You can comment multiple lines by the special beginning tag <!– and ending tag –> placed before the first line and end of the last line as shown in the given example below.
<!DOCTYPE html><html>
<head>
<title>Multiline Comments</title>
</head>
<body>
<!–Â Â
This is a multiline comment and it can
span through as many as lines you like.
–>
<p>Document content goes here…..</p>
</body>
</html>
This will produce following result:
Document content goes here…..
HTML Images
Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. This tutorial will take you through simple steps to use images in your web pages.
Insert Image
You can insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag.
<imgsrc=”Image URL” … attributes-list/>
The <img> tag is an empty tag, which means that it can contain only list of attributes and it has no closing tag.
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<imgsrc=”images/logo.png”alt=”Test Image”/>
</body>
</html>
You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify correct image file name in src attribute. Image name is always case sensitive.
The alt attribute is a not mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed.
Set Image Width/Height
You can set image width and height based on your requirement using widthand height attributes. You can specify width and height of the image in terms of either pixels or percentage of its actual size.
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<imgsrc=”/html/images/test.png”alt=”Test Image”width=”150″height=”100″/>
</body>
</html>
Setting image width and height
Set Image Border
By default image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture.
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<imgsrc=”/html/images/test.png”alt=”Test Image”border=”3″/>
</body>
</html>
To know more about HTML please click w3schools html
Practice HTML online pls click html w3
Please click How To Become a Better professional With HTML part 1
