HTML Basic

You have already learned ‘what exactly HTML is’ in ‘HTML Introduction’ chapter, including some information about simple HTML document.

In this chapter, you will learn about the basics of HTML. Here, we have included the basic stuff of HTML coding.

To make you understand HTML in an easy way, some tags are used here in the examples. They help in basic formatting of elements on a web page. You will learn about them in detail in the coming chapters.

HTML Document

All HTML documents should start with <!DOCTYPE html>, which is a document type declaration of this Markup language. The individual HTML elements are combined and wrapped up under this declaration.

After this declaration, each document begins with <html>and ends with </html>.

How you want a webpage to design and view comes within <body>. All HTML tags, HTML attributes are included in this ‘body’ section. </body>

Let’s again discuss this previous example but in brief.

It is an example of a basic structure of HTML page.

Example:

<!DOCTYPE html>
<html>
<head>
<title>It shows the Title of the Page</title>
</head>
<body>

<h1>It displays the heading </h1>
<p>It displays a paragraph</p>
</body>
</html>

<!DOCTYPE html> - It is a document type declaration which must be included at the top of HTML coding.

<html> and </html>- HTML document starts and end within this section.

<body> and </body>- The visible part of a webpage is coded within this section.

Now, proceed little further with other basic HTML tags.

HTML Headings

HTML headings allow you to add 6 different types of headings, i.e. from <h1> to <h6> tags. Thus, size of the text decreases with the increase in heading tag, where <h1> tag is commonly used, therefore is one of the most important heading tags, <h6> tag is used very rarely.

Some users use headings like main heading with <h1> sub-heading with <h2> sub sub-heading with <h3> and so on.

The use of headings completely depends on how you want your text to be displayed on a page.

<h1>It displays the heading 1</h1>

<h5>It displays the heading 5</h5>

HTML Paragraphs

HTML paragraphs define the combination of one or more sentences that want to be shown as a paragraph. It is defined with <p> opening tag and </p> closing tag.

Example:

<p>It displays a paragraph</p>

<p>It displays another paragraph</p>

<p>It displays third paragraph</p>

Line Break tag

This tag, <br> , is used to specify that anything following it should be started from the next line. It inserts a single line break. More line breaks you want, more </br> tag you have inserted at the place from where you want more line breaks.

Example:

<!DOCTYPE html>
<html>
<head>
<title>An Example of Line Break tag</title>
</head>
<body>

<p>Hello World<br>
Good Morning<br>
Have a Good Day</p>
</body>
</html>

Example:

<!DOCTYPE html>
<html>
<head>
<title>It shows the Title of the Page</title>
</head>
<body>

<h1>It displays the heading </h1>
<img src= "It contains the image file and display the image you select”>
<p>It displays a paragraph</p>
</body>
</html>

Now, let’s get a brief of these tags that what purpose they hold in the HTML document.

<!DOCTYPE html> - This element is used to declare the version of HTML document. This currently tells that the version is HTML5.
<html> - This element is used to start the HTML page which acts as root of an HTML page. It is used to wrap all the code.
<head> - This element is used to define the meta information of the HTML document. You can use <style>,<base>, <noscript>,<script>, <meta>,<title>tags inside this element.
<title> - This element is used to define a title of HTML document.
<body> - This element is used to define the visible content of a page, it can be text, image or anything.
<h1> - This element is used to define the heading i.e. Heading 1 on the MS-word.
<img src> - This element is used to define the image you want to view on a page.
<p> - This element is used to define a paragraph.

It will display as:


Hello World

Good Morning

Have a Good Day

HTML Links

To define hyperlink on any phrase or word, <a> tag is used. It takes the user from one page to another.

Here, ‘a’ is a short form of anchor.

To make text into a link, you need to add the URL to <a> tag using ‘href’ (hypertextreference).

Example:

<p> For beginners, please visit here to < a href= "https://en.wikipedia.org/wiki/HTML"> learn more about HTML basics </a>.</p>

When you open this page in a browser, it will look like:

For beginners, please visit here to learn more about HTML basics.
(Link will display on ‘learn more about HTML basics’)

< a href= https://en.wikipedia.org/wiki/HTML">Learn more about HTML basics</a>

In this second example, it will look like:

Learn more about HTML basics.
(Link will display on the complete text)

The link address is stated in the ‘href’ HTML attribute.

You will learn about ‘HTML attributes’ in the next chapters.

HTML Images

This tag is always used with one or more attributes, such as <img>tag is used.

This tag is always used with one or more attributes, such as 'src'an abbreviation of source, 'width' 'height' and alt (alternate text), depending on the requirement.

Example:

<img src= "good_morning.jpg">
Here, an image filename is specified in the src attribute.

<img src= "good_morning.jpg" width= "700" height= "600" >
Here, a filename, as well as the desired width and height of an image are specified.

<img src= "good_morning.jpg" alt= "Have a positive and wonderful day" >
Here, an image filename is specified along with ‘alt’ attribute, which will display text when a cursor goes on the image.

HTML Buttons

This tag is used when you want any text to be clicked like a button.

Example:

<button>An Example of Line Break tag</button>

Conclusion

These HTML basics will help you to get familiar with how some basic HTML tag works and how they will display when you use them to create a webpage.