tutorialstonight logo
A Platform To Learn To Code

HTML BASICS



This section deals with the basics of HTML that we need to know while learning HTML. We will go through various tags that we must know while starting code in HTML.

First, we will see basic building blocks of HTML, then we will look at some important HTML tags to start code in HTML.

Building Blocks Of HTML

Building blocks of HTML are :

  1. Tags
  2. Attribute
  3. Elements

1).HTML Tags

Tags are basic building blocks of HTML documents. These a kind of signboard which tells the browser how to present the contents nested inside. Every tag performs different tasks in an HTML document.

A tag starts with a less-than angle bracket (<) and ends with greater-than angle bracket (>) with tag name in-between. Example <p>, <div>, <h1>, etc.

Syntax:

Every tag must be enclosed in < >.

Generally, every tag is closed by </tag>.

<tag> content </tag>

Example: <p> tag is used for paragraph.
        <h1> tag is used for headings.
        

2). HTML Attribute

In HTML when we use tags like <p>,<pre> or <h1> then in general we use it simply without specifying any extra information about the tag. Using attribute we can provide additional information to the HTML tags.

  • To add extra information to the tag we use attributes.
  • Attributes have two parts: the name and the value. value part should be written in the quote; either in single quote '' or in the double quote "". Example href="www.tutorialstonight.com"
  • To write attribute for some tag we write it as follows:
    <tag name="value"> content </tag>

Attribute for img tag:

src attribute used to provide the URL of the image.

The alt attribute is used as an alternative text when the image is not available.

Attribute for anchor tag:

href specifies a link to any address.

Inline style attribute:

style attribute adds additional information as how our text or web page to be presented.

3). HTML Elements

HTML Element is an individual component of a web page which is used to define the structure of a webpage.

An element starts with html tag, contains attributes and if it has body then it also have closing tag. Example shown below :


Some Important HTML Tags

Before starting HTML let's learn some basic HTML tags that are frequently used. Some of them we have seen above in examples, but here we will see their usage and examples too.

We will look at :

  • HTML paragraph
  • HTML headings
  • HTML images
  • Horizontal lines
  • Line break

HTML Paragraph

Paragraph tag let us write a paragraph in web pages. Paragraph tag in HTML is defined by <p> tag which ends with </p>. A new paragraph automatically starts with a new line.

Example below shows multiple paragraph in the webpage.

Example

Run the code

HTML Headings

There are 6 heading tags in HTML, from h1 to h6. These elements are used to create headings in web pages. We will learn more about heading further in this tutorial.

Example

Run the code

HTML Image

To add image on web page use <img> tag and add href attribute to provide url of image.

Example

Run the code

HTML Horizontal Line

Horizontal line is created using <hr> tag. It is an empty tag, its has not attribute but we can add CSS to it using style attribute.

Example

Run the code

HTML Line Break

Line break is created using <br> tag. It is an empty tag and is used to give space between HTML elements.

Example

Run the code
HTML Tags