Understanding HTML Tags and Elements

HTML (Hypertext Markup Language) is the foundation of web development. This markup language lets use define the structure of our website (the skeleton upon everything else is built).

What is a HTML tag ?

The HTML tags are “labels” that tells the browser that what the text closed inside it should look like. Eg:

<h1>Hello World!</h1>.

Here <h1> is the “label“ which tells the browser that this text should look big and bold.

<h1> is called opening tag while the </h1> is called closing tag. The content is the text written inside the opening and closing tags.

What an HTML element means ?

An HTML element is the opening tag, closing tag and the content in between. It is a complete unit which performs specific action.

Self Closing (void) elements

In HTML some tags don’t wrap content, they just perform an action or embed something. These are called self closing or void elements. They only have the opening tag and no closing tag. Such as:

• <img>: This tag is used to embed images in our web page.

• <br>: This tag helps in creating a line break.

• <hr>: This tag gives a horizontal rule.

• <input>: This tag helps in taking different types of input in our web page.

Block Level vs Inline Elements

• Block Level Elements:

  Always starts on a new line.

  Take up the full available width of their parent container.

  Eg: <h1>, <p>, <div>, etc.

• Inline Elements:

  These do not start on a new line.

  Only take up the width necessary to its content.

  Eg: <span>, <a>, <strong>, etc.

Commonly Used Tags in HTML

• Headings: <h1>, <h2>, <h3> (etc., down to <h6>) - for titles and subtitles.

• Paragraphs: <p> - for blocks of text.

• Divisions/Containers: <div> - a generic block-level container, super important for layout with CSS.

• Spans: <span> - a generic inline container, useful for styling specific words or phrases.

• Links: <a> - for hyperlinks to other pages or sections.

• Images: <img> - to embed pictures.

• Lists: <ul> (unordered list), <ol> (ordered list), <li> (list item).

• Buttons: <button> - for interactive elements.

• Input Fields: <input> - for forms (text, numbers, checkboxes, etc.).

Thank You

With this, the blog ends and now you know the basics of HTML, there are a lot more tags in HTML search around and find out and experiment with those tags. Thanks for reading this blog.