HTML tags in Joomla

shane dillon

When creating a web page in Joomla it is best to use the standards HTML Tags and not specify any additional style information.  This allows the Joomla Template to display the content in the same way as the rest of the site.

 

This section describes these basic HTML Tags 

• 
e.g. <h1>this is a heading</h1>. Note the start and end tag. 

Most of the time you must have an end tag to complete the start tag. 

• 
<br> or <br /> is a break line 

• 

<hr> or <hr /> is a horizontal line 

These are best written <br /> The / indicating the tag has ended. i.e. the tag starts and ends in one 

go. The <br> will work but does not obey the latest standards. 

The next section shows some of the more usual tags, the Joomla Editor will create these 

automatically. 

The section after the Tags is a web page version of these tags. Note the browser displays them with 

a default style as defined by the web site. The system defines the format of each of the tags in 

another file called a stylesheet. So our pages only have to think about content and not presentation. 

Using Joomla the header and footer stuff in an html page is provided by Joomla. Hence the pages 

you create only contain the basic tags. Lastly here is a link to information about all the HTML tags 

http://www.w3schools.com/tags/default.asp 

Please don't think you need to know all these. Your pages should not have most of them. The 

sample below has 90% of what you should be aware of. The link is so you can check on any tags 

that appear that you want to understand. 


HTML Tag Sample 


<h1>This is a level 1 heading</h1> 

<h2>This is a lower heading</h2> 

<h5>This is level 5 heading</h5> 

<p> This is a basic paragraph with some text and special " characters &#39; in it<br /> and a break 

to a new line. </p> 

<p> This line has some <b>bold </b>text.  </p> 

<ol>     

     <li>This is the first line of an ordered list</li>     

     <li>Second line</li> 

    <li>third line </li> 

5 Joomla Websites04

</ol> 

    <p> </p>     

<ul>         

<li>This is the first line of an unordered list</li> 

        <li>Second line</li> 

        <li>third line </li> 

    </ul> 

<hr> 

    <p align="left">This text is on the left    </p> 

    <p align="center">     This text is in the middle 

    </p> 

    <p align="right"> 

    This text is on the right 

    </p> 

    <table border="0"> 

        <tbody> 

            <tr> 

                <td><strong>Column 1</strong></td> 

                <td><strong>Column 2</strong></td> 

            </tr> 

            <tr> 

                <td>abc</td> 

                <td>123</td> 

            </tr> 

            <tr> 

                <td>efg</td> 

                <td>456</td> 

            </tr> 

            <tr> 

                <td>hij</td> 

                <td>789</td> 

            </tr> 

        </tbody> 

    </table> 


 

6 Joomla Websites04

Web Page - How the HTML Sample Tags would look. 

This is a level 1 heading 

This is a lower heading 

This is level 5 heading 

This is a basic paragraph with some text and special " characters ' in it 

and a break to a new line. 

This line has some bold text.  

1. This is the first line of an ordered list 

2. Second line 

3. third line  


• This is the first line of an unordered list 

• Second line 

• third line  

This text is on the left 

This text is in the middle 

This text is on the right  

Column 1Column 2 

abc 123 

efg 456 

hij 789