HTML Basic Tags | Learn Web Development

In this tutorial, we will learn about basic html tags those are every important and commonly used. This is a basic overview with example.

Don’t worry if you don’t understand everything right now. You will learn all those tags and examples in the following tutorials.

HTML Basic Tags


HTML Documents

An HTML document is a file that holds hypertext markup language. It contains html codes and all the necessary contents those you want to show in front of your user.

HTML code is based on tags that provide instructions to a web browser how to display contents to a user.

Every HTML document must start with doctype declaration: <!DOCTYPE html>

This doctype indicates which html version is going to use in this document. If you don’t know about this doctype and html version then you should read HTML Introduction for Beginners tutorial.

An HTML document starts with <html> and ends with </html> tag.

All the visible contents of the html document that display on browser will go in between <body> and </body> tag.

OUTPUT


HTML Headings

HTML Headings are used to create headline inside a web page. There are total 6 heading tags in html.

HTML Headings are declared with <h1> to <h6> tags. They are different is size.

<h1> heading tag is the largest in size. In addition, <h6> is the smallest among those 6 heading tags.

<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>

The output shows in a web browser:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

HTML Paragraphs

Paragraphs are defines with html <p> tag. This creates a block of text.

To create a paragraph block you need to write your text between <p> and </p> tag.

Browser automatically add some space (margin) before and after of a <p> element. You can modify this default space using CSS. You will learn CSS later.

Paragraphs are block level elements. It takes entire space of the parent container.

Note: Block level element always starts a new line and takes up the full available width or space from left to right as far as it can.

<p>This is my first paragraph of text.</p>
<p>This is my second paragraph of text.</p>
<p>This is my third paragraph of text.</p>

The output shows in a web browser:

This is my first paragraph of text.

This is my second paragraph of text.

This is my third paragraph of text.


HTML Links

You can add links in your web page using <a> tag. It defines a hyperlink.

This is used to link from one page to another page. You can include any URL using <a> tag.

<a href="https://worldtechis.com">Visit My Website</a>

The output shows in a web browser:

Here, href is an attribute, which specify the destination of the link. You need to put the URL in this href attribute.


HTML Attributes

Attributes provide additional information about the elements. All HTML elements may have attributes.

Attributes are always added in the starting tag of the element. There are many attributes available in HTML. For example, href, src, width, height, alt, title etc.

Every attribute has two parts – a name and a value.

In href attribute, href is the name and URL you put inside is the value of this attribute.

You will learn more about attributes in a later chapter.

OUTPUT


HTML Images

In web page, images are added using <img> tag. The <img> tag is an empty tag. It only contains some attributes and has no closing tag.

Note: The tag does not contain contents and has no closing, is called empty tag.

You can add any types of image using this tag. You have to put URL or the path of that image inside the src attribute.

OUTPUT


HTML Buttons

The HTML <button> tag defines a clickable button in a webpage.

Inside the <button> element, you can add any content, like text or images.

You always should use “type” attribute with the value “button”.

Note: you can not use href attribute inside the <button> element to create a link.

<button type="button">Click Here</button>

The output shows in a web browser:


HTML Lists

HTML lists are defined with the <ul> tag to create an unordered list or <ol> tag to create an ordered list.

Inside <ul> or <ol> tag, you have to use <li> tag to create list items. Contents will go between this <li> and </li> tag.

<h2>Unordered List</h2>
<ul>
   <li>Apple</li>
   <li>Orange</li>
   <li>Cherry</li>
   <li>Blueberry</li>
   <li>Strawberry</li>
</ul>
<h2>Ordered List</h2>
<ol>
   <li>Apple</li>
   <li>Orange</li>
   <li>Cherry</li>
   <li>Blueberry</li>
   <li>Strawberry</li>
</ol>

The output shows in a web browser:

Unordered List

  • Apple
  • Orange
  • Cherry
  • Blueberry
  • Strawberry

Ordered List

  1. Apple
  2. Orange
  3. Cherry
  4. Blueberry
  5. Strawberry

HTML Line Break

The HTML line break defines with <br> tag. This tag inserts a single line break.

The <br> is an empty tag. It has to closing tag. You can add a separate line.

Note: you can also add slash (/) before the greater than sign. <br /> works same like <br>.

<p> This paragraph contains<br>a line break. </p>

The output shows in a web browser:

This paragraph contains
a line break.


HTML Horizontal Lines

The HTML horizontal lines defines with <hr> tag. It works as a separator between two elements.

This tag helps to create a user friendly content. You can separate different sections to make it easily readable.

OUTPUT