Core HTML Tags Overview

This document provides an overview of some core HTML tags with examples and explanations.

Paragraphs (<p>)

The <p> tag is used to define a paragraph in HTML. Browsers automatically add some space before and after a paragraph, which helps to separate text into distinct blocks for readability.

Example:

<p>This is a paragraph of text. It’s used to group related sentences together.</p>

Copy

Explanation:

<p>: This is the opening tag that starts the paragraph.

Text Content: "This is a paragraph of text. It’s used to group related sentences together." This is the content that will be displayed inside the paragraph.

</p>: This is the closing tag that ends the paragraph.

Headings (<h1> to <h6>)

HTML provides six levels of headings, ranging from <h1> (the most important) to <h6> (the least important). Headings are used to define titles or subtitles in a document, helping to organize content hierarchically.

Example:

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Heading</h3>
<h4>Subsection Heading</h4>
<h5>Sub-subsection Heading</h5>
<h6>Smallest Heading</h6>

Copy

Explanation:

<h1>: Represents the main title of the page or the most important heading.

<h2> to <h6>: Represents subheadings of decreasing importance. <h2> is typically used for major sections, <h3> for subsections, and so on down to <h6>, which is the smallest and least important heading.

Links (<a>)

The <a> tag defines a hyperlink, which is used to link from one page to another. Links are essential in web pages as they allow users to navigate between different pages or sections within the same page.

Example:

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

Copy

Explanation:

<a>: This is the opening tag that defines the start of the hyperlink.

href="https://www.example.com": The href attribute specifies the URL of the page that the link points to. In this case, it links to "https://www.example.com".

Link Text: "Visit Example.com" is the clickable text that users will see on the page.

</a>: This is the closing tag that ends the hyperlink.

Images (<img>)

The <img> tag is used to embed an image in a webpage. Unlike other tags, <img> is a self-closing tag, meaning it does not have a separate closing tag.

Example:

<img src="image.jpg" alt="A beautiful scenery" width="600" height="400">

Copy

Explanation:

<img>: This is the tag used to embed an image.

src="image.jpg": The src attribute specifies the path to the image file. This could be a relative path (as shown) or an absolute URL.

alt="A beautiful scenery": The alt attribute provides alternative text that will be displayed if the image cannot be loaded. It is also used by screen readers for accessibility purposes.

width="600" height="400": These attributes define the size of the image in pixels. The width is set to 600 pixels and the height to 400 pixels in this example.

Divisions (<div>)

The <div> tag is a block-level element used to group content together for styling or layout purposes. It is often used to wrap sections of content that need to be styled as a single unit.

Example:

<div style="background-color: lightblue; padding: 20px;">
    <h2>Section Title</h2>
    <p>This is a section of content.</p>
</div>

Copy

Explanation:

<div>: This is the opening tag that defines a division or a section in an HTML document.

style="background-color: lightblue; padding: 20px;": The style attribute is used to apply inline CSS to the <div>. In this case, the background color is set to light blue, and padding (space inside the box) is set to 20 pixels.

Nested Tags: Inside the <div>, an <h2> heading and a <p> paragraph are nested. These elements are grouped together within the division.

</div>: This is the closing tag that ends the division.

Spans (<span>)

The <span> tag is an inline element used to group a part of the text for styling purposes. Unlike <div>, which is a block-level element, <span> is inline and does not break the flow of the content.

Example:

<p>This is a <span style="color: red;">red</span> word in a sentence.</p>

Copy

Explanation:

<span>: This is the opening tag that defines an inline section of the text.

style="color: red;": The style attribute is used to apply inline CSS. In this example, the text within the <span> tag is colored red.

</span>: This is the closing tag that ends the inline section.

<p>: The entire sentence is wrapped in a paragraph (<p>) tag, with the <span> only affecting the word "red."