Structure your HTML Content

Structure your HTML Content is the section 4 of Beginner’s Guide to HTML.

In this section we’re discussing about Headings and Paragraphs, which are the most used concepts in organizing a text. When you create a text document or an article, it is necessary to create it with using headings and paragraphs because it will makes your article more standard and professional. So HTML provide elements to describe those paragraphs and headings which makes your content more standard.

HTML Headings

When you are writing a document, to represent its title names, chapter names and section names you need to use headings. There are 6 elements to represent headings in HTML. All six are vary from its sizes.

This is H1 heading

[code language=”html”]

This is H2 heading

[code language=”html”]

This is H3 heading

[code language=”html”]

This is H4 heading

[code language=”html”]
This is H5 heading
[code language=”html”]
This is H6 heading
[code language=”html”]

Depending on your writing style you can use any of these elements on your HTML document. But keep in mind following important facts when you use headings on your web page.

  • Don’t use headings to make your text big or bold. It should only be used for real headings. So it will displays as a one text chunk.
  • Headings are used to index the structure and content of your web pages by search engines. So try to have powerful headings to represent your content and it will make your web page search engine optimized (SEO).
  • When the users looked at your web page roughly, they’ll catch only with the headings. Thereby they take a rough idea about the content. So it is important to use headings to show the document structure.
  • Main heading should come with

    followed by

    and the less

 HTML Paragraphs

When writing a story, you always divide the whole text into few paragraphs according to what it says. HTML facilitates this feature by

tag.  Here is the demonstration text that we taken from Wikipedia about paragraph. And remember what we said about closing tags in the ‘Writing your HTML code‘ section. Don’t forget to close the elements.

[code language=”html”] A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences.Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

When using the paragraph element there are several important things you need to keep in mind. Try to learn them by the following examples.

[code language=”html”] This paragraph of text written with several lines. But the browser ignore’s it and keep all of them together.
[code language=”html”] This paragraph of text include more spaces inside. But you see browser ignores it.

Other important fact is if you try to resize the window you’ll see that number of paragraph lines will change. It means that you cannot define how many lines paragraph should include. It totally depend on the size of the window it appears. If you want to do it in specific lines, then there is another empty element called
line break that supports it.

Line Break

Using line breaks you can start a new line without starting a new paragraph. As it doesn’t have an end tag that’s why we called line break element is an empty element. When you are presenting songs and poems you’ll find this element a big help.

Here’s a part of a wonderful song by Joni Mitchell represented using paragraph tag and line break tag.

[code language=”html”] But now they only block the sun
They rain and snow on everyone
So many things I would have done
But clouds got in my wayI’ve looked at clouds from both sides now
From up and down, and still somehow
Its cloud illusions I recall
I really don’t know clouds at all

When structuring your content, another most important element is horizontal rule element

Horizontal Rule

is also an empty element. Which means it doesn’t come with a pair of tags. You can use this element when you want to divide sections. Such as to show that topic has changed. See how I end this article by using a horizontal rule. Here it goes.

So in this section we learned about few elements that can be used when structuring a HTML page. Specially how to do headings and paragraphing. Keep in remembered the important facts we mentioned. In the next section we’ll come with formatting the HTML content. And specially about commenting your work which is really important when it comes to maintaining the codes.


Learn how to Formatting your HTML content.

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.

Comment Below