Its time to learn how to make important textual stuff stand out from the crowd using some of the inline semantic tags available in HTML.
The Emphasise Element
The Headings Elements
The Strong Importance Element
The <strong> tag and its' closing </strong> tag for marking content with strong importance, seriousness, or urgency.
The Unarticulated Element
Creating A Webpage
Lets create a webpage for our formatting tags to see what they do!
- Open up your HTML editor or text editor, which in my case is Notepad++.
- Open a document if required.
- Copy and paste the following code into the document.
<!DOCTYPE html> <!-- Introduction to Semantic Tags --> <html lang="en"> <head> <title> HTML Semantic Tags </title> </head> <body> <h1>h1 -The daddy of all headings, one per page.</h1> <h2>h2 -Use this for section headings.</h2> <p>Normal text. <em>This text will be emphasised!!</em>Normal text.</p> <h3>h3 - Use this for subsection headings.</h3> <p>Free Coffee!! <strong>Caution: May be hot.</strong> <h4>h4 - These headings are generally the same size as normal text</h4> <p>People with cockney accents don't always pronounce their words <u>proper</u>.</p> <h5>h5 - These headings are smaller than normal text.</h5> <h6>h6 - This is the smallest heading.</h6> </body> </html>
Saving the document
Save the file as
View Page in Web Browser
Either navigate to the location you saved the
formattags.htmlfile to and double click the file. This will take you to the page in your default web browser, or from your web browser click File --> Open File and navigate to the file and open it.
After doing either of these you should see a similar webpage in your browser to the following screenshot:
The first thing to note is that each heading is on a separate line, whenever the browser sees a heading tag it uses a new line to display it on.
Lesson 6 Complete
In this lesson we took out first look at some of the inline semantic tags available in HTML, play around with the tags until your comfortable using them.
In the next lesson we learn all about ordered and unordered lists.
The <em> emphasis tag
The <h1> - <h6> heading tags
The <strong> strong importance tag
The <u> unarticulated tag