Learn HTML Step by Step Guide for Free

About the Tutorial

HTML represents Hyper Text Markup Language, which is the most broadly utilized language on Web to foster site pages.

HTML was made by Berners-Lee in late 1991 yet "HTML 2.0" was the principal standard HTML particular which was distributed in 1995. HTML 4.01 was a significant rendition of HTML and it was distributed in late 1999. However HTML 4.01 form is generally utilized yet right now we are having HTML-5 adaptation which is an expansion to HTML 4.01, and this variant was distributed in 2012.

Requirements

Prior to continuing with this instructional exercise you ought to have an essential working information with Windows or Linux working framework, furthermore you should be acquainted with:

Ø Experience with any content manager like notebook, notepad++, or Edit in addition to and so on

Ø How to make catalogs and records on your PC.

Ø How to explore through various catalogs.

Ø How to type content in a record and save them on a PC.

Ø Understanding about pictures in various organizations like JPEG, PNG design.

HTML- OVERVIEW

HTML represents Hypertext Markup Language, and it is the most broadly utilized language to compose Web Pages.

Ø Hypertext alludes to the manner by which Web pages (HTML records) are connected together. In this way, the connection accessible on a site page is called Hypertext.

Ø As its name recommends, HTML is a Markup Language which implies you use HTML to just "increase" a book archive with labels that advise a Web program how to structure it to show.

Initially, HTML was created with the purpose of characterizing the design of reports like headings, passages, records, etc to work with the sharing of logical data between scientists.

Presently, HTML is as a rule broadly used to design site pages with the assistance of various labels accessible in HTML language.

Essential HTML Document

In its easiest structure, following is an illustration of a HTML report:

<!DOCTYPE html>

<html>

<head>

<title>This is document title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>Document content goes here.....</p>

</body>

</html>

Possibly you can utilize Try it choice accessible at the upper right corner of the code box to check the aftereffect of this HTML code, or how about we save it in a HTML record test.htm utilizing your number one content tool. At last open it utilizing an internet browser like Internet Explorer or Google Chrome, or Firefox and so on It should show the accompanying yield:

HTML- Tags

As told before, HTML is a markup language and utilizes different labels to design the substance. These labels are encased inside point supports <Tag Name>. But couple of labels, the vast majority of the labels have their comparing shutting labels. For instance <html> has its end tag</html> and <body> tag has its end tag </body> tag and so on.

Above illustration of HTML report utilizes the accompanying labels:

Tag	Description
<!DOCTYPE...>	This tag defines the document type and HTML version.
<html>	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.
<head>	This tag represents the document's header which can keep other HTML tags like <title>, <link> etc.
<title>	The <title> tag is used inside the <head> tag to mention the document title.
<body>	This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc.
<h1>	This tag represents the heading.
<p>	This tag represents a paragraph.

To learn HTML, you should examine different labels and see how they act, while designing a printed report. Learning HTML is basic as clients need to become familiar with the use of various labels to design the content or pictures to make an excellent page.

Internet Consortium (W3C) prescribes to utilize lowercase labels beginning from HTML 4.

HTML- Document Structure

An ordinary HTML report will have the accompanying construction:

Document declaration tag

<html>

<head>

Document header related tags

</head>

<body>

Document body related tags

</body>

</html>

We will concentrate all the header and body labels in ensuing parts, however until further notice we should perceive what is report presentation tag.

The <!DOCTYPE> Declaration

The <!DOCTYPE> assertion tag is utilized by the internet browser to comprehend the variant of the HTML utilized in the report. Current rendition of HTML is 5 and it utilizes the accompanying statement:

<!DOCTYPE html>

There are numerous other affirmation types which can be utilized in HTML archive contingent upon what form of HTML is being utilized. We will see more subtleties on this while talking about <!DOCTYPE...> follow alongside other HTML labels.

HTML- Basic Tags

Heading Tags

Any record begins with a heading. You can utilize various sizes for your headings. HTML likewise has six degrees of headings, which utilize the components <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While showing any heading, program adds one line previously and one line after that heading.

Model:

<!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 generate the following model:

Paragraph Tag

The <p> label offers an approach to structure your content into various passages. Each section of text ought to go in the middle of an opening <p> and an end </p> tag as displayed beneath in the model:

Example:

<!DOCTYPE html>

<html>

<head>

<title>Paragraph Example</title>

