We’re discussing about different heading in HTML documents in this post. Last two posts were about HTML Paragraph and how to format them. These posts are the parts of HTML Preparation Session for 2016 Computer Operator Examination, however, they can be equally useful for anybody willing to learn webpage designing.
Following are the links to visit previous posts of this series:
- Getting Started -> Tutorial | MCQs
- HTML Document Structures -> Tutorial | MCQs
- Tags Attributes & Elements -> Tutorial | MCQs
- HTML Paragraph -> Tutorial | MCQs
- Paragraph Formatting -> Tutorial | MCQs
HTML Headings <h1>, <h2> … <h6> tags
Headings in HTML are important mainly in two ways – for readers & for search engines.
Readers skim your document through your headings. It is important to use headings to show the document structure. Headings are also important for Search Engines. They depend heavily on the headings to understand the subject matter and the structure of document.
Visual readers are able to identify headings by scanning pages for text of a larger size or a different color/font face. Blind users on a screen reader are not able to see these visual changes, so increasing the font size is not a sufficient cue. Instead, the headings must be semantically “tagged” so that a screen reader can both identify headings and provide a list as a page or document table of contents.
Therefore, use HTML headings to present your document structure and not to make text bold or larger.
HTML support six level headings – <h1>, <h2>, <h3>, … <h6>. The <h1> tags the main heading or the most important heading. <h2> tags the sub heading of main heading. <h3> is the subheading of subheading and so on.
Note that the h1 tag is only used once, as the main heading of the page. h2 to h6, however, can be used as often as desired, but they should always be used in order, as they were intended. For example, an h4 should be a sub-heading of an h3, which should be a sub-heading of an h2.
A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading.
Heading Attributes
HTML Headings <h1>, <h2>, etc. supports align attribute. Use left, center, right and justify to align headings as required.
However in HTML 5, even align attribute is not supported. You are suggested to use Style (CSS) to align and perform other formatting to headings.
Apart from align attribute, Heading tags support html global attributes.
Example for HTML Headings:
<body>
<h1>Fundamentals of Computers</h1>
<p style=”text-align:justify”>In this chapter we discuss about the theoritical topics such as history of computers, generation, classification, computer architecture, hardware, software, computer security, computer networking and so on</p>
<h2> History of Computers</h2>
<p style=”text-align:justify”>History of computers ranges since the ancient times to the recent present and thus it is studied in three distinct phases – early counting devces, mechanical calculating devices, electronic computers.</p>
<h3>Early Counting Devices</h3>
<p style=”text-align:justify”>The first problem of mankind, I guess, was to count and remember the amont of property they had. Thus they started scratching on rocks, making knots in ropes or collecting pebbles to representing the amount they had. This led to the invention of numbers and it welcomed some early counting devices such as Abacus.</p>
<h3>Mechanical Calculating Device</h3>
<p style=”text-align:justify”>Now the problem of mankind to count and remember changed to calculate. Adding numbers, calculating multiplication, division and square roots invented slide rule, nappier’s bones, Pascaline and so on.</p>
<h3>Electronic Computers</h3>
<p style=”text-align:justify”>Finally, there came the computers. MARK-I, ENIAC, EDSAC, EDVAC, UNIVAC are some early computers. As the popularity of computers went on rise, there appeared more powerful and smaller computers to introduce three distinct kind of Computers – Mainframe, Mini and Micro Computers.</p>
<h4>Mainframe Computers</h4>
<p style=”text-align:justify”>Mainframe are the largest computers that can support hundreds of users simultaneously. They are used in large companies.</p>
<h4>Mini Computers</h4>
<p style=”text-align:justify”>These are the medium sized computers, smaller than mainframes but large enough to support 50 or more users concurrently.</p>
<h4>Micro Computers</h4>
<p style=”text-align:justify”>Micro Computers are the smallest sized computers. Because it is designed for single person, it is also called personal computers (PCs)</p>
<h2>Computer Generations</h2>
<p style=”text-align:justify”>Computers are classified into five distinct generations.</p>
<h3>First Generation</h3>
<p style=”text-align:justify”>First generation computers used vacuum tubes as their main electronic component. They are the large in size as they accommodate thousands of vacuum tubes.</p>
<h3>Second Generation</h3>
<p style=”text-align:justify”>Second generation computers used transistors as their main electronic component. They are still large in size</p>
</body></html>
Relevant Video for HTML Heading
Points to remember
- Headings tag the topics in HTML documents. You can use <h1> to <h6> tags depending upon whether the topic is main heading or sub heading.
- Heading tags are paired tags and thus closing tags such as </h1>, </h2> etc are mandatory.
- <h1> tag defines the most important heading in document and there should be not more than one <h1> in one document.
- <h2> to <h6> tags can be used as many times as required, but they should always be used in order as they were intended.
- Heading tags should not be used for formatting but rather to present document in structure.
- Importance of HTML headings is both for readers as well as for search engines.
- Writing HTML documents using proper heading tags makes screen readers identify headings.
- Heading element implies (i) font changes (ii) paragraph breaks before and after, and (iii) white spaces
MCQ Questions from this chapter
You can find the multiple choice questions from this topic visiting the link below. I’ll answer these questions in next session. However, I’ve presented the correct answers of previous set in that page.
https://mcqsets.com/mcq-questions-2/html-web-page-designing/html-headings-mcq-questions/
Your Questions & Confusions
- Visit following link
/website-designing/ - Log in using your Facebook, Google, Yahoo accounts. (Use the Log in buttons on right sidebar. If you are viewing this page in mobile device, you’ll find the login buttons below)
- Post your questions or confusions. You are equally welcomed to answer other member’s questionsthere.
Comments, Suggestions & Feedback
We’ve a comment form below this post. You’re most welcome to write your comments, suggestions or feedback. They are highly appreciated.
Zack says
I wish I will get tutorials of “programming”
Suresh Khanal says
Zack, we are not starting programming anytime soon. I’m still focused on PSC syllabus for Data Entry Supervisors & Computer Operators.