Skip to content
preservelog

Text Elements

Let us take a look at the below New York Times news paper from 90’s

First color print of newyork times

We can see each news story have different headings in different sizes and styles. Our mind automatically attributes the significance of each story in different ways. What we see here is the proper usage of a text and its hierarchy done correctly as per Editors’ Choice.

While building for web also how we display the text matters a lot, be it the the styles or the size. It makes the reading experience easier and more enjoyable.

Let us look at the elements HTML provides that helps in displaying text.

Headings (<h1> to <h6>)

Section titled “Headings (<h1> to <h6>)”

Headings are used to structure the content of a webpage hierarchically. There are six levels of headings, from <h1> (most important) to <h6> (least important).

Search engines use headings to understand the structure and content of a page. An <h1> is typically used for the main title of the page and carries the most weight, use only h1 per page. While adding header elements, make sure not to skip the heading levels.


Heading elements come with default styling, different font sizes but do not use header just for the styling purpose but to maintain the hierarchy. If you want to do similar styling on text elements that are not of hierarchical importance, use CSS to style.


Proper hierarchy also helps screen readers to navigate content by understanding pages organization and easy navigation to sections.

Let’s look at how-to create headings. Copy the following code to <body> element’s content to the index.html we have created earlier.

<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Section Heading</h3>
<h4>Subsection Heading</h4>
<h5>Minor Heading</h5>
<h6>Least Important Heading</h6>

Above snippet gets rendered out like this. You can see the hierarchy in headings over here.

heading elements h1-h6

Paragraph (<p>)

Section titled “Paragraph (<p>)”

The paragraph element is used to structure blocks of text. It comes with its own default styling browsers typically add some margin above and below. Paragraphs automatically start on a new line

<p>
  P element is used for rendering blocks of text. Content inside can be in
  multiple lines. It comes with its own default styling , adding some space
  above and below the content.
</p>

The above snippet gets rendered out like this. paragraph element example

Line Breaks (<br>)

Section titled “Line Breaks (<br>)”

The line break element is used to create a single line break within text.It’s an empty element without a closing tag (since no content is needed). For accessibility, avoid using multiple <br> tags to create larger gaps use CSS margins instead.

Example:

<p>
  P element is used for rendering blocks of text. Content inside can be in
  multiple lines.
  <br />
  It comes with its own default styling , adding some space above and below the
  content.
</p>

Content inside the <p> element gets split into two lines. Check the above paragraph element section to see the difference.

break element example

Horizontal Rules (<hr>)

Section titled “Horizontal Rules (<hr>)”

The horizontal rule element is used to create a thematic break between content sections. A horizontal line gets rendered, signifying the end of a section.


Use it for thematic purpose not for visual decoration,can be styled with CSS to enhance the appearance of <hr /> element It is an empty element with no closing tag.


Screen readers typically announce an <hr> as a “separator”, so if you are using it for decoration try creating the style using css. For example borders on a div element, this will enhance the accessibility of the content.

<p>This is the end of one section.</p>
<hr />
<p>This is the beginning of another section.</p>

The above snippet gets rendered out like this.

horizontal rule element example

While building websites, use the above elements thematically rather than styling purpose. if you want to achieve similar style as the default style of these elements for decoration purpose, use CSS to do the same. consider how your content will be perceived by both search engines and assistive technologies.