HTML5: <label> tag

This entry is part 17 of 34 in the series HTML5

In the earlier example, we have used a <label> tag which is new in HTML5.

Quick contact form

With this <label> tag, if we click on the text Email, the email input box will be selected.

Notice in line 14, we have used id=’email’ to bind the <input> textbox to the email label in line 13.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Quick contact form</title>
</head>
<body>
<form>
    <fieldset>
        <legend>Contact information</legend>
        <ul>
            <li>
                <label for='email'>Email:</label>
                <input required type='email' id='email' name='email'/>
            </li>
            <li>
                <label for='tel'>Telephone number:</label>
                <input required type='tel' id='tel' name='tel'/>
            </li>
            <li>
                <label for='url'>Website:</label>
                <input required type='url' id='url' name='url'/>
            </li>
        </ul>
        <input type='submit' value='Submit this' />
    </fieldset>
</form>
</body>
</html>

Javascript: Basic HTML tags

This entry is part 7 of 27 in the series Javascript Tutorial

If you create a new html file using webstorm editor, it will create a file with the following template:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
</body>
</html>

The <!DOCTYEPE html> declaration here will let the browser know that you are using HTML 5.

For now, let’s get familiar with the following basic HTML tags.

HTML tagDescription
<p>for paragraph
<h>for heading, eg. <h1>
<div>division
<br>line break
<span>spanning

A HTML example outputs can be viewed in this fiddle.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Basic HTML Tags</title>
</head>
<body>
<h1>I am heading 1</h1>

<h2>I am heading 2</h2>

<p>I am a paragraph</p>

<div>
    <span>I am spanning within a division</span>
</div>
</body>
</html>
Try The Code

HTML5: New Elements

This entry is part 1 of 34 in the series HTML5

It is known that HTML5 introduces great multimedia controls to a web page.

HTML5 also introduces more than 20 new elements and adding semantics to web pages.  This helps greatly in organizing page content making the page more meaningful to search engines.

Some of the new structural elements in HTML5 are

  • <header>
  • <hgroup>
  • <nav>
  • <footer>
  • <article>
  • <section>
  • <aside>

We will look at those new elements and how they are used.