</head>

<body>

<p>Here is a first paragraph of text.</p>

<p>Here is a second paragraph of text.</p>

<p>Here is a third paragraph of text.</p>

</body>

</html>

This will generate the following model:

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

Line Break Tags

At whatever point you utilize the <br/> component, anything following it begins from the following line. This tag is an illustration of an unfilled component, where you needn't bother with opening and shutting labels, as there isn't anything to go in the middle of them. The <br/> tag has a space between the characters br and the forward slice. In the event that you overlook this space, more seasoned programs will experience difficulty delivering the line break, while in the event that you miss the forward slice character and simply use <br> it isn't substantial in XHTML.

This will generate the following model:

<!DOCTYPE html>

<html>

<head>

<title>Line Break Example</title>

</head>

<body>

<p>Hello<br />

You delivered your assignment on time.<br />

Thanks<br />

Subhajit</p>

</body>

</html>

This will generate the following model:

Hello You delivered your assignment on time.

Thanks Subhajit

Centering Content

You can utilize <center> tag to place any substance in the focal point 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>

<p>This text is in the center.</p>

</center>

</body>

</html>

This will generate the following model:

This text is not in the center.

This text is in the center.

Horizontal Lines

Horizontal lines are utilized to outwardly separation segments of a record. The <hr> tag makes a line from the current situation in the archive to the right edge and breaks the line as needs be.

For instance, you might need to give a line between two sections as in the given model beneath:

Example:

<!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 generate the following model:

This is paragraph one and should be on top

This is paragraph two and should be at bottom

Again <hr/> tag is an illustration of the unfilled component, where you needn't bother with opening and shutting labels, as there isn't anything to go in the middle of them.

The <hr/> component has a space between the characters hr and the forward cut. On the off chance that you exclude this space, more seasoned programs will experience difficulty delivering the even line, while in the event that you miss the forward slice character and simply use <hr> it isn't legitimate in XHTML

Preserve Formatting

Now and then, you need your content to follow the specific organization of how it is written in the HTML record. In these cases, you can utilize the preformatted tag <pre>.

Any content between the opening <pre> tag and the end </pre> label will save the organizing of the source record.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Preserve Formatting Example</title>

</head>

<body>

<pre>

function testFunction( strText ){

alert (strText)

}

</pre>

</body>

</html>

This will generate the following model:

function testFunction( strText ){

alert (strText)

}

Have a go at utilizing a similar code without keeping it inside <pre>...</pre> labels

Nonbreaking Spaces

Assume you need to utilize the expression "10 Happy Birds." Here, you would not need a program to part the "10, Happy" and "Birds" across two lines:

An example of this technique appears in the movie "10 Happy Birds."

In cases, where you don't need the customer program to break text, you should utilize a nonbreaking space element   rather than an ordinary space. For instance, when coding the "10 Happy Birds" in a section, you should utilize something almost identical to the accompanying code:

<!DOCTYPE html>

<html>

<head>

<title>Nonbreaking Spaces Example</title>

</head>

<body>

<p>An example of this technique appears in the movie "10 Happy Birds."</p>

</body>

</html>

HTML- ELEMENTS

A HTML component is characterized by a beginning tag. In the event that the component contains other substance, it closes with an end tag, where the component name is gone before by a forward cut as displayed underneath with few labels:

Start Tag	Content	End Tag
<p>	This is paragraph content.	</p>
<h1>	This is heading content.	</h1>
<div>	This is division content.	</div>
<br />

So here <p>....</p> is a HTML component, <h1>...</h1> is another HTML component. There are some HTML components which don't should be shut, for example, <img.../>, <hr/> and <br/> components. These are known as void components.

HTML archives comprises of a tree of these components and they indicate how HTML records ought to be constructed, and what sort of content ought to be put in which piece of a HTML report.

HTML Tag vs. Element

A HTML component is characterized by a beginning tag. On the off chance that the component contains other substance, it closes with an end tag.

For instance, <p> is beginning tag of a section and </p> is shutting tag of a similar passage however <p>This is paragraph</p> is a passage component.

Nested HTML Elements

It is especially permitted to keep one HTML component inside another HTML component:

Example:

<!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 generate the following model:

This is italic heading

This is underlined paragraph

HTML – Attributes

