Understand : the Tag

Introduction: 

In markup languages (like HTML or XML), 

a tag is a piece of code used to define an element, 

Instructing the browser or system "how to interpret and structure content" rather than "how to present it visually."

📝 

An angle brackets and the words inside them are known as tags , and these are the markup.  

​Structure

An HTML/XML element typically consists of three parts:

• ​Opening Tag (<tagname>): Marks the start of an element and can contain attributes.
• ​Content: The text, image, or other elements nested inside.
• ​Closing Tag (</tagname>): Marks the end of an element, denoted by a forward slash.

​Example: <p class="intro">Hello World</p>

• ​<p class="intro"> = Opening tag with attribute (class="intro")
• ​Hello World = Content
• ​</p> = Closing tag

 

Self-Closing / Void Tags: 

Tags that do not wrap content do not require a closing tag (e.g., <img />, <br />, <input />).

Rules

• ​Proper Nesting: Tags must be closed in the reverse order they were opened (First In, Last Out).
  • ​Correct: <b><i>Text</i></b>
  • ​Incorrect: <b><i>Text</b></i>
• ​Lowercase Conventions:  Writing all tag names and attributes in lowercase (e.g., <div>, not <DIV>).
• ​Quote Attribute Values: Attributes inside an opening tag should always have their values enclosed in quotation marks (e.g., href="[https://example.com](https://example.com)").

📝 Tags should only be used to define structure and semantics, not presentation (styling should be handled via CSS). 

What is : Tag | Structure | Presentation

Definition of Tag 

The tags to indicate the structure of the document. 

For example, which part of the document is a heading, which parts are paragraphs, what belongs in a table, and so on.

📝Note

The tag does not reflect "how you want the content presented."

Difference between Structure & Presentation 

Structure (Content & Logic): 

Defines 

• what the information is, 
• how it's ordered, and 
• how different parts relate to each other (e.g., HTML tags, document headings, outlines).

Presentation (Visual & Style): 

Defines 

• how that information looks to the reader (e.g., CSS styles, colors, fonts, layout design).