Tutorials Tonight's Logo

HTML BASICS - An Overview Of Language Component


This section deals with the basics of HTML that we need to know before learning HTML. We will go through overviews of different components of HTML in this chapter.

Building Blocks Of HTML

HTML has 3 building blocks which are:

  1. Tags
  2. Attribute
  3. Elements

1. HTML Tags

Tags are the most basic building block of an individual component of HTML. These are 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 a greater-than angle bracket (>) with a 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 and is closed by </p>.
<h1> tag is used for headings and is closed by </h1>.


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. But using attribute we can provide additional information to the HTML tags like title, class, id, etc.

For brief understanding, class is an attribute that is used to style elements using CSS. Similarly, there are many other attributes that have their special purpose.

  • 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 title="this is my website"
  • To write attribute for some tag we write it as follows:
    <tag name="value"> content </tag>

Here are some examples of the use of attributes:

Attribute for img tag:

src attribute is used to provide the URL of the image in the <img> tag.

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

<img src="flowers.jpg" alt="flowers">
▶ Run the code

Attribute for anchor tag:

href specifies a link to any address in the anchor tag.

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

Inline style attribute:

The style attribute adds additional information for how your text or web page be presented.

<body>
  <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 that is used to define the structure of a webpage.

An element starts with an HTML tag, contains attributes and if it has a body then it also has a closing tag.

HTML element

Here is an example.

<!-- 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 class="box">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 on web pages. Paragraph tag in HTML is defined by <p> tag which ends with </p>. A new paragraph automatically starts with a new line.

The example below shows multiple paragraphs on 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 on 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 an image on the web page use <img> tag and add href attribute to provide the URL of the 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, it has no attribute but we can add CSS to it using the style attribute.

<h2>Creating horizontal line below.</h2>
<hr>
▶ Run the code

HTML Line Break

A line break is created using the <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

Points to remember:

  1. 3 important component of HTML are tags, attributes and element.
  2. HTML element contains start tag, end tag, attributes and contents.


Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.