HTML - Tags In Action

2nd February 2020 | Christopher Pisani

You can find a full list of tags in HTML >> HTML Tags & Elements using our menu. For the purpose of keeping things simple, we will look at the most used tags for this tutorial. Feel free to test the examples listed here, experiment with the code in our editor, to better understand how html works, before we head on to the next section.

The comment tag  is very useful to make your code more readable for you, and for other developers, especially if the website is being developed by a group.

<!-- This is a comment. Text and elements surrounded by these tags, will not be visible to the client window ->
<!-- 
<p>
    This will not show in the browser
</p>
-->
This will show in the browser

The hyperlink tag <a>, is used to direct users to other pages as can be seen in the following example, with multiple formats.

<!-- This hyperlink opens in same browser Tab -->
<a href="https://www.jazzo.co.uk"> Visit Jazzo Website</a>

<br><br>

<!-- This hyperlink opens in a new browser Tab -->
<a href="https://www.jazzo.co.uk" target="__blank"> Visit Jazzo Website</a>

<br><br>

<!--  This hyperlink is used on an image -->
<a href="https://www.jazzo.co.uk">
    <img src="https://www.jazzo.co.uk/media/jazzo_black.png" width="100px" />
</a>

Paragraphs <p> tag is used to seperate chunks of text to make it more readable by users.

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Mauris vitae ultricies leo integer malesuada.
</p>
<p>
    Lacinia quis vel eros donec ac odio tempor. Fringilla urna porttitor rhoncus dolor purus. Quisque egestas diam in arcu cursus euismod quis viverra nibh. 
</p>
<p>
    Libero enim sed faucibus turpis in eu. Scelerisque felis imperdiet proin fermentum leo. Amet risus nullam eget felis eget nunc lobortis mattis aliquam. Tellus in metus vulputate eu scelerisque.
</p>

Bold text <b>, Italic <i> & Underlined <u> tags to highlight text.

<!-- These tags take no attributes -->
This is an example to show <b>bold</b> text
<br/>
This is an example to show <i>italic</i> text
<br/>
This is an example to show <u>underline</u> text

Line break <br> tag to skip a line

<!-- Note that this tag does not need an extra closing tag -->
<br> <br> <br> <br> <br> 5 line breaks used

The <button> tag can be used for multiple purposes, from forms to control scripts in javascript.

<button> Button Example </button>

The <div> tag is a divider element that usually is used as a container for other elements

<!-- A div is one of many containers, that holds other data -->
<!-- A div element takes full length by default -->
<div>
    <a href="/index.php"> Jazzo Home Page </a>
</div>

<div style="background:yellow">
   <a href="/index.php"> Jazzo Home Page </a>
</div>

<form>, <input>,<label> & <textarea>tags

<!-- Simple inputs examples -->
<form name="myForm" method="post">
    
    <label for="colour">Colour: </label>
    <input type="text" name="colour" id="colour" placeholder="Enter colour here"/>

    <br/><br/>

    <label for="q">Select Colour</label>
    <select name="qty" id="q">
        <option value="one">one</option>
        <option value="two">two</option>
        <option value="three">three</option>
    </select>

    <br/><br/>

    <input name="country" id="c1" type="radio" />
    <label for="c1">Wales</label><br/>
    <input name="country" id="c2" type="radio" />
    <label for="c2">England</label><br/>
    <input name="country" id="c3" type="radio" />
    <label for="c3">Scotland</label>

    <br/><br/>

    <input name="country2" id="c11" type="checkbox" />
    <label for="c11">Wales</label><br/>
    <input name="country2" id="c22" type="checkbox" />
    <label for="c22">England</label><br/>
    <input name="country2" id="c33" type="checkbox" />
    <label for="c33">Scotland</label>

    <br/><br/>

    <textarea name="comment" placeholder="Enter a comment here">

Heading <h1>-<h6> tags for titles

<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>

Horizontal line <hr> tag

some text
<hr/>
some other text

Tables <table> tag

<table border="1">
    <tr>
       <th>Name</th>
       <th>Salary</th>
    </tr>
    <tr>
       <td>John Doe</td>
       <td>£3000</td>
    </tr>

    <tr>
       <td>Bob Frazer</td>
       <td>£6000</td>
    </tr>
</table>

Unordered List <ul> tag

<ul>
  <li>bread</li>
  <li>coffee beans</li>
  <li>milk</li>
  <li>butter</li>
</ul>