Basic HTML

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

Defines the document type

Code:

              <!DOCTYPE HTML>
              <html>
              <head>
              <title>Title</title>
              </head>
              <body>
                The body of the document......
              </body>
              </html>

<h1>, to <h6>

Defines HTML headings

Code:

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

Output:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

<p></p>

Defines a paragraph

Code:

<p>This is some text in a paragraph.</p>

Output:

This is some text in a paragraph.

<marquee></marquee>

Used for scrolling piece of text or image

Code:

<marquee behavior="scroll" direction="up" scrollamount="1">Slow Scrolling</marquee> <marquee behavior="scroll" direction="right" scrollamount="12">Little Fast Scrolling</marquee> <marquee behavior="scroll" direction="left" scrollamount="20">Fast Scrolling</marquee> <marquee behavior="scroll" direction="right" scrollamount="50">Very Fast Scrolling</marquee>

Output:

Slow Scrolling Little Fast Scrolling Fast Scrolling Very Fast Scrolling

<section></section>

The tag defines sections in a document

Code:

<section> <h1>WWF</h1> <p>World Wide Fund</p> </section> <section> <h1>WWF's Panda symbol</h1> <p>The Panda has become the symbol of WWF.</p> </section>

Output:

WWF

World Wide Fund

WWF's Panda symbol

The Panda has become the symbol of WWF.

Formatting

<acronym></acronym>

Defines an acronym

Code:

<p>Can I get this <acronym title="as soon as possible">ASAP</acronym>?</p>

Output:

Can I get this ASAP?

<abbr></abbr>

Defines an abbreviation or an acronym

Code:

<p>The <abbr title="World Health Organization"> WHO </abbr> was founded in 1948.</p>

Output:

The WHO was founded in 1948.

<address ></address >

Defines contact information for the author/owner of a document/article

Code:

<address> Written by <a href="https://github.com/lgope"> Lakshman Gope </a> Visit us at: <br> Example.com <br> Road 564, New York <br> USA </address>

Output:

Written by Lakshman Gope Visit us at:
Example.com
Road 564, New York
USA

<b></b>

Defines bold text

Code:

<p> This is normal text - <b> and this is bold text </b> </p>

Output:

This is normal text - and this is bold text

<blockquote></blockquote>

Defines a section that is quoted from another source

Code:

<blockquote> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>

Output:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

<center></center>

Defines bold text

Code:

<center> This text will be center-aligned. </center>

Output:

This text will be center-aligned.

<big></big>

Defines big text

Code:

<big> Bigger text </big>

Output:

Bigger text

<del></del>

Defines text that has been deleted from a document

Code:

<p> My favorite color is <del> blue </del> green! </p>

Output:

My favorite color is blue green!

<ins></ins>

Defines a text that has been inserted into a document.

Code:

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

Output:

My favorite color is blue red!

<em></em>

Defines emphasized text

Code:

<em> Emphasized text </em>

Output:

Emphasized text

<dfn></dfn>

Represents the defining instance of a term

Code:

<p><dfn>HTML</dfn>is the standard markup language for creating web pages.</p>

Output:

HTMLis the standard markup language for creating web pages.

<i></i>

Defines a part of text in an alternate voice or mood

Code:

<p> He named his car<i>The lightning</i>, because it was very fast. </p>

Output:

He named his carThe lightning, because it was very fast.

<strong></strong>

Defines important text

Code:

<p><dfn>HTML</dfn>is the standard markup language for creating web pages.</p>

Output:

HTMLis the standard markup language for creating web pages.

Forms and Input

<form></form>, <input>

Defines an HTML form for user input

Code:

<form> First Name: <input type="text" name="fname"> <br> Last Name: <input type="text" name="lname"> <br> <input type="submit" value="Submit"> </form>

Output:

First Name:
Last Name:

<textarea></textarea>

Defines a multiline input control (text area)

Code:

<textarea rows="4" cols="40"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem magnam et expedita placeat officia. </textarea>

Output:

<button></button>

Defines a clickable button

Code:

<h4> The Button Element </h4> <button type="button" onclick="alert('Hello world!')"> Click Me! </button>

Output:

The Button Element

<select></select>, <option></option>

Defines a drop-down list

Code:

<select> <option value="lambo"> Lambo </option> <option value="mercedes"> Mercedes </option> <option value="Audi"> Audi </option> <option value="bmw"> BMW </option> </select>

