HTML Tags

HTML tags are the building blocks of a webpage used to wrap content in a specific way, defining the type and style of content.

Tags are usually enclosed in angle brackets, like this: <tagname>. Most tags come in pairs, with an opening tag <tagname> and a closing tag </tagname> , although some are self-closing.

Understanding how HTML tags work is crucial for creating your own websites. This tutorial will guide you through the essential HTML tags and how to use them effectively.

Example:

HTMLcopy
<p>This is a paragraph.</p>

In this example, <P> is the opening tag, and </P> is the closing tag. The text inside these tags, 'This is a paragraph.', is the content that will be displayed on the webpage.

HTML Tags Examples

<h1> to <h6>

These tags define headings, with <h1> being the most important (usually the main heading) and <h6> the least important.

HTMLcopy
<h1>Main Heading</h1>
<h2>Subheading</h2>

<a>

Defines a hyperlink, which allows users to click and navigate to another page or resource.

HTMLcopy
<a href="https://www.example.com">Visit Example</a>

<body>

Contains the content of the HTML document, such as text, images, and links. Everything visible on the webpage is inside the <body> tag.

HTMLcopy
<body>
   <h1>Hello World!</h1>
</body>

Self-Closing Tags

Self-closing tags represent elements that are standalone and don't wrap around content like standard HTML tags do. They are written with a single tag that includes a forward slash before the closing angle bracket, like this:

HTMLcopy
<self-closing-tag />

Common Self-Closing Tags

<img />

The <img> tag is used to embed an image into a webpage. It's a self-closing tag because it doesn't have any content between an opening and closing tag—it simply points to the image you want to display.

Example:

HTMLcopy
<img src="logo.png" alt="Company Logo" />

<br />

The <br /> tag is used to insert a line break in the text, creating a new line without starting a new paragraph.

Example:

HTMLcopy
<p>This is the first line. <br /> This is the second line.</p>

In this example, the text 'This is the second line.' will appear on a new line.

<hr />

The <hr /> tag is used to insert a horizontal line (or horizontal rule) that visually separates content on the page. It's often used to divide sections within a page.

Example:

HTMLcopy
<p>Section 1 content</p>
<hr>
<p>Section 2 content</p>

A horizontal line will appear between the two paragraphs, separating them visually.

Page 5 of 33

Page 5 of 33

logoFALYTOM

Learn technologies like HTML, CSS, JavaScript, React, NodeJS and so much more. Practice your skills with our free games, examples, practice questions & quizzes

    © 2024 Tomilola Group
    • facebook logo
    • twitter logo
    • instagram logo
    • linkedin logo
    • github logo
    • youtube logo