HTML Basics: Elements and Attributes
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.
Further, if we want to customize our heading tags then we can use an attribute inside the heading tag.
<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
<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>
<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:
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”>