Output:

<optgroup></optgroup>

Defines a group of related options in a drop-down list

Code:

<select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="Mercedes">Mercedes</option> <option value="Audi">Audi</option> </optgroup> </select>

Output:

<label> </label>

Defines a label for an <input> element

Code:

<form action=""> <label for="male">Male</label> <input type="radio" name="gender" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="gender" id="female" value="female"><br> <label for="other">Other</label> <input type="radio" name="gender" id="other" value="other"><br><br> <input type="submit" value="Submit"> </form>

Output:

<fieldset></fieldset>

Groups related elements in a form

Code:

<form> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form>

Output:

Personalia: Name:
Email:
Date of birth:

Images

<img>

Defines img text

Code:

<img src="https://papermilkdesign.com/ images/smiley-face-png-transparent-background-4.jpg" alt="Smiley face"> <figcaption>Fig.1 - Smiley.</figcaption>

Output:

Smiley face
Fig.1 - Smiley.

<svg></svg>

Defines a container for SVG graphics

Code:

<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="red" /> </svg>

Output:

Audio / Video

<audio></audio>

Defines sound content

Code:

<audio controls> <source src="./vendor/sound/i_try_so_hard .mp3" type="audio/mpeg"> </audio>

Output:

<video></video>

Defines a video or movie

Code:

<video width="300" height="220" controls> <source src="./vendor/sound/Let-It-Go.mp4" type="video/mp4"> </video>

Output:

<iframe></iframe>

For youtube videos

Code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/ ztyXD3Tz7u0?start=2" frameborder="0" allow="accelerometer; autoplay; ncrypted-media; yroscope;picture-in-picture" allowfullscreen></iframe>

Output:

<a></a>

Defines a hyperlink

Code:

<a href="https://github.com/" target="blank">Github</a>

Output:

Github

Tables

<table></table>

Defines a table

Code:

<table border="1"> <tr> <th>Name</th> <th>ID</th> </tr> <tr> <td>Name One</td> <td>122-65-45</td> </tr> </table>

Output:

Name ID
Name One 122-65-45

Styles and Semantics

<div></div>

Defines a section in a document

Code:

<div style="background-color:lightblue"> <h3> This is a heading </h3> <p> This is a paragraph.</p> </div>

Output:

This is a heading

This is a paragraph.

<span></span>

Defines a section in a document

Code:

<p>Someone has <span style="color:blue">blue</span> eyes.</p>

Output:

Someone has blue eyes.

<summary></summary>

Defines a section in a document

Code:

<details> <summary>Copyright 1999-2014.</summary> <p> - by Refsnes Data. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of the company Refsnes Data.</p> </details>

Output:

Copyright 1999-2014.

- All Rights Reserved.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, autem.

<ul></ul>

Defines an unordered list.

Code:

<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

Output:

  • Coffee
  • Tea
  • Milk

<ol></ol>

Defines an ordered list.

Code:

<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

Output:

  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk

<progress></progress>

The tag represents the progress of a task..

Code:

Downloading : <progress value="60" max="100"> </progress>

Output:

Downloading :

<bdo></bdo>

The tag is used to override the current text direction.

Code:

<p>This paragraph will go left-to-right.</p> <p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>

Output:

This paragraph will go left-to-right.

This paragraph will go right-to-left.

<mark></mark>

Highlight parts of a text.

Code:

<p><mark>Milk</mark> is good for health.</p>

Output:

Milk is good for health.

<q></q>

Mark up a short quotation.

Code:

<q>Here is a quotation taken from the Computer.</q>

Output:

Here is a quotation taken from the Computer.

Programming

<script></script>

Defines a client-side script

Code:

<p id="demo"></p> <script> document.getElementById("demo"). innerHTML = "Hello JavaScript!"; </script>

Output:

Good & Bad Practice

Bad: <Section> <p>This is a paragraph.</p> </SECTION> <br> Good: <section> <p>This is a paragraph.</p> </section>
Bad: <section> <p>This is a paragraph. <p>This is a paragraph. </section> Good: <section> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </section>
Bad: <div CLASS="menu"> Good: <div class="menu">
Bad: <table class=striped> Good: <table class="striped">
Bad: <img src="html5.gif"> Good: <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Bad: <link rel="stylesheet" href="styles.css"> Good: <link rel="stylesheet" href="styles.css">