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:
- Name : The property of the element that you want to set.
- Value : What you want the value of the property to be.
