Welcome to Lesson 4 - HTML Headings: Six Levels Deep
How do you interpret an HTML heading? HTML heading is exactly what you expect it to be… either a title or a sub-title. Texts enclosed with the heading tags - <h1> - are displayed in bold cases and the letter size is solely dependent upon the number of the heading (1-6). HTML heading numbers range from 1 - 6 and the text sizes go in descending order i.e. 1 being the largest text size and 6 being the smallest. Visit any web page, and you'll come across several headings, each under a different section and appearing in different sizes and, even in different colours and fonts. HTML tags help you in distinguishing headings in six different levels of significance. Finally, it is your browser that determines the exact font and size for display.
Not a comprehensive HTML heading rector, this lesson has been overtly designed to help you identify the different levels of headings and the associated tags at the very basic level and placing the different level headings within your HTML document and subsequently view the changes within your web browser.
Within your HTML document, you've created headings by "tagging" certain chunks of text with heading tags. Following is the general format for an HTML heading tag:
<hN>Put in the Heading Text</hN>
In the aforesaid format, N refers to the heading numbers ranging from 1 to 6, numbers that identify the heading size. An example of a sample web page displaying different sizes of headings is as follows:
HTML Documents (H1)
Modifying an HTML Document (H2)
Different HTML Standards (H3)
What are HTML TAGS? (H4)
Creating an HTML Document (H5)
Importance of HTML (H6)
Headings are an outstanding approach to fragment expansive text information into smaller, easy-to-read sections. However, overuse is not at all recommended, as it'll make your document appear baffling. It is important to use the heading tags quite prudently, keeping them precise and to the point. It is in the very first line of a home page that headings are generally used, which in essence, becomes the headline for your document. Inserting headings into your HTML document is no big deal, and the same can be implemented by tagging the set of instructions as follows:
- First of all re-open your workspace (if not opened).
- Go to the text editor program.
- Open the HTML text file that was created and subsequently modified (the file that was created in our earlier sessions).
- Use the biggest headline tag <h1> for the title display, so that it stands apart from the rest. Now, enter your title text just above the existing body text and after the </head><body> tags.
- With the title headline "tagged", you may want to create other headings for future sections of your web page. Enter the desired headlines under <h2> and <h3> tags. For example, <h2>Introduction</h2>, <h2>Research Project</h2>, <h3>References</h3> etc.
- Once you're done, save the changes in your text editor.
- Finally, return to your browser, open and reload the HTML file for the document to show up the headline changes made.
When "tagging" HTML headlines, it should however be noted that on the workstation you're using, you may employ your browser settings to define the headline fonts and/or sizes to be displayed. HTML codes merely delegate the header type (h1 to h6); but the display of the same is solely controlled by the user of the web browser.
Original Authors:
Edit Update Authors: M.A.Harris
Updated On: 21/05/2009