We have seen not many HTML labels and their utilization like heading labels <h1>, <h2>, passage tag <p> and different labels. We utilized them so far in their least difficult structure, however the majority of the HTML labels can likewise have ascribes, which are additional pieces of data.

A quality is utilized to characterize the attributes of a HTML component and is set inside the component's initial tag. All ascribes are comprised of two sections: a name and a worth:

Ø The name is the property you need to set. For instance, the passage <p> component in the model conveys a quality whose name is adjust, which you can use to show the arrangement of section on the page.

Ø The worth is the thing that you need the worth of the property to be set and consistently put inside citations. The underneath model shows three potential upsides of adjust characteristic: left, focus and right.

Property names and trait esteems are case-unfeeling. Notwithstanding, the World Wide Web Consortium (W3C) suggests lowercase credits/trait esteems in their HTML 4 proposal.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Align Attribute Example</title>

</head>

<body>

<p align="left">This is left aligned</p>

<p align="center">This is center aligned</p>

<p align="right">This is right aligned</p>

</body>

</html>

This will generate the following model:

This is left aligned

This is centre aligned

This is right aligned

Core Attributes

The four center attributes that can be utilized on most of HTML components (albeit not all) are:

Ø > Id

Ø > Title

Ø > Class

Ø > Style

The Id Attribute

The id attribute of a HTML tag can be utilized to particularly distinguish any component inside a HTML page. There are two essential reasons that you should utilize an id attribute on a component:

Ø If a component conveys an id attribute as a remarkable identifier, it is feasible to distinguish only that component and its substance.

Ø If you have two components of a similar name inside a Web page (or template), you can utilize the id attribute to recognize components that have a similar name.

We will talk about template in discrete instructional exercise. Until further notice, we should utilize the id attribute to recognize two passage components as displayed beneath.

Example:

<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 recommended title for the component. They linguistic structure for the title attribute is comparable as clarified for id attribute:

The conduct of this attribute will rely on the component that conveys it, in spite of the fact that it is normal shown as a tooltip when cursor comes over the component or while the component is stacking.

Example:

<!DOCTYPE html>

<html>

<head>

<title>The title Attribute Example</title>

</head>

<body>

<h3 title="Hello HTML!">Titled Heading Tag Example</h3>

</body>

</html>

This will generate the following model:

Titled Heading Tag Example

Presently attempt to bring your cursor over "Titled Heading Tag Example" and you will see that whatever title you utilized in your code is coming out as a tooltip of the cursor.

The class Attribute

The class attribute is utilized to connect a component with a template, and indicates the class of component. You will study the utilization of the class attribute when you will pick up Cascading Style Sheet (CSS). So for the time being you can stay away from it.

The worth of the property may likewise be a space-isolated rundown of class names. For instance:

class="className1 className2 className3"

The style Attribute

The style attribute permits you to indicate Cascading Style Sheet (CSS) rules inside the component.

<!DOCTYPE html>

<html>

<head>

<title>The style Attribute</title>

</head>

<body>

</body>

</html>

This will generate the following model:

Some text...

Now of time, we are not learning CSS, so we should continue without pestering much about CSS. Here, you need to get what are HTML attributes and how they can be utilized while designing substance.

Internationalization Attributes

There are three internationalization attributes, which are accessible for most (albeit not all) XHTML components.

Ø > dir

Ø > lang

Ø > xml:lang

The dir Attribute

The dir attribute permits you to demonstrate to the program about the bearing in which the content should stream. The dir attribute can take one of two values, as you can find in the table that follows:

Value	Meaning
ltr	Left to right (the default value)
rtl	Right to left (for languages such as Hebrew or Arabic that are read right to left)

Example:

<!DOCTYPE html>

<head>

<title>Display Directions</title>

</head>

<body>

This is how IE 5 renders right-to-left directed text.

</body>

</html>

This will generate the following model:

This is how IE 5 renders right-to-left directed text.

When dir attribute is utilized inside the <html> tag, it decides how text will be introduced inside the whole record. When utilized inside another tag, it controls the content's bearing for simply the substance of that tag.

The lang Attribute

The lang attribute permits you to demonstrate the primary language utilized in an archive, however this attribute was kept in HTML just for in reverse similarity with prior variants of HTML. This attribute has been supplanted by the xml:lang attribute in new XHTML records.

Example:

<!DOCTYPE html>

<head>

<title>English Language Page</title>

</head>

<body>

This page is using English Language

