Complete HTML Markup Reference

On 24 Feb, 2012 in HTML with Comments

Hello Everyone, its our first post on devw3. We are really anxious to share our knowledge with the outer world. Its not a good idea, to say welcome to devw3 and then say bye bye. So, we here come with the idea to preview all the HTML markup which we support at devw3.

This is really helpful for those who wanted to build a template for blog and not sure where to start and which element to style.

HTML Headings and thier 6 levels

Lets Get started with Headings

<h1>Header Level 1</h1>
<h2>Header Level 2</h2>
<h3>Header Level 3</h3>
<h4>Header Level 4</h4>
<h5>Header Level 5</h5>
<h6>Header Level 6</h6>

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

HTML Paragraph

Now, its time for some text i.e, paragraph

<p>This is just a paragraph. Nothing else to read here. it just a text to make us keep reading and reading. if my guess is correct you are still reading this.</p>

This is just a paragraph. Nothing else to read here. it just a text to make us keep reading and reading. if my guess is correct you are still reading this.

HTML Text Formatting

Another important topic, which we shouldn’t be skipping

Bold Text

<b>Devw3</b>

Bold Devw3

Strong Text

<strong>Devw3</strong>

Strong Devw3

Superscripted Text

<sup>Devw3</sup>

Superscripted Devw3

Subscripted Text

<sub>Devw3</sub>

Subscripted Devw3

Italic Text

<i>Devw3</i>

Italic Devw3

Emphasized Text

<em>Devw3</em>

Emphasized Devw3

Quoted Text

<q>Devw3</q>

Quoted Devw3

HTML Images, Figure and Figcaptions

One of the important topic, which adds life to the blog is Images

<figure>
<a href="URL"><img src="URL" alt="Image" /></a>
<figcaption><p>This is caption for the above dummy image</p></figcaption>
</figure>
HTML5-Complete-markup-referance

This is caption for the above dummy image

HTML List

Lists play a vital row any design, text or a webpage

Orodered List

<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ol>
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.

Unordered List

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Defination List

<dl>
   <dt>Definition list</dt>
   <dd>Defination description, there is no description its just a dummy text</dd>
   <dt>Definition list</dt>
   <dd>Defination description, there is no description its just a dummy text</dd>
</dl>
Definition list
Defination description, there is no description its just a dummy text
Definition list
Defination description, there is no description its just a dummy text

HTML Blockquote

<blockquote><p>Blockquoted text, nothing else</p></blockquote>

Blockquoted text, nothing else

HTML Pre and Code

<pre rel="Language" class="prettyprint linenums"><code></code></pre>
#header h1 a {
    display: block;
    width: 300px;
    height: 80px;
}
<html>
    <head>
    	<title>Devw3.com</title>
    </head>
    <body>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac egestas.</p>
    </body>
</html>
<html>
    <head>
    	<title>Devw3.com</title>
    </head>
    <body>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </body>
</html>
#! /bin/bash
find * -maxdepth 1 -name "*" -type d | while read -r dir
do
        rename 's/$dir/[0-9]{8}/$dir/' *
done
<?php echo "Hello World"; >

HTML Tables

Even though there is less usage of table, its good to use tables for tabular data

<table>
	<thead>
		<td>heading col 1</td>
		<td>heading col 2</td>
		<td>heading col 3</td>
		<td>heading col 4</td>
	</thead>
	<tr>
		<td>Row 1 col 1</td>
		<td>Row 1 col 2</td>
		<td>Row 1 col 3</td>
		<td>Row 1 col 4</td>
	</tr>
	<tr>
		<td>Row 2 col 1</td>
		<td>Row 2 col 2</td>
		<td>Row 2 col 3</td>
		<td>Row 2 col 4</td>
	</tr>
</table>
heading col 1 heading col 2 heading col 3 heading col 4
Row 1 col 1 Row 1 col 2 Row 1 col 3 Row 1 col 4
Row 2 col 1 Row 2 col 2 Row 2 col 3 Row 2 col 4

HTML Forms

Form are really useful for processing inputs from users

<form action="#" method="post">
    <div>
        <label for="name">Text Input <span>*</span></label>
        <input type="text" name="name" id="name" value="" tabindex="1" />
    </div>
    <div>
        <label for="name">Password Input <span>*</span></label>
        <input type="password" name="name" id="name" value="" tabindex="1" />
    </div>
    <div>
        <label for="textarea">Text Field <span>*</span></label>
        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
    </div>
    <h6>Radio Buttons</h6>
    <table>
        <tr>
            <td colspan="2">Radio buttons Name</td>
        </tr>
        <tr>
            <td><label for="radio-choice-1">Choice 1</label></td>
            <td><input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" /></td>
        </tr>
        <tr>
            <td><label for="radio-choice-2">Choice 2</label></td>
            <td><input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" /></td>
        </tr>
    </table>
    <h6>Checkbox</h6>
    <table>
        <tr>
            <td colspan="2">Checkbox Name</td>
        </tr>
        <tr>
            <td><label for="checkbox">One</label></td>
            <td><input type="checkbox" name="checkbox" id="checkbox" /></td>
        </tr>
        <tr>
            <td><label for="checkbox2">Two</label></td>
            <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
        </tr>
        <tr>
            <td><label for="checkbox3">Three</label></td>
            <td><input type="checkbox" name="checkbox3" id="checkbox3" /></td>
        </tr>
    </table>
    <h6>Dropdown</h6>
    <div>
        <label for="select-choice">Select Dropdown Choice:</label>
        <select name="select-choice" id="select-choice">
            <option value="Choice 1">Choice 1</option>
            <option value="Choice 2">Choice 2</option>
            <option value="Choice 3">Choice 3</option>
        </select>
    </div>
    <div>
        <label for="Uploads">Uploads</label>
        <input type="file"/>
    </div>
    <input type="submit" value="Submit" />
</form>
Radio Buttons
Radio buttons Name
value=”choice-1″ />
value=”choice-2″ />
Checkbox
Checkbox Name
Dropdown
Tags: ,