Headings, Text, Formatting & Colors

Headings use <h1> to <h6>. <h1> is the biggest and most important — use only one per page. <h2> is for sections, then <h3>, and so on.

HTML Headings

Headings use <h1> to <h6>. <h1> is the biggest and most important — use only one per page. <h2> is for sections, then <h3>, and so on.

Do not skip levels (like h1 then h4) just to make text big. Use CSS for size later. Headings help Google and screen readers understand your page.

Real-life example: Headings are like chapter titles in a textbook. h1 is the book name, h2 is each chapter, h3 is sections inside a chapter.

Heading levels

<h1>Rishtaara Learning Hub</h1>
<h2>HTML Course</h2>
<h3>Lesson 3: Text</h3>

HTML Paragraphs

Use <p> for normal text blocks. Each paragraph starts on a new line with space above and below.

Pressing Enter many times in your editor does not create extra space in the browser. Use separate <p> tags or CSS for spacing.

Real-life example: Each <p> is one paragraph in your school essay — one idea, then the next paragraph below it.

Paragraphs

<p>HTML is easy to learn.</p>
<p>You can build real websites with practice.</p>

HTML Styles (inline)

You can add quick style with the style attribute on any element. It sets color, font size, background, and more.

Inline style is fine for learning, but later you will move styles to CSS files for cleaner code.

Real-life example: Inline style is like using a marker directly on one word in your notebook. CSS file is like a rule book that styles the whole notebook.

Inline styles

<p style="color: blue; font-size: 18px;">Blue text</p>
<p style="background-color: yellow;">Highlighted note</p>

HTML Text Formatting

Format text with semantic tags: <strong> for important, <em> for emphasis, <mark> for highlight, <small> for fine print, <del> for deleted, <ins> for inserted.

<b> and <i> only change look. Prefer <strong> and <em> when meaning matters.

Real-life example: Formatting is like highlighter pens in notes — red for important, green for examples, yellow for remember-this.

Formatting tags

<p><strong>Warning:</strong> Save your file often.</p>
<p>Price: <del>₹500</del> <ins>₹399</ins></p>
<p><mark>Exam on Monday</mark></p>

HTML Quotations

Use <q> for short inline quotes. Use <blockquote> for long quotes on their own block. <cite> names the source title.

<abbr title="Full form"> shows the full meaning when the user hovers.

Real-life example: blockquote is like copying a famous quote on a separate line in your project file, with the author name below.

Quotations

<p>He said <q>Practice daily</q> and left.</p>
<blockquote>
  The only way to learn HTML is to write HTML.
</blockquote>
<p><abbr title="HyperText Markup Language">HTML</abbr> is fun.</p>

HTML Comments

Comments use . The browser hides them. They help you and other developers remember why code was written.

Do not put secrets in comments — anyone can see them in View Source.

Real-life example: Comments are like pencil notes in the margin of your textbook — only for you, not part of the final exam answer.

Comments

<!-- Navigation section starts -->
<nav>
  <a href="/">Home</a>
</nav>
<!-- TODO: add footer later -->

HTML Colors

Colors can be names (red, blue), hex (#ff0000), rgb(255, 0, 0), or hsl(0, 100%, 50%). Use them in style or in CSS.

Pick good contrast — dark text on light background is easiest to read.

Real-life example: Choosing colors is like picking uniform and house colors — they should look good together and be easy to read from far away.

Tip: Use a free tool like coolors.co to pick matching color sets for your Rishtaara project page.

Color values

<p style="color: #2563eb;">Hex blue</p>
<p style="color: rgb(34, 197, 94);">RGB green</p>
<p style="background-color: hsl(45, 100%, 90%);">Soft yellow background</p>