HTML Elements Showcase - Inline vs Block

Introduction:

Block Elements

Explanation: The "div" tag groups HTML elements, serving as a block-level container for layout and styling.

Example: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis saepe quas inventore eligendi illo hic sint nam assumenda earum rerum vitae, iste eaque omnis magnam excepturi molestiae, ullam facilis exercitationem!

Explanation: The "p" tag defines a paragraph, organizing text into readable, block-level content sections.

Example: Heading-1

Explanation: The "h1" tag defines the main heading, representing the most important title on a webpage.

Example: Heading-2

Explanation: The "h2" tag defines a secondary heading, used to organize content under the main heading.

Example: Heading-3

Explanation: The "h3" tag defines a third-level heading, structuring content beneath "h2" for better organization

Example: Heading-4

Explanation: The "h4" tag represents a fourth-level heading, helping structure content hierarchically under "h3" headings.

Example: Heading-5

Explanation: The "h5" tag defines a fifth-level heading, used for sub-sections under "h4" headings.

Example: Heading-6

Explanation: The "h6" tag defines the sixth-level heading, used for the smallest sub-section titles in content.

1. one
2. two
3. three

Explanation: The "ol" tag creates an ordered list in HTML, displaying items with numbers or letters.

• ONE
• TWO
• THREE

Explanation: The "ul" tag defines an unordered list in HTML, using bullet points for items.

"CpodingGita is the new library"

Explanation: The "blockquote" tag in HTML indicates extended quotations, usually displayed as indented blocks for emphasis.

Example: hr

Explanation: The "hr" tag in HTML creates a horizontal line, often used to separate content visually.

Explanation: The "table" tag in HTML defines a table, organizing data into rows and columns for clarity.

Inline Elements

Example: This is inside a span

Explanation: The "span" tag in HTML is used to style inline text or group inline elements

Example: Click here to open the webpage

Explanation: The "a" tag in HTML defines a hyperlink, linking users to other web pages or resources

Example: It is a bold text

Explanation: The "b" tag in HTML makes text bold without adding extra importance or emphasis to it.

Example: It is an italic text text

Explanation: The "i" tag in HTML displays text in italic style, typically for names, terms, or emphasis.

Example: It is a underlined text

Explanation: The "u" tag in HTML underlines text, often used to highlight or emphasize specific content visually.

Example: It is a strong text

Explanation: The "strong" tag in HTML indicates important text, usually displayed in bold for strong emphasis.

Example: E = mc²

Explanation: The "sup" tag in HTML displays text as superscript, appearing smaller and above the normal line.

Example: H ₂ O

Explanation: The "sub" tag in HTML displays text as subscript, appearing smaller and below the normal line.

Example: HTML

Explanation: The "abbr" tag in HTML defines abbreviations, showing full meaning on hover for better understanding.

Example: console.log("Hello World!!")

Explanation: The "code" tag in HTML displays inline computer code, typically using a monospace font style.

Comparison Table