HTML Basics: Elements and Attributes

Posted on April 19, 2021

In HTML there are various elements and tags that we can use to create our own custom webpage. For example, heading, paragraph, images, and so on. And attributes in any HTML tag or elements provides additional information of that particular HTML code. All the HTML elements in an HTML code can have one or more attributes. We will discuss a few HTML elements and attributes in this tutorial.

HTML Heading Elements

We can use heading elements in HTML by using h1, h2, h3, h4 tag.

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

Further, if we want to customize our heading tags then we can use an attribute inside the heading tag.

For example:

<h1 style=”font-size:30px; color:red;”>Heading 1</h1>

<h2 style=”font-size:20px; color:red;”>Heading 2</h2>

We can also assign some classes and Id’s to our HTML elements.

<h1 id=”heading_1” class=”heading_1” style=”font-size:30px”>Heading 1</h1>

<h2 id=”heading_2” class=”heading_2” style=”font-size:20px”>Heading 2</h2>

Assigning classes and id are required when we do any CSS, Js codes in our webpages. Classes and Id’s helps us to get the information about that particular HTML code and modify it later on as per our need.

HTML Paragraph and Span Elements

To write an paragraph in our webpage we can use <p></p> tag. For example:

<p>This is my first HTML webpage</p>

As similar to heading tags, we can also modify our HTML paragraph tag using some HTML attributes. Therefore, we can also add classed and id’s to our <p> tag for further CSS and Js codes

For Example:

<p style=”font-size:10px; color:blue;”> This is my first HTML webpage </p>

Span elements are used when we write some functional codes in Js and we want our HTML displayed to get changed after certain events. For example, while building an online classic game, we always need to change the winner’s name and score, which are been displayed on the webpage. In such cases, span tags are used. To declare an span tag we use <span></span>

For example:

<p> My scores are: </p><span>34</span>

In span tag also, we can use attributes, classes and id’s.

HTML Image element

In order to add images to our web page, we need to use the <img> tag, and we also need to add an src attribute to locate the image that we want to display on our webpage. For example:

<img src=”local_folder/html/image.jpg”>

We can use width and height attribute in <img> HTML tag to customise our image dimensions.

<img src=”local_folder/html/image.jpg” height=100px width=100px alt=”image”>

Other HTML attributes can also be added in <img> HTML tag.

Add images from other websites.

<img src=”http://localhost/typical_coding/wp-content/uploads/2020/11/HTML-Basic-2.jpg” height=100px width=100px alt=”image”>

Leave a Reply

Your email address will not be published. Required fields are marked *