</body>

</html>

The xml:lang Attribute

The xml:lang attribute is the XHTML trade for the lang attribute. The worth of thexml:lang attribute ought to be an ISO-639 nation code as referenced in past area.

Generic Attributes

Here's a table of some different attributes that are promptly usable with a large number of the HTML labels.

Attribute	Options	Function
align	right, left, center	Horizontally aligns tags
valign	top, middle, bottom	Vertically aligns tags within an HTML element.
bgcolor	numeric, hexidecimal, RGB values	Places a background color behind an element
background	URL	Places a background image behind an element
id	User Defined	Names an element for use with Cascading Style Sheets.
class	User Defined	Classifies an element for use with Cascading Style Sheets.
width	Numeric Value	Specifies the width of tables, images, or table cells.
height	Numeric Value	Specifies the height of tables, images, or table cells.
title	User Defined	"Pop-up" title of the elements.

HTML- Formatting

On the off chance that you utilize a word processor, you should be acquainted with the capacity to make text intense, emphasized, or underlined; these are only three of the ten alternatives accessible to show how text can show up in HTML and XHTML.

Bold Text

Whatever shows up inside <b>...</b> component, is shown in strong as displayed underneath:

Example:

<!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 generate the following model:

The following word uses a bold typeface.

Italic Text

Whatever shows up inside <i>...</i> component is shown in stressed as displayed underneath:

Example:

<!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 generate the following model:

The following word uses an italicized typeface.

Underlined Text

Whatever shows up inside <u>...</u> component is shown in stressed as displayed underneath:

Example:

<!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 generate the following model:

The following word uses an underlined typeface.

Strike Text

Whatever shows up inside <strike>...</strike> component is shown with strikethrough, which is a flimsy line through the content as displayed underneath:

<!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 generate the following model:

The following word uses a strikethrough typeface.

Monospaced Font

The substance of a <tt>...</tt> component is written in monospaced text style. A large portion of the text styles are known as factor width text styles on the grounds that various letters are of various widths (for instance, the letter 'm' is more extensive than the letter 'I'). In a monospaced text style, notwithstanding, each letter has a similar width.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Monospaced Font Example</title>

</head>

<body>

<p>The following word uses a <tt>monospaced</tt> typeface.</p>

</body>

</html>

This will generate the following model:

The following word uses a monospaced typeface.

Superscript Text

The substance of a <sup>...</sup> component is written in superscript; the text dimension utilized is similar size as the characters encompassing it however is shown a large portion of a person's stature over different characters.

Example:

<!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 generate the following model:

The following word uses a superscript typeface.

Subscript Text

The substance of a <sub>...</sub> component is written in addendum; the text dimension utilized is equivalent to the characters encompassing it, however is shown a large portion of a person's tallness underneath different characters.

Example:

<!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 generate the following model:

The following word uses a subscript typeface.

Inserted Text

Whatever shows up inside <ins>...</ins> component is shown as embedded content.

Example:

<!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 generate the following model:

Deleted Text

Whatever shows up inside <del>...</del> component, is shown as Deleted text.

Example:

<!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 generate the following model:

Larger Text

The substance of the <big>...</big> component is shown one text dimension bigger than the remainder of the content encompassing it as displayed beneath:

Example:

<!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 generate the following model:

The following word uses a big typeface.

Smaller Text

The substance of the <small>...</small> component is shown one text dimension more modest than the remainder of the content encompassing it as displayed beneath:

Example:

<!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 generate the following model:

The following word uses a small typeface.

Grouping Content

The <div> and <span> components permit you to assemble a few components to make segments or subsections of a page.

For instance, you should put the entirety of the commentaries on a page inside a <div> component to show that the entirety of the components inside that <div> component identify with the references. You may then join a style to this <div> component with the goal that they seem utilizing a unique arrangement of style rules.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Div Tag Example</title>

</head>

<body>

<a href="/index.htm">HOME</a> |

<a href="/about/contact_us.htm">CONTACT</a> |

<a href="/about/index.htm">ABOUT</a>

</div>

<h5>Content Articles</h5>

<p>Actual content goes here.....</p>

</div>

</body>

</html>

This will generate the following model:

HOME | CONTACT | ABOUT

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

Example:

<!DOCTYPE html>

<html>

<head>

<title>Span Tag Example</title>

</head>

<body>

