Text and Content

Master headings, paragraphs, links, lists, quotations, code, and inline semantic elements.

Headings

HTML provides six heading levels from <h1> through <h6>. Headings create a hierarchy for the document. Use headings based on semantic importance rather than visual size. CSS should control visual sizing.

Heading Hierarchy

<h1>Web Development</h1>\n<h2>Frontend</h2>\n<h3>HTML</h3>\n<h3>CSS</h3>\n<h2>Backend</h2>

💡 The hierarchy communicates the relationship between major sections and subsections.

Key Takeaways

Use headings to represent document hierarchy.
Do not choose headings merely because they look visually large.

Knowledge Check

Which element represents the highest-level heading?

Paragraphs and Line Breaks

Use <p> for paragraphs. Use <br> only when a line break is semantically meaningful, such as within an address or poem. Do not use repeated <br> elements to create layout spacing; CSS is designed for that purpose.

Paragraph and Line Break

<p>This is the first paragraph.</p>\n<p>This is another paragraph.</p>\n<address>123 Main Street<br>Chennai, India</address>

💡 Paragraphs represent blocks of prose, while br creates an intentional line break within content.

Key Takeaways

Use p for paragraphs.
Use br for meaningful line breaks rather than layout.

Knowledge Check

What should normally be used for spacing between sections?

Links and Navigation

The <a> element creates hyperlinks. Its href attribute identifies the destination. Links can point to absolute URLs, relative paths, fragments, email addresses, or telephone numbers. Meaningful link text helps users and assistive technologies understand the destination.

Different Link Types

<a href="/about">About Us</a>\n<a href="#contact">Contact Section</a>\n<a href="mailto:hello@example.com">Email Us</a>\n<a href="tel:+919999999999">Call Us</a>

💡 The href value determines the type and destination of the link.

Key Takeaways

Use a elements for navigation between resources.
Use descriptive link text instead of vague text such as 'click here'.

Knowledge Check

Which attribute specifies the destination of an anchor?

Ordered, Unordered, and Description Lists

Use <ul> for unordered lists, <ol> for ordered lists, and <li> for list items. <dl>, <dt>, and <dd> are useful for terms and their descriptions.

HTML Lists

<ul>\n  <li>HTML</li>\n  <li>CSS</li>\n</ul>\n\n<ol>\n  <li>Install Node.js</li>\n  <li>Create the project</li>\n</ol>\n\n<dl>\n  <dt>HTML</dt>\n  <dd>Structures web content.</dd>\n</dl>

💡 Each list type communicates a different relationship between items.

Key Takeaways

Use ul when order does not matter.
Use ol when sequence matters.

Knowledge Check

Which element represents an ordered list?

Inline Semantic Elements

HTML provides inline semantic elements such as <strong>, <em>, <mark>, <small>, <abbr>, <time>, <code>, <kbd>, <samp>, and <var>. These elements communicate meaning rather than simply controlling appearance.

Inline Semantics

<p><strong>Important:</strong> Save your work.</p>\n<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>\n<p>Use the <code>fetch()</code> API.</p>\n<p>The event occurs at <time datetime="2026-10-09">October 9, 2026</time>.</p>

💡 These elements encode meaning that browsers and assistive technologies can interpret.

Key Takeaways

Prefer semantic elements over styling-oriented markup.
Meaningful HTML improves accessibility and maintainability.

Knowledge Check

Which element represents strong importance?

Headings

Paragraphs and Line Breaks

Links and Navigation

Ordered, Unordered, and Description Lists

Inline Semantic Elements

STAY UPDATED WITH BYTES!