Understanding the Building Blocks of the Web: HTML and Its Basic Tags

INTRODUCTION:

Welcome to the fascinating world of web development! If you've ever wondered how websites are created and displayed in your browser, the journey begins with HTML, or HyperText Markup Language. HTML is the backbone of the web, providing the structure and content for web pages. In this post, we'll dive into the essential tags that form the foundation of HTML, empowering you to create your very first web page. Whether you're a beginner or brushing up on your skills, understanding these basic tags is crucial for any aspiring web developer. So, without any delay !!

1. Heading Tag

Heading tag is used to create heading and subheading on the webpage. There are 6 type of heading tag in HTML, Which are h1, h2, h3, h4, h5 and h6 . Generally there is only single h1 heading in the HTML document but rest of Headings can be multiple. The size and priority/Importance of heading gradualy decrease from h1 to h6 . Heading tag is a block level element, We will study more about Block and Inline elements in our upcomming blog's . Till then remember that Block level element take a whole line and don't allow any other element to come in there line.

Tip: In industry you will rarely use h5 and h6

Example with code of all heading tags

2. Paragraph tag

Paragraph tag is used to define a paragraph of text , Which help in organizing the text on the web page. It's syntax is <p></p> whatever we write in between these two tag that will be treated as a paragraph. we can write paragraph in a paragraph. With <p> tag you cannot change display output by giving extra spaces or extra line inside <p> tag, The browser will automatically remove all the extra space and line in final output

Example with code

3. Line break (br) tag

This tag produce a line break in a text without starting a new paragraph, it is used to when we have to write addresses or poems. syntax is <br> or </br> we can use any one of them, It is a self closing tag mean it does't require a closing tag

Example with code

4. Horizontal rule (hr) tag

It creat a horizontal line on the web page, you will rarely or probably never see this element on morden websites. It's syntax is <hr> it is also a self closing tag

Example with code

5. Bold(b) and Strong tag

The <b> and <strong> tags are both used to bold text. However, there is a key difference between them. We use the <b> tag when we simply want to make the text bold, without implying any extra importance. On the other hand, we use the <strong> tag to indicate that the text is important, serious, or urgent.

On the output screen, both tags make the text appear bold, but the difference becomes apparent/Visible in the code. This difference is significant for SEO searches, screen readers, and visually challenged individuals.

Example With code

6. Italics(i) and Emphasized(em) tag

The <i> and <em> tags are both used to make text italic, but they have different purposes.

We use the <i> tag when we simply want to make text italic without any particular importance. It is often used for technical terms, phrases in different languages, or references to historical events.

On the other hand, we use the <em> tag to emphasize text, giving it importance and focus. The <em> tag is more SEO-friendly and helps visually challenged individuals by working with screen readers to convey the emphasis.

Example with code

7. Underline(U) and Ins tag

The <u> and <ins> both tags are used to make text underline, But they have different significance.

The <u> tag is used for stylish purpose, it does not imply any additional meaning to the text it just underline the text

Whereas on the otherhand <ins> stands for inserted text and is used to indicate that the text has been added/inserted into the document, This tag can also underline the text but semantically represents an addition to the content.(used when we revise the document and we have to add something to it)

Example with code

8. Anchor (a) tag

The <a> tag is almost used in almost every website you use in daily basis, It is used to add a hyper link to a text so that on clicking on that we get trasfered to that hyperlink page .

In the <a> tag there is a attribut href in which indicate's the link destination, We will learn about that in deep in our upcomming blog

Example with code

9. Small tag

The <small> tag in HTML is used to make text appear smaller than the surrounding text. It is often used for disclaimers, fine print, or side comments that need to be visually de-emphasized.

Example with code

10. Image tag

    The <img> tag is used to embeed the image into the web page. It is a self closing tag and require a src attribute in which we have to give path of the image if it is present in our local system, and if it is present on internet then we have paste its address, It also have a alt attribute used when for some reason our image did't get load then we can write description of the image and it will be shown by the help of that alt attribute

    Tip: Use Pixels or Unsplash website for copyrightr free images to don't get into any legal problem

    Example with code

    Disclaimer : Here i use height attribute to adjust height we will study it in our upcomming blog

    https://codepen.io/Deepanshu-Yadav-the-reactor/pen/oNrNXvR

So finally we have understanded the basic building Elements of HTML.

If you have reached this part of the blog then I have to thank you to invest your valuable time in reading my blog

and waiting for your valuable feedback!!!

My Github

My Linkedin

My Twitter

Thank you