Introduction : the Tag | Element | Attribute

Tag 

A piece of code, that indicates 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. 

📝 It Instructions the browser "how to structure content." 

​Structure

A tag is made up of a left (<) and right (>) angle bracket and letters and numbers between those brackets. 

For example, <h1> indicates that it is a level 1 heading (or top - level heading). 

📝 There are also another 5 types of heading tags for subheadings ( < h2 > , < h3 > , < h4 > , < h5 > , and < h6 > ) . 

• ​Opening / Starting Tag (<tagname>)
• ​Closing / Ending Tag (</tagname>): Same as Opening Tag but start with a forward slash.

Self-Closing / Void Tags: 

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

Rules

• ​Lowercase Conventions:  Writing all tag names and attributes in lowercase (e.g., <div>, not <DIV>).

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

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).

HTML ELEMENT 

The individual building block of a web page. 

It defines the structure and content of a specific part of the document, telling the web browser how to display text, images, links, or other media.

Structure

Elements are the opening and closing tags plus anything between the two tags.

• Opening Tag: Indicates where the element begins (e.g., <p>).
• Content: The actual text, image, or nested elements inside (e.g., Hello, world!).
• Closing Tag: Indicates where the element ends, marked with a forward slash (e.g., </p>).

Example: <p>Hello, world!</p>

Void (Empty) Elements: 

Do not have content or a closing tag because they self-contain their function. 

e.g., 

• <img> for images, 
• <br> for line breaks, or 
• <input> for form fields).

Nested Element 

one element inside another, then both the element’s opening and closing tags must be inside the containing element. For example, the following is allowed: 

 < p > This paragraph contains some < em > emphasized text. < /em > < /p > 

whereas the following is wrong because the closing < /em > tag is not inside the paragraph element: 

 < p > This paragraph contains some < em > emphasized text. < /p > < /em > 

Attribute with Link

Attributes are used to say something about the element that carries them, and they always appear on the opening tag.

All attributes are made up of two parts: 

1. Name : The property of the element that you want to set. 
2. Value : What you want the value of the property to be.

Important Note 

• The value of the attribute should always be put in double quotation marks, and 
• It is separated from the name by the equal sign.

E.g. 

<p  class ="intro">Hi!!!</p> 

In this case, "case" is  attribute; this is followed by an equal sign, and then a pair of quotation marks which contain the value, "Bapis Page". 

📝 All Tag and Attribute names should be written in lowercase letters.

Link Tag and Attribute

📝 Web documents have link (or hyperlink) that take you from one web page to another. 

Links are created using an <a> element (the a stands for anchor). 

 For example, 

<p>< a href="bapispage.blogspot.com" > Click here to visit Bapis Page.</a></p> 

Inside the above paragraph is the < a > element that creates the link. Between the opening <a> tag and the closing </a> tag is the text that you can click on, which says “Click here to visit Bapis Page.” 

In this case, it's the href attribute; this is followed by an equal sign, and then a pair of quotation marks which contain 
the URL for "Bapis Page". 

Here, the href attribute, which you can use to indicate where the link should take you. 

The href attribute value for this link should be https://www.bapispage.blogspot.com.

If you wanted the link to open in a new window, you could add a target attribute to the opening <a> tag as well, and give it a value of _blank : 

 < a href="https://www.bapispage.blogspot.com" target="blank"> 

📝 This illustrates that elements can carry several attributes, although an element should never have two attributes of the same name.