HTML Text and Formatting

Text is the most important part of any website. It is the content that users read, understand, and interact with. Without text, a website has no meaning or value and is completely useless.

In HTML, text is displayed using elements such as:

• Headings (<h1> to <h6>)
• Paragraphs (<p>)
• Lists (<ul>, <ol>)
• Inline elements (<span>, <strong>, etc.)
• Advanced elements (<blockquote>, <cite>, <abbr>, etc.)

Types of Text in HTML

• Structural Text - Structural text tells the browser and search engine how the text is arranged on a website. It defines the layout and organization of the content.

  Common structural tags:

  <h1>Main Heading</h1>
  <p>This is a paragraph</p>
  <ul>
  <li>List 1</li>
  <li>List 2</li>
  </ul>
  

  Try it Yourself

  Why is structural text important?

  • It helps improve the readability of the code.
  • It helps search engines like Google understand the content.
  • It organizes the content clearly.
• Semantic Text - Semantic tags add meaning and importance to content instead of just styling it. If these tags are not used, it becomes difficult to understand the content.

  Common semantic tags:

  <p>
  <strong>Important</strong> and <em>emphasized</em> 
  text with <mark>highlight</mark>
  </p>
  

  Try it Yourself

  Why does semantic text matter?

  • It helps improve SEO.
  • It makes the content meaningful and easy for users to understand.
• Presentational Text - Presentational text focuses only on the appearance of the content. It does not consider the meaning of the content.

  Common presentational elements:

  • <b> Makes the text bold </b>
  • <i> Makes the text italic </i>
  • <u> Underlines the text </u>

Advanced Text Elements

These elements are semantic tags that do not focus on how the content looks. Instead, they describe the meaning of the content, making it easier to understand.

Why are semantic tags important?

• Improves SEO ranking - Search engines like Google do not see your website like humans; they analyze the HTML code. Semantic tags help search engines understand the content better.
• Increases accessibility - Accessibility means your website can be used by:
  • Visually impaired users
  • Screen reader users
  • People with disabilities
• Makes the code clean and structured - Semantic tags help make your code:
  • Easy to understand
  • Easy to debug
  • Easy to maintain

Semantic Tags

• <blockquote> - The <blockquote> tag is used to represent long quotations taken from another source. It indicates that the content is not original and is referenced from another source.

  Example:

  <blockquote>This is a blockquote tag used for representing long quotations.</blockquote>

  Try it Yourself

  How it works:

  • Adds indentation by default.
  • Displays content as a separate block.
• <cite> - This tag is used to define the source or title (such as a book, author, or other creative work).

  Example:

  <p><cite>Ruskin Bond</cite></p>

  Try it Yourself

  How it works:

  • Typically displayed in italics.
  • Helps indicate who said it and where it comes from.

  Combined Example:

  <blockquote>
  Stay hungry, stay foolish.
  </blockquote>
  
  <cite>Steve Jobs</cite>
  

  Try it Yourself
• <abbr> - The <abbr> tag defines abbreviations and acronyms and provides their full form.

  Example:

  <p><abbr title="HyperText Markup Language">HTML</abbr> is a markup language.</p>

  Try it Yourself

  How it works:

  • The title attribute is used to show the full form when hovered.
  • It helps users understand unfamiliar terms.
• <address> - The <address> tag is used to represent the contact information of the author or owner of a website.

  Example:

  <address>
  Written by Ruskin Bond
  Email: example@gmail.com
  Location: USA (United States of America)
  </address>

  Try it Yourself

  Key characteristics are:

  • It is usually displayed in italics.
  • It should only be used for contact-related information.
  • It should not be used for general text.
• <code> - The <code> tag is used to display small pieces of code within a sentence.

  Example:

  <p>Use the <code>&lt;p&gt;</code> tag for paragraphs.</p>

  Try it Yourself

  How it works:

  • Displays the text in a monospace font.
  • It displays the text differently from other text.
• <pre> - The <pre> tag is used to display preformatted text, preserving:
  • Spaces
  • Line breaks
  • Indentation

  <pre>
  function greet() {
      console.log("Hello World");
  }
  </pre>
  

  Try it Yourself

  How it works:

  • Displays the content exactly as written.
  • It is ideal for code blocks.

Conclusion

Text is the foundation of every website. No matter how advanced the design or functionality becomes, it is ultimately the text content that communicates information, delivers value, and engages users. In HTML, text is not just about writing words—it is about structuring, formatting, and giving meaning to those words in the most effective way.