Comments and Headings

Comments in HTML

Comments are tags that will not be displayed by the browser. These comments can help the author of the HTML document to remember why thinks have been structured this way.

The following example show a very short comment:

 

 <!-- no comment :-) --> 

Now we've learned to comment our sourceode! Because we do, we now add comments to our HTML:

 

<html>
   <!-- The html document begins -->
   <head>
     <!--  the head of the document starts -->
     <title>
       Hallo Titel
     </title>
   </head>
   <body>
     <!-- the content of the html document -->
     Hello world
   </body>
</html>


As you see, we've added a lot of comments to our document, but this should show you, that comments are important.


When we save the document and re-open it in the browser, we recognize that the styling and content of the website did not change.


But the content of our website is still very boring. So it is time to extend and structure our content with some additional HTML tags.

 

Font Formatting with HTML

In HTML there a a lot of options to influnce to look of the text. Beside the look, the structure is much more important. By marking a text line as a headline, the browser and also search engines can understand, that this text is a headline.

 

You should use these headlines (h1 - h6) to mark headings and give these headline another semantic relevance.In the past also tags like "font" where used to configure the visual style of the page. Nowadays tags should only be used for the semantic markup and for visual styling CSS (Cascadingstyle sheets) should be used.

Headings - Headlines in HTML

In HTML there is the "h1-h6" tag to define a headline. This tag is not self-closing, so you need to add a start and a end text.

The number (1-6) defines the level of a headline. H1 is the most important headline and will be rendered larger by the browser. H6 is the headline with the smalles importance and will be rendered smaller.

Here you see the 6 different headline types by example:

 <h1> heading 1 / structur level 1 </h1>
 <h2> heading 2 / structur level 2 </h2>
 <h3> heading 3 / structur level 3  </h3>
 <h4> heading 4 / structur level 4 </h4>
 <h5> heading 5 / structur level 5 </h5>
 <h6> heading 6 / structur level 6 </h6>

Adding headlines to the HTML document

h1 ist the most important and largest heading. It only makes sence to use the headings inside the <body> tag, because they have no visual or semantic impact in the other parts of the page.

 

To test this new tag, we add it to our previous page and check how it looks.

 

To do this, we modify the source code in the following way:

<html>
  <!-- beginning of html document -->
  <head>
   <!-- head of html document -->
   <title>
    Hello Title
   </title>
  </head>
  <body>
   <!-- content of the html document -->
   <!-- heading -->
   <h1>My second page</h1>
  </body>
 </html> 


When we save our modifications and reopen the page it will look like this:

 

Navigation