Learning Resources
Elements Tags and Attributes
HTML5 elements
An element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag. The following is a paragraph element:
<p>This is the content of the paragraph element.</p>
In this example, <p> is the start tag, This is the content of the paragraph element. is the content, and </p> is the end tag.
HTML5 tags
Tags are used to mark up the start and end of an HTML element.
A start tag consists of an opening angle bracket (<) followed by the element name, zero or more space separated attribute/value pairs, and a closing angle bracket (>).
A start tag with no attributes: <p>
A start tag with an attribute: <img src="image.jpg" alt="Description of the image">
End tags consist of an opening angle bracket followed by a forward slash, the element name, and a closing angle bracket: </p>
There are also some elements that are empty, meaning that they only consist of a single tag and do not have any content. In HTML, such tags look just like opening tags:
<img src="logo.png" alt="Company Logo">
The syntax is slightly different in XHTML. Empty elements must either have an end tag or the start tag must end with />. In order to ensure backward compatibility with HTML the most common way of writing empty elements in XHTML is to use minimised tag syntax with a space before the trailing />:
<img src="logo.png" alt="Company Logo" />
HTML5 Attributes
Attributes provide additional information about an element and are included within the start tag. Each attribute is a name/value pair, where the name is the attribute’s name, and the value provides the corresponding information. Multiple attributes are separated by spaces.
Example of an element with multiple attributes:
<a href="https://www.example.com" target="_blank">Visit Example.com</a>
Here, href is an attribute that defines the link's destination, and target is an attribute that specifies where the linked document will open.
Common Misconception: Sometimes, attributes are mistakenly referred to as "tags." For example, the alt attribute in an <img> tag is often incorrectly called the "alt tag," but it is an attribute, not a tag.
Example: Using Elements, Tags, and Attributes Together
<img src="landscape.jpg" alt="Beautiful Landscape" width="600" height="400">
In this example:
<img> is the start tag.
src, alt, width, and height are attributes with their respective values.
There is no end tag since <img> is a self-closing tag.
Conclusion
Understanding elements, tags, and attributes is crucial for effective HTML coding. Elements structure your content, tags define those elements, and attributes provide additional details. Mastering these basics will help you build well-structured and functional web pages.