Working with Text

Effectively displaying text is a fundamental aspect of web development. HTML provides a set of tags to structure and format textual content, making our web pages clear and engaging.

Using headings and paragraphs

Headings and paragraphs are essential for organizing content:

• Headings (<h1> to <h6>): Define titles and subtitles, creating a hierarchical structure.

  • <h1> is the most important heading, usually the main title.

  • <h2> to <h6> represent headings with a decreasing level of importance.

• Paragraphs (<p>): Enclose blocks of text, representing standard paragraphs.

In the example above, the headings create a clear content hierarchy, where <h1> represents the main title of the page, and <h2> and <h3> denote subsections. The <p> tags define paragraphs under each heading.

Formatting text

HTML provides tags to emphasize or highlight parts of our text.

Bold text

The <strong> tag is used to make text bold, indicating strong importance.

Similar to the <strong> tag, there is a <b> tag to bold text purely for stylistic reasons, without adding any semantic meaning or importance.

Italic text

The <em> tag italicizes text, indicating emphasis.

Line break

The <br> tag inserts a line break without starting a new paragraph. It's an empty tag, meaning it doesn't need a closing tag.

The <span> tag

The <span> tag is an inline container used to mark up a part of a text, or a part of a document. It doesn’t inherently represent anything, but it can be useful when we want to manipulate a specific section of text using CSS or JavaScript.

In the example above, the <span> tags allow us to work with specific words within a paragraph.

Try it yourself

With an understanding of these tags, we’re now ready to format text in an HTML document. A sample code snippet is provided below. Feel free to change the code and play around. Try creating your own mini-article using headings, paragraphs, and the formatting tags we've discussed. You can also experiment with different combinations to see how they affect the appearance.

In the sample code provided above, Alex and HTML are displayed in bold to emphasize importance, while “coding” and “CSS” are italicized to indicate subtle emphasis. The <br> tag inserts a line break, moving It’s an exciting journey! to a new line within the same paragraph for better readability. Additionally, the <span> tags style the text as blue and green.

Note: The <span> tag is purely structural and relies on external styling (the style attribute in this case) to produce any visual effects, unlike <em> or <strong>, which have inherent browser-default styles like italic or bold.

What to observe

Press the "Run" button in the code snippet button to see what the web page looks like. Observe the following:

• Headings: Notice how <h1> is larger than <h2>, establishing a visual hierarchy.

• Bold and italics: See how <strong> and <em> affect the words “Alex” and “coding.”

• Line breaks: Observe how <br> creates a new line within a paragraph.

• Plain span: Try removing the style attribute from the <span> tag and observe how the text reverts to its default appearance.

By experimenting with these tags, we’ll gain confidence in structuring and styling text on our web pages. Keep practicing to discover how these basic elements can enhance the readability and appearance of our content.