Tutorials Tonight's Logo

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.

<p>This is an image of a flower.</p>
<img src="flowers.jpg" alt="flowers">
▶ Run the code

Attribute for anchor tag:

href specifies a link to any address.

<p>Click the link to go to Homepage</p>
<a href="https://www.tutorialstonight.com">Homepage</a>
▶ Run the code

Inline style attribute:

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

<body style="background:skyblue">
  <h1 style="text-align: center;">Learning basics of HTML.</h1>
  <p style="color:red">Color of this paragraph is red.</p>
</body>
▶ Run the code

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 :

<!-- img element doesn't have body so no extra closing tag -->
<img src="cat.jpg" alt="cat">
<!-- p element have body so there is an extra closing tag -->
<p>This is a paragraph.</p>
▶ Run the code

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.

<p>This paragraph number 1.</p>
<p>This paragraph number 2.</p>
<p>This paragraph number 3.</p>
<p>This paragraph number 4.</p>
<p>This paragraph number 5.</p>
▶ 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.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
▶ Run the code

HTML Image

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

<h2>Use img tag to form image and add href attribute to provide address of image.</h2>
<img src="assets/web.jpg" alt="codes">
▶ 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.

<h2>Creating horizontal line below.</h2>
<hr>
▶ 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.

<p>5 line breaks below.</p>
<br>
<br>
<br>
<br>
<br>
<p>5 line breaks above.</p>
▶ Run the code
HTML Tags

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.