HTML Basics Explained:Tags, Elements with Examples

HTML Building Blocks for Beginners (With Examples)

HTML (HyperText Markup Language) is a standard markup language which is used to structure content on web pages.

For example: When you visit a website like theweeklyblog.com you can see text, images, links (leading to another page or website), videos, and audios.

All the content you see inside a webpage is stuctured with HTML.The content is written inside the tags.

Tags are building blocks of HTML . In tags you can write different kind of content.

Tags are written inside the angle brackets <>.

Example: <h1-h6> – Headings from largest (<h1>) to smallest (<h6>)

<p> – Paragraph tag is used to display text.

<a> – It is anchor tag. When you want to link a text or button to

another section of the page or to another website anchor

tag is used.

Example of tags:

<h1>Welcome!!</h1>

<p>Hello world…</p>

<a href=”https://theweeklyblog.com” target=”_blank”>Visit Our Website</a>

Types of Tags:

1.Paired Tags: They have an opening tag and closing tag. In between the tag the content is placed.

Ex: <p> This is paragraph tag</p>

<p> – Opening tag

</p> – Closing tag

2.Self-Closing Tags: Unlike paired tags self-closing tags do not contain content in between them and it closes itself.

Ex: <br> – for breaking the content to next line

<hr> – horizontal line

Elements: An element is the complete unit of content in an HTML document.

It consists of:

-> An opening tag

-> Content (optional)

-> A closing tag (unless it’s self-closing)

Example:

`<p>Hello,World</p>`

Here,

<p> = opening tag

Hello, World! = content

</p> = closing tag

Together it forms an HTML element.

Types Of Elements:

1. Block-level Elements – Block-level elements takes up the full width of the screen or webpage another element start ‘s on a new line. It can contain other block-level and inline elements.

Example:

<p>This is a paragraph</p>

<h1>This is a heading</h1>

<ul>

</ul>

Behavior:
They stack vertically, each on a new line.Here we have given background color as black it fills the whole width of the screen.

2.Inline Elements: Inline-elements take only space/width as the content fits.They do not start on a new line unless it’s a block element. It cannot contain block-level elements (but can contain other inline elements or text).

Example:
<span>This is a span</span>
<strong>This is bold text</strong>
<img src=”image.jpg” alt=”An image”>

Behavior:
They stay in the same line and sit next to each other unless the line is too narrow.

3.Inline-Block Elements
They behave like inline elements (sit on the same line), but you can set width, height, padding, and margins like a block-level element.

For Example:

<div style=”display: inline-block; width: 100px; height: 50px; background-color: pink;”>Box</div>
<div style=”display: inline-block; width: 100px; height: 50px; background-color: lightblue;”>Another Box</div>

Both boxes appear next to each other (inline behavior)
You can style them like blocks (with width, height, color, etc.)

Behavior:
Sits next to other elements but allows block-like styling.

Create Simple HTML Page:

<!DOCTYPE html>

<html>
<head>
<title>Creating a Simple Web Page</title>
</head>
<body>
<h1>This is heading</h1>
<p>This is a simple paragraph demonstrating an HTML element.</p>
<a href=”www.theweeklyblog.com” target=”_blank”>Checkout Our Website Here </a>
</body>
</html>

Thanks for reading!!

If you found this post helpful, stick around for more tips on web development, WordPress, and freelancing.

Join our newletter for fresh insights every week: Subscribe Here

Follow our articles on Medium: The Weekly Blog on Medium.

HTML Building Blocks for Beginners (With Examples)

Types of Tags:

Create Simple HTML Page:

Leave a Comment Cancel Reply