Defining an HTML element

An HTML element is the fundamental building block of an HTML page. It consists of a start tag, content, and an end tag. Everything from the start tag to the end tag, including the content, forms a complete HTML element.

Opening and closing tags

HTML tags are used to "mark up" elements. An opening tag (also known as a start tag) indicates where an element begins, and a closing tag (also known as an end tag) indicates where an element ends. The closing tag always includes a forward slash before the tag name.

Example 1: HTML H1 tag

<h1>This is a Main Heading</h1> 

Explanation The <h1> tag defines the most important heading on a webpage. "This is a Main Heading" is the content of the h1 element. The </h1> is the closing tag.

Example 2: <p> tag

<p>This is a paragraph of text.</p>

Explanation The <p> tag is used to create a paragraph. The text "This is a paragraph of text." is the content of the paragraph element. The </p> is the closing tag.

Example 3: <a> tag

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

Explanation The <a> tag creates a hyperlink. "Visit Example.com" is the clickable text. The </a> is the closing tag.

Example 4: <div> tag

<div>
  <h2>Section Title</h2>
  <p>Some content within a div.</p>
</div>

Explanation The <div> tag is a block-level container. It's often used to group other HTML elements for styling or scripting purposes. The </div> is the closing tag.

Example 5: <span> tag

<p>This is some <span style="color: blue;">blue</span> text.</p>

Explanation The <span> tag is an inline container. It's used to apply styles or manipulate a small part of text without breaking the flow of the content. The </span> is the closing tag.

Void (or empty) elements

Void elements, also known as empty elements, are HTML elements that do not have any content and therefore do not require a closing tag. They represent a self-contained unit.

Example 1: <br> (line break)

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

Explanation The <br> tag creates a line break, moving the subsequent text to a new line without starting a new paragraph. It is a void element and does not have a closing tag.

Example 2: <img> (image)

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

Explanation The <img> tag is used to embed an image. It uses attributes like src (source) and alt (alternative text) to define the image. It is a void element.

Example 3: <input> (input field)

<input type="text" placeholder="Enter your name">

Explanation The <input> tag creates an input field for user interaction. The type attribute specifies the type of input. It is a void element.

Example 4: <hr> (horizontal rule)

<p>Content above the line.</p>
<hr>
<p>Content below the line.</p>

Explanation The <hr> tag creates a horizontal rule, which is often used to separate content visually. It is a void element.

Example 5: <link> (external resource link)

<link rel="stylesheet" href="style.css">

Explanation The <link> tag is used to link an external resource, such as a stylesheet. The rel (relationship) and href (hypertext reference) attributes define the link. It is a void element.

Understanding and using HTML attributes to provide additional information

HTML attributes provide additional information about HTML elements. They are always specified in the start tag and typically come in name/value pairs, like name="value". Attributes are crucial for controlling the behavior and appearance of elements.

Example 1: href attribute for <a>

<a href="https://www.google.com" title="Go to Google">Search with Google</a>

Explanation The href attribute within the <a> tag specifies the destination URL of the hyperlink. The title attribute provides a tooltip when hovering over the link.

Example 2: src and alt attributes for <img>

<img src="sunset.jpg" alt="Beautiful Sunset Landscape" width="500" height="300">

Explanation The src attribute defines the image file's path. The alt attribute provides alternative text for screen readers and when the image cannot be displayed. width and height specify the image dimensions.

Example 3: id attribute

<h2 id="section-intro">Introduction to HTML</h2>

Explanation The id attribute assigns a unique identifier to an HTML element. This is often used for CSS styling or JavaScript manipulation.

Example 4: class attribute

<p class="highlight important">This text is highlighted and important.</p>

Explanation The class attribute assigns one or more class names to an HTML element. Classes are used to apply CSS styles to multiple elements.

Example 5: style attribute

<p style="color: green; font-size: 18px;">This text is green and larger.</p>

Explanation The style attribute allows you to apply inline CSS directly to an HTML element. It's useful for quick styling but generally, external stylesheets are preferred for larger projects.