fundamental html block is known as

HTML Elements 101: The Fundamental Building Blocks of Web Page

by
fundamental html block is known as
fundamental html block is known as

The fundamental HTML block known as an “HTML element”. An HTML element is the main building block of an HTML page.

This HTML page is a combination of opening and closing tags and the content in between these tags.

These tags represent many types of content, like headings, paragraphs, images, links, tables forms and more.

And all of the HTML elements have a specific meaning and its purpose. And these elements can also be styled and manipulated by using CSS and JavaScript.

HTML Elements: The Building Blocks of Web Pages

HTML is basically the abbreviation of Hypertext Markup Language. This is the standard markup language that is used to create web pages. 

HTML documents consist of a list or collection of HTML elements, which are the basic building blocks of any webpage.

Each element is a set of opening and closing tags. And the content in that page is displayed on the webpage.

HTML elements have a wide variety of tags that are used to represent the content like headings, paragraphs, images, links, lists, tables, forms and much more.

I shall show you the basic structure of HTML elements and will try to show you the use of some of them. And how they are used to create the webpage.

The General Structure of an HTML Element

An HTML element consists of several parts, including the opening tag, closing tag, and content. The opening tag is used to identify the type of element, while the closing tag is used to mark the end of the element. The content of an HTML element is the text or other media that is displayed on the webpage.

An HTML element consists of three main parts:

  • The opening tag
  • The closing tag
  • The content

The Opening Tag

The opening tag is used to identify the type of element.

The closing tag

While the closing tag is used to mark the end of the element

The content

The content of an HTML element could be the text or other media that is displayed on the webpage.

Here is an example of a simple HTML element:

<p>This is a paragraph.</p>

In the above example there is the paragraph tag which has be described like this:

  • The opening tag is <p>, which stands for “paragraph.”
  • The closing tag is </p>, which marks the end of the paragraph.
  • The content of the paragraph is “This is a paragraph.”

HTML elements can also have additional properties, which are called the attributes. These properties provide additional information about the element.

Attributes are always included in the opening tag of the element and are written as name-value or key-value pairs.

For example below is the src attribute example that is used to specify the source of an image element.

<img src="image.jpg" alt="An image">

In the above example the description of the img tag is described here:

  • The src attribute is set to “image.jpg,” which is the source file for the image.
  • The alt attribute provides alternative text for the image. Which is displayed if the image cannot be loaded.

Common HTML Elements

There are many HTML elements that can be used to create a webpage. Here are some of the most commonly used elements:

There are many HTML elements which are used to create the webpage. But here are some of the most commonly used elements:

1. Headings

There are six headings  (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>). That is used to create headings and titles for the sections of the webpage. 

The <h1> generally used for the main heading in your content. And the other headings are used to create subheadings.

2. Paragraphs

Paragraphs (<p>) are used to create the paragraphs of your text content.

3. Links

Links  (<a>) are used to create hyperlinks to your web pages which helps your user to navigate from one webpage to another or to download files.The href attribute is used to specify the destination of the link.

4. Images

Images (<img/>) are used to display the images on your webpage. The src attribute is used to specify the source file for the image.

5. Lists

Lists  (<ul>, <ol>, <li>) are used to create bulleted or numbered lists. The <ul> element is used to create an unordered list which has the bullet points.

On the other hand the <ol> element is used to create the ordered list that has the numbers.

The <li> element is used to describe each list item of the ordered or unordered list.

6. Tables

Tables (<table>) are used to create tables in your webpage. 

  • The <table> element is used to create the table.
  •  The <tr> element is used to create a row in the table.
  • The <th> element is used to create a header cell in the table.
  • The <td> element is used to create a data cell in the table.

7. Forms

Forms are used to create the interactive forms on the webpage. Which you fill on any website where you provide your necessary information for submission.

  •  The <form> element is used to create the form. 
  • The <input> element is used to create various types of input fields, such as text boxes, check-boxes, radio buttons, and more. 
  • The <label> element is used to associate text with an input field
  • The <select> element is used to create drop-down lists. 
  • The <textarea> element is used to create a larger text input field.

There are many other elements which help to create the web pages. But some of them are described above.