<p>This is the example of <span style="color:green">span tag</span> and the <span style="color:red">div tag</span> alongwith CSS</p>

</body>

</html>

This will generate the following model:

This is the example of span tag and the div tag along with CSS

These tags are regularly utilized with CSS to permit you to connect a style to a segment of a page.

HTML- Phrase Tags

The phrase tags have been desicolgned for explicit purposes, however they are shown along these lines as other essential tags like <b>, <i>, <pre>, and <tt>, you have seen in past section. This part will take you through all the significant phrase tags, so how about we begin seeing them individually.

Emphasized Text

Whatever shows up inside <em>...</em> component is shown 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 generate the following model:

The following word uses an emphasized typeface.

Marked Text

Whatever shows up with-in <mark>...</mark> component, is shown as set apart with yellow ink.

Example:

<!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 generate the following model:

The following word has been marked with yellow.

Strong Text

Whatever shows up inside <strong>...</strong> component is shown as significant content.

Example:

<!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 generate the following model:

The following word uses a strong typeface.

Text Abbreviation

You can shorten a book by putting it inside opening <abbr> and shutting </abbr> labels. On the off chance that present, the title property should contain this full portrayal and that's it.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Text Abbreviation</title>

</head>

<body>

<p>My best friend's name is <abbr title="Ratan">Gabbar</abbr>.</p>

</body>

</html>

This will generate the following model:

My best friend's name is Gabbar.

Acronym Element

The <acronym> component permits you to demonstrate that the content among <acronym> and </acronym> tags is an acronym.

As of now, the significant programs don't change the presence of the substance of the <acronym> component.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Acronym Example</title>

</head>

<body>

<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>

</body>

</html>

This will generate the following model:

This chapter covers marking up text in XHTML.

Text Direction

The <bdo>...</bdo> component represents Bi-Directional Override and it is utilized to supersede the current content course.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Text Direction Example</title>

</head>

<body>

<p>This text will go left to right.</p>

<p><bdo dir="rtl">This text will go right to left.</bdo></p>

</body>

</html>

This will generate the following model:

This text will go left to right.

This text will go right to left.

Special Terms

The <dfn>...</dfn> component (or HTML Definition Element) permits you to indicate that you are presenting an uncommon term. It's utilization is like italic words amidst a passage.

Regularly, you would utilize the <dfn> component the first occasion when you present a key term. Latest programs render the substance of a <dfn> component in an italic text style.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Special Terms Example</title>

</head>

<body>

<p>The following word is a <dfn>special</dfn> term.</p>

</body>

</html>

This will generate the following model:

The following word is a special term.

Quoting Text

At the point when you need to cite an entry from another source, you should place it in between<blockquote>...</blockquote> labels.

Text inside a <blockquote> component is normally indented from the left and right edges of the encompassing content, and now and again utilizes a stressed textual style.

Example:

<!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 generate the following model:

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> component is utilized when you need to add a twofold statement inside a sentence.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Double Quote Example</title>

</head>

<body>

<p>Subhajit is in America, <q>I think I am wrong</q>.</p>

</body>

</html>

This will generate the following model:

Subhajit is in America, I think I am wrong.

Text Citations

In case you are citing a book, you can demonstrate the source setting it between an opening <cite>tag and shutting </cite> tag

As you would expect in a print distribution, the substance of the <cite> component is delivered in emphasized content as a matter of course.

<!DOCTYPE html>

<html>

<head>

<title>Citations Example</title>

</head>

<body>

<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>

</body>

</html>

This will generate the following model:

This HTML tutorial is derived from W3 Standard for HTML.

Computer Code

Any programming code to show up on a Web page ought to be put inside <code>...</code>tags. Typically the substance of the <code> component is introduced in a monospaced text style, very much like the code in most programming books.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Computer Code Example</title>

</head>

<body>

<p>Regular text. <code>This is code.</code> Regular text.</p>

</body>

</html>

This will generate the following model:

Regular text. This is code. Regular text.

Keyboard Text

At the point when you are discussing PCs, assuming you need to advise a peruser to enter some content, you can utilize the <kbd>...</kbd> component to demonstrate what ought to be composed in, as in this model.

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 generate the following model:

Regular text. This is inside kbd element Regular text.

Programming Variables

This component is normally utilized related to the <pre> and <code> components to demonstrate that the substance of that component is a variable.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Variable Text Example</title>

