You need to organize the web content otherwize, it will not look good. Web content includes a heading, a paragraph, a figure, and so on. HTML 5 came as a blessing to the web developers as it allows you to organize this content in a better way. Here is how you can organize page content with supported elements of HTML for a better online presence of your website.

Broke the Content into Parts Using Sections and Articles 

You can easily use the larger documents when they are broken down into smaller parts. Similarly, you can divide a long web document into meaningful sections with the help of a section element. Every section has a heading and meaningful content.

Here is an example of how a large document is divided into 2 sections according to the resource type. 

 

Wallart Page

 

 

• …

 

Online Wall Arts

These are the best wall art.

 
• …

 

Moreover, you can use the article element for independent work or the content that can be reused in another context as well. It is a useful element for blog posts, newspaper articles, magazines, etc. Here is an example to explain how a long article can be broken down into smaller sections:

 

Get to Know Art Prints

 

History of Wall Art

 

 

…

Trending Wall Art

…

 

 

 

Getting confused between the section and article elements is quite common. However, if the content is self-contained and can be used outside the context, then it is known as an article.

Use Navigation  Element

The nav elements help developers identify navigation for a website. It is done to make the content explicitly clear and meaningful. 

 

Please note that not all link lists should be wrapped in the nav tags. It should only be used in the links that offer primary website navigation or a lengthy article. 

Do Not Forget Headers and footers 

The header and footer are also crucial elements of HTML 5.

Headers 

The header element helps in introducing the matter that appears at the start of a webpage. Here is an example:

 

Nuts about Web Fonts

 

… page content … 

When used in an individual article, the header might include the article title, author, and publication date.

Footers 

The footer is used at the end of the document. It may or may not apply to the whole document. It includes details like navigation, copyright information, author, etc. Here is a simple example:

 

Addresses 

The address element is used to develop a contact information section in the document. It is placed at the bottom of the document in the footer element. Apart from the mailing address, it can also be used for the author’s contact information. Here is an example:

 

Contributed by Jennifer Robbins , O’Reilly Media

 

The Inline Element 

The inline elements are displayed in the text flow but do cause line breaks. 

Text-level (inline) elements 

There are a couple of text-level elements that are called inline elements. 

Emphasized text 

The em element is the part of the sentence that need to be emphasized. For instance:

Matt is very smart.

Matt is very smart.

 

The first part says who is smart. And the second part explains how smart he is. The em elements are displayed in italics. 

Important text 

The strong element is a word that is important in a sentence. It identified the part of a sentence that needs extra attention.

When checking out of the hotel, drop the keys in the red box by the front desk .

 

This element appears in bold text

The b,u, i,s are bold, underline, italics and strikethrough. These elements are an integral part of HTML 5. Here are some examples of these elements and their right usage:

• CSS alternative: For bold text, use font-weight . Example: font-weight: bold 
• CSS alternative: For italic text, use font-style . Example: font-style: italic Example:

  Simply change the font and Voila! , a new personality.

   
• CSS Property: To put a line through a text selection, use text-decoration . Example: text-decoration: line-through; 
• CSS Property: For underlined text, use text-decoration . Example: text- decoration: underline 

Add Abbreviations and Acronyms 

The abbr element provides useful information for screen readers, search engines, and other devices. For instance, the shortform of Connecticut is Conn. Here is an example:

pts.
ATF  

Add Citations  to Content

The cite element helps in identifying the reference to another document like a magazine, book, etc. They are usually italics.

This article was inspired by The Complete Manual of Typography by Jonas.

 

How to Add Breaks 

you can add breaks in the page content to make it look more attractive, easy to understand, and readable. Here is how to add breaks in the web page content.

Line breaks 

A line break ( br ) is inserted to break the content flow. It is used for poetry or addresses. Just add the br element (
in XHTML) in the flow of text where you want a break to occur, as shown in here and in Figure 5-15. 

So much depends
upon

a red wheel
barrow

 

Word breaks 

The wbr element lets one decide where to break a word. However, it only happens when there is no ample space for the word to display.

The biggest word you’ve ever heard and this is how it goes: supercali fragilistic expialidocious !

 

Divide it up with a div 

The div element helps in creating a logical grouping of the content. Here is an example:

 

The div element is also used in breaking a page into different sections. Here the paragraphs and heading are enclosed in a div called the “news” division. 

Final Words

If you want to grow your business, then it is very important to organize web pages for a better online presence. HTML elements are the best way to organize the web page. If you are new to web designing or you want to create an impressive web page, then Symphony Software can help. We are a team of skilled professionals and experienced programmers who can help you with the best website design. Contact us now !