Text is an essential part of any website, and understanding the fundamentals of text in HTML is crucial for anyone looking to create their own website. Giving text structure so that a browser can display an HTML document as intended is one of HTML’s primary functions. This article describes how to format a page of text using HTML, including how to create headings and paragraphs, emphasize words, utilize lists, and more.
Headings and Paragraphs
No matter what kind of text you are reading—a tale, a newspaper, a college textbook, a magazine, etc.—the majority of structured text consists of headings and paragraphs.
Content that is structured makes reading more convenient and pleasurable.
One of the most basic elements for text in HTML is the <p> element, which represents a paragraph of text. To create a paragraph, you simply need to enclose your text in <p> tags like this:
<p>Yes, I am a paragraph of text.</p>
<p>This is another paragraph of text, oh yeah.</p>
Another common element for text in HTML is the <br> element, which represents a line break. This is useful when you want to create a new line of text without starting a new paragraph. Here is an example:
<p>This is some text.<br>
This is some more text.</p>
A heading element must surround each heading:
<h1>I am the main title.</h1>
Six heading elements are as follows: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Each element in the document symbolizes a different level of content: <h1> stands for the main heading, <h2> for subheadings, <h3> for sub-subheadings, and so on.
The Establishment of Structural Hierarchy
For instance, the <h1> element here symbolizes the overall title, the <h2> elements are the titles of each chapter, and the <h3> elements are the sub-sections of each chapter:
See the Pen Sample HTML by Heksagon (@Heksagonnet) on CodePen.
What the elements involved signify is essentially up to you, as long as the hierarchy makes sense. Just a few best practises should be kept in mind when developing such structures:
- The top level heading, or
<h1>, should be used on each page. All other headings should be placed beneath it in the hierarchy. - Take extra care to use the headings in the hierarchy’s correct sequence. It makes no sense and will produce strange results, such as to use
<h3>elements to represent subheadings, followed by<h2>elements to indicate sub-subheadings. - You should try to utilize no more than three of the six heading levels each page, unless you feel it is absolutely necessary. Multiple-level documents (such as those with a deep heading structure) can be cumbersome and challenging to manage. If you can, spread the content out over several pages in these situations.
Semantics
Everywhere we look, we rely on semantics—we recognise the purpose of common objects based on prior knowledge; when we see something, we anticipate what it will be used for. So, for instance, we anticipate that a red traffic light means “stop” and a green light means “go.” If the incorrect semantics are used, things can rapidly become complicated.
In a related manner, we must ensure that the appropriate elements are being used to give our content the proper meaning, function, or appearance. The element also serves as a semantic element in this situation, giving the text it surrounds the function (or meaning) of “a top level heading on your page.”
<h1>This is a top level heading</h1>
It will have a large font size by default in the browser to resemble a header (although you could style it to look like anything you wanted using CSS). More crucially, search engines and screen readers will utilize its semantic value in a variety of contexts.
On the other hand, any element might be made to resemble a top-level heading. Take a look at the following:
<span style="font-size: 32px; margin: 21px 0; display: block;">Am I a top level heading?</span>
This element is a <span>. It has no semantics. When you want to apply CSS on content (or apply JavaScript to it) without providing it any additional significance, you use it to wrap the content. (More information on them will be provided later in the course.) Although we gave it some CSS to make it look like a top-level heading, it will not receive any of the additional advantages mentioned above because it has no semantic implication. Use the appropriate HTML element for the task at hand.
Lists
An HTML list is a group of items that are related and are displayed in a specific order. There are three types of lists in HTML:
Unordered lists: These lists are created using the element. Each list item is marked with a bullet point.
Ordered lists: These lists are created using the element. Each list item is marked with a number or letter.
Definition lists: These lists are created using the element. Each list item consists of a term and a description.
Here is an example of an unordered list:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
And here is an example of an ordered list:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
You can also nest lists inside of other lists to create a hierarchical structure.
Emphasis and Importance
Emphasis and importance are important concepts in HTML because they allow you to draw attention to certain parts of your content and convey meaning to your readers. There are a few different ways to achieve this in HTML.
One way is to use the <em> and <strong> elements. The <em> element represents emphasized text, and is typically displayed in italics. The <strong> element represents important text, and is typically displayed in bold. Here is an example:
<p>I <em>really</em> like ice cream.</p>
<p>I <strong>absolutely</strong> love ice cream.</p>
Another way to add emphasis and importance is to use the <mark> and <ins> elements. The <mark> element represents highlighted text, and is typically displayed with a background color. The <ins> element represents inserted text, and is typically displayed with an underline. Here is an example:
<p>I <mark>really</mark> like ice cream.</p>
<p>I <ins>absolutely</ins> love ice cream.</p>
Finally, you can use the <abbr> element to represent an abbreviation or acronym. By adding a title attribute to the element, you can provide a full expansion of the abbreviation for readers who may not be familiar with it. Here is an example:
<p>The <abbr title="World Health Organization">WHO</abbr> is a specialized agency of the United Nations.</p>
There are several ways to add emphasis and importance to your HTML content. By using the right elements and attributes, you can effectively convey meaning to your readers and make your content more impactful.
Summary
In conclusion, text is a fundamental element of HTML, and understanding how to use the various elements and attributes available to you can help you create effective and meaningful content for your website.