</head>

<body>

<p><code>document.write("<var>user-name</var>")</code></p>

</body>

</html>

This will generate the following model:

document.write("user-name")

Program Output

The <samp>...</samp> component demonstrates test yield from a program, and content and so on Once more, it is primarily utilized when reporting programming or coding ideas.

Example:

<!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 generate the following model:

Result produced by the program is Hello World!

Address Text

The <address>...</address> component is utilized to contain any location.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Address Example</title>

</head>

<body>

<address>2.5 Mile, Sevoke Road, Siliguri - 734001</address>

</body>

</html>

This will generate the following model:

2.5 Mile, Sevoke Road, Siliguri – 734001

HTML- Meta Tags

HTML allows you to determine metadata - extra significant data about a report in an assortment of ways. The META components can be utilized to incorporate name/esteem sets depicting properties of the HTML report, like creator, expiry date, a rundown of catchphrases, archive creator and so forth

The <meta> tag is utilized to give such extra data. This tag is an unfilled component thus doesn't have an end tag however it conveys data inside its ascribes.

You can incorporate at least one meta labels in your record dependent on what data you need to keep in your report however as a rule, meta labels don't affect actual appearance of the archive so according to appearance perspective, it doesn't make any difference in the event that you incorporate them or not.

Adding Meta Tags to Your Documents

You can add metadata to your pages by setting <meta> labels inside the header of the report which is addressed by <head> and </head> labels. A meta tag can have following ascribes notwithstanding center credits:

Attribute	Description
Name	Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
content	Specifies the property's value.
scheme	Specifies a scheme to interpret the property's value (as declared in the content attribute).
http-equiv	Used for http response message headers. For example, http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

Specifying Keywords

You can utilize <meta> tag to determine significant watchwords identified with the archive and later these catchphrases are utilized by the web crawlers while ordering your website page for looking through reason.

Example:

Following is a model, where we are adding HTML, Meta Tags, Metadata as significant watchwords about the archive.

<!DOCTYPE html>

<html>

<head>

<title>Meta Tags Example</title>

</head>

<body>

<p>Hello HTML5!</p>

</body>

</html>

This will generate the following model:

Hello HTML5!

Document Description

You can utilize <meta> tag to give a short portrayal about the archive. This again can be utilized by different web search tools while ordering your website page for looking through reason.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Meta Tags Example</title>

</head>

<body>

<p>Hello HTML5!</p>

</body>

</html>

Document Revision Date

You can utilize <meta> tag to give data about when last time the record was refreshed. This data can be utilized by different internet browsers while reviving your webpage.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Meta Tags Example</title>

</head>

<body>

<p>Hello HTML5!</p>

</body>

</html>

Document Refreshing

A <meta> tag can be utilized to determine a term after which your site page will continue to invigorate consequently.

Example

Assuming you need your page continue to refresh after every 5 minutes, then use the given structure below.

<!DOCTYPE html>

<html>

<head>

<title>Meta Tags Example</title>

</head>

<body>

<p>Hello HTML5!</p>

</body>

</html>

Page Redirection

You can utilize <meta> tag to divert your page to some other website page. You can likewise indicate a length assuming you need to divert the page following a specific number of seconds.

Example:

Following is an instance of diverting current page to another page following 5 seconds. Assuming you need to divert page quickly then don't indicate content characteristic.

<!DOCTYPE html>

<html>

<head>

<title>Meta Tags Example</title>

</head>

<body>

<p>Hello HTML5!</p>

</body>

</html>

Setting Cookies

Treats are information, put away in little content records on your PC and it is traded between internet browser and web worker to monitor different data dependent on your web application need.

You can utilize <meta> tag to store treats on customer side and later this data can be utilized by the Web Server to follow a website guest.

Example:

Following is an instance of diverting current page to another page following 5 seconds. Assuming you need to divert page quickly then don't indicate content quality.

<!DOCTYPE html>

<html>

<head>

<title>Meta Tags Example</title>

Essential Author and Founder of SDI Skills: Subhajit Dutta

Exposure: Some of the links here are affiliate links. This implies that I might acquire a commission at no extra expense on the off chance that you navigate and make a buy. These commissions assist me with making Valuable Contents like these.

Sponsor

recent posts

Learn HTML Step by Step Guide for Free

You May Also Like

top navigation

Ready to use Graphic Assets