HTML Elements : Part 1

Article

The Doctype element

The <!DOCTYPE> of a web page is a declaration. It declares the type of document your web page is to the software that is accessing it. It is usually placed on the first line of your HTML document's source code. HTML5 requires a DOCTYPE, preceded by nothing except optionally comments and space characters. An optional single "BOM" (U+FEFF) character may be the first character of a document.

The comment element

Using the HTML  comment element we can place comments into our source code that is not displayed on the page. Use for adding simple reminders and comments, or to disable sections of your code from running by wrapping them in this tag.

<strong>Hello People!</strong>

The anchor element

The HTML <a> (anchor) element is used to create navigation links to various pages in your website, pages on other websites, image links, open email software, fire off JavaScript, as well as snapping to pinpoint locations inside of very long web pages.

You can wrap small portions of text or whole elements with the anchor tag.

Link menu system courtesy of a <ul> listing element:

<ul>

</ul>

Email Link (opens user's default mail program):

<a href="mailto:[email protected]">[email protected] </a>

Email Link With Pre-Filled Content:

<a href="mailto:[email protected]?subject=Help Me&body=Dear Adam, etc...">Email Me </a>

Image Links:

For "href" ->

</a>

For "img" ->

</a>

For "alt" ->

</a>

Link to a destination file in the same folder:

<a href="anyfile.html">Click Me</a>

Link to a destination file in a relative folder:

<a href="folder_name/anyfile.html">Click Me</a>

Link to a destination file in the parent folder:

<a href="../folder_name/anyfile.html">Click Me</a>

Attributes for this element:

href - where to navigate the user
Possible Values: "relative or full URL string"

target - determines how the window is opened for the destination
Possible Values: "_blank", "_self", "_parent", "_top"

title - advisory text that pops up when the user mouse hovers over the link
Possible Values: "you define text"

rel - specifies the relationship between the linking file and the destination file
Possible Values: "space separated token list"

hreflang - language of the destination file
Possible Values: "valid language code"

type - mime type of the destination file
Possible Values: "valid mime type"

The Abbreviation element

The HTML <abbr> abbreviation element is used to wrap characters that make up an acronym for a phrase.

NWO</abbr>

is bent on world domination.

The address element

The HTML <address> element is used to display contact information.

DevelopPHP

<br />

182 Redneck RD

<br />

Asheville NC 13534

</address>

The area element

The HTML <area> element is usually used within a banner or image mapping scenario where there will be clickable items on the banner or image.

It must have a parent <map> element that is related to an image on the page by its name. Each area element in a map defines a hotspot that will enable mouse interactivity.

In the image code demo below you will notice a rectangle and a circular hotspot are drawn and made clickable on top of the picture.

The "coords" attribute and values are the size and location of your hotspot items. This is a Void Element so it does not get a closing tag like most elements.

</map>

Attributes for this element:

shape - specify the shape that your hotspot link will be
Possible Values: "default","rect","circle","poly"
default - hotspot will be a rectangle the entire siz of the image map
rect - rectangular hotspot you can define the size and placement of
circle - circular hotspot that you can define the size and placement of
poly - polygonal hotspot for creating many sided custom shapes

coords - coordinates for your shape
Possible Values: "numbers separated by commas"

alt - fallback text for image
Possible Values: "you define text"

href - where to navigate the user
Possible Values: "relative or full URL string"

target - determines how the window is opened for the destination
Possible Values: "_blank", "_self", "_parent", "_top"

rel - specify relationship between the linking file and the destination file
Possible Values: "space separated token list"

hreflang - language of the destination file
Possible Values: "valid language code"

type - mime type of the destination file
Possible Values: "valid mime type"

The article element

NOTE: This element is new for HTML5 and will be a standardized element in 2014.

The article tag is used for independent content sections in a web document such as but not limited to things like forum posts, articles, news entries or blog posts.

<h2>The Power of Informal Online Learning Methods</h2>

<p>Many people are learning online free in this day and age. As...</p>

<a href="http://www.w3schools.com/default.asp">Reference link</a>

</article>

The aside element

NOTE: This element is new for HTML5 and will be a standardized element in 2014.

The HTML <aside> element is used to add content that is only slightly related to the central content of the document.

<h2>

Learn Web Development Online Free

</h2>

<p>

Learning web development online free supplies the student with...

</p>

Sonia

</aside>

The audio element

NOTE: This element is new for HTML5 and will be a standardized element in 2014.

The HTML <audio> element is used to play and give user interfacing for sound files in an HTML web document. It has optional attributes like src, controls, autoplay, loop and preload.

Alternately you can supply the audio tag with a <source> tag in place of using the "src" attribute. As well as specify other audio file types besides MP3.

Fallback content goes here

</audio>

</audio>

</audio>

The b element

The HTML <b> element is used to make text inside it render as boldface type.

Here is an example of <b>bold text</b> in a sentence.

The Base element

The HTML <base> element provides the document's base URL for resolving all relative links within a web document.

It gets placed within the <head> element of your document. This is a Void Element so it does not get a closing tag like most elements. Only one may be used for each document; if there are more than one then only the first is used.

Attributes for this element:

href - the URL you want to make the base URL
Possible Values: "URL string"

target - determines how the window is opened for the destination
Possible Values: "_blank", "_self", "_parent", "_top"

The Bdi element

NOTE: This element is new for HTML5 and will be a standardized element in 2014.

The HTML <bdi> element is used to isolate text for formatting bidirectional (right to left) reading languages like Hebrew and Arabic.

This element does not have much browser support yet.

I bought a new

<bdi> جمل الصحراء </bdi>

at the market today

The bdo element

The HTML <bdo> element is made to represent text going the opposite way from the rest around it.

For "rlt" ->

Sometimes my words just come out <bdo dir="rtl">backwards</bdo>..

For "lrt" ->

Sometimes my words just come out <bdo dir="lrt">backwards</bdo>..

The body element

The HTML <body> element is the main display container for the web document. It is placed inside the <html> root element.

<html>

<body>

<h2>

This is a web document</h2>

</body>

</html>

The br element

The HTML <br> element is used to create a line break in your content.

All elements to be displayed in a normal way on your web page go inside of the body element.

Hello Pilgrims...

<br />

How are you today?

The button element

The HTML <button> element is a multipurpose button component. The button element will allow an image or text as content to be placed in it.

I am a button

</button>

Attributes for this element:

type - designates the button type
Possible Values: "submit", "reset", "button"
(If the button element has no type attribute set, it defaults to "submit" type)

name - the name part of the key-value pair (used for form submission)
Possible Values: "you define"

value - the value part of the key-value pair (used for form submission)
Possible Values: "you define"

The canvas element

NOTE: This element is new for HTML5 and will be a standardized element in 2014.

The <canvas> tag is aptly named. It supplies us an area for drawing things through script and it renders in a browser.

Much the same way one would use Actionscript to animate the Flash stage. Things can be stationary or animated inside of a canvas tag.

We use JavaScript to draw what we want in the canvas and animate those things. Interaction and Event listeners can also be applied to canvas elements using JavaScript.

<!DOCTYPE html>

<html>

<head>

window.onload = draw; // Execute draw function when DOM is ready

function draw() {

// Assign our canvas element to a variable

var canvas = document.getElementById("canvas1");

// Create the HTML5 context object to enable draw methods

var ctx = canvas.getContext("2d");

// Draw Filled Shape 1 (center triangle of logo)

ctx.beginPath();

ctx.moveTo(100, 50);

ctx.lineTo(130, 100);

ctx.lineTo(70, 100);

ctx.fillStyle = "rgba(0,0,0,1)";

ctx.fill();

// Draw Filled Shape 2 (left flap of logo)

ctx.beginPath();

ctx.moveTo(72, 60);

ctx.lineTo(85, 72);

ctx.lineTo(71, 94);

ctx.lineTo(50, 70);

ctx.lineTo(65, 40);

ctx.fillStyle = "rgba(0,0,0,1)";

ctx.fill();

// Your homework is to Draw Filled Shape 3 here (right flap)

// to complete the shape of the WorldOfWebcraft.com logo

}

</script>

</head>

<body>

<canvas id="canvas1" width="400" height="300">Fallback Content</canvas>

</body>

</html>

The caption element

The HTML <caption> element is used to specify the title of the <table> it's inside of.

My Favorite Flavors</caption>

<tr>

<td>

Chocolate

</td>

<td>

Strawberry

</td>

<td>

Vanilla

</td>

</tr>

</table>

The cite element

The HTML <cite> element is used to represent the cited title of material like artworks, books, songs, albums, movies and games.

It is no longer recommended to use this element to represent a person's name or title, just bodies of work.

I just finished reading <cite>Moby Dick</cite> and it was great!

The code element

The HTML <code> element is used to specify a fragmant of computer code within it. It is usually rendered as a monospace font that is smaller than the rest of the font on the page.

Here is a code example:

<br />

<code>$ourVar = $myVar + $yourVar;</code>

The col element

The HTML <col> element lends characteristics to a table column. This is a Void Element so it does not get a closing tag like most elements.

</colgroup>

<tr>

<th>

John

</th>

<th>

Bob

</th>

</tr>

<tr>

<td>

555-5555

</td>

<td>

888-8888

</td>

</tr>

</table>

The colgroup element

The HTML <colgroup> element represents a group of columns in a table.

</colgroup>

<tr>

<th>

January

</th>

<th>

February

</th>

<th>

March

</th>

<th>

April

</th>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

The datalist element

NOTE: This element is new for HTML5 and will be a standardized element in 2014.

The HTML <datalist> element is used to supply a list of data to another control on the page. This element has limited browser support for now.

You can test the example using the Opera browser to see how it renders an autocomplete list for the input element.

Input a flavor:

<option value="Chocolate">Chocolate</option>

<option value="Strawberry">Strawberry</option>

<option value="Vanilla">Vanilla</option>

</datalist>

The del element

The HTML <del> element is used to represent deleted text or text that is visually marked out from the rest of the text around it.

Perhaps after you delete some text you may want to <ins>(insert) some text to replace the text you just marked as deleted.

This is text. <del datetime="2011-11-19">This is removed text.</del>

The details element

NOTE: This element is new for HTML5 and will be a standardized element in 2014.

The <details> element is used to render additional plain text and HTML elements to the reader that they can expand and collapse at their leisure by clicking on the element.

Use this tag together with the <summary> element to add the ability to customize the text that the details tag has always visible to the user.

<details>here are the toggled details</details>

<details open="open">Here are the toggled details</details>

The dfn element

The <dfn> element is used to represent a defining instance of a term in text.

I plan to teach at Web Intersect 2.0 this year. <dfn>Web Intersect</dfn> is a university.

The division element

The HTML <div> division element, put simply, is an all-purpose container to do what you like with, where appropriate. To see it used with CSS to create DIV column layouts for web design.

Apply CSS to the DIV element to make bordered boxes and creative content containers. You can also use CSS to give your DIVs a creative background image that HTML can be placed on top of.

Content for div 1

</div>

Content for div 2

</div>

Content for div 3

</div>

The dl dt dd elements

The HTML <dl>, <dt>, and <dd> elements are for building definition lists. First you define the definition list, then the definition term, then the definition of that term.

The terms and definitions continue in your definition list until your list is finished, then the closing tag for the <dl> is placed.

You would use CSS to target the id attribute of the <dl> element to style all of the child elements in it (<dl>,<dd>) universally and intelligently. This way your lists look exactly the way you want them to.

<dt>Apple</dt>

<dd>

A green or red fruit that grows on a tree.

</dd>

<dt>Grape</dt>

<dd>

A green or red fruit that grows on a vine.

</dd>

</dl>

The em element

The HTML <em> emphasis element is used to place emphasis on text.

Learning is free at <em>Develop PHP</em>.

The fieldset element

The HTML <fieldset> element is usually used within the <form> element. This tag groups related elements in your forms.

You can apply a <legend> tag, as I have in the following, to the fieldset element to give the fieldset a visible title.

<form>

<legend style="color: #06F;">Personal Information</legend>

<p>

User Name:

</p>

<p>

User Email:

</p>

</fieldset>

</form>

The figcaption element

NOTE: This element is new for HTML5 and will be a standardized element in 2014.

The HTML <figcaption> element is used to represent a caption for a <figure> element.

<p>

Blah blah blah blah blah blah blah blah blah...

</p>

<figcaption><small>How event handlers work</small></figcaption>

</figure>

The figure element

NOTE: This element is new for HTML5 and will be a standardized element in 2014.

The HTML <figure> element is used to display a piece of self-contained content like an image, chart, graph or source code.

It slightly indents the content by default and can be used with the <figcaption> element inside of it.

<p>

Blah blah blah blah blah blah blah blah blah...

</p>

<figcaption>HTML Core Attributes</figcaption>

</figure>

The footer element

NOTE: This element is new for HTML5 and will be a standardized element in 2014.

The HTML <footer> element is used to define the base or bottom of a page section or the entire web document.

<header>My web page is super awesome</header>

<p>You can build one just like it if ...</p>

<footer>Adam Khoury - 2011</footer>

</section>

The form element

The HTML <form> element is used to create forms and serves as the parent element for all of your form components.

Parsing the data that is submitted requires a server side technology like PHP which has the built-in mail() function.

Your Name:<br />

Your Email:<br />

Your Message:<br />

<br />

</form>

Attributes for this element:

action - specify the parsing file for the form data when it is submit
Possible Values: "relative or full URL string"

enctype - specify the encoding type for the form submission
Possible Values: "text/plain", "multipart/form-data", "application/x-www-form-urlencoded"

method - specify the HTTP method for the form data
Possible Values: "post", "get"

name - specify the name of the form element
Possible Values: "you define form name"

target- specify the browser window target for the form submission
Possible Values: "_blank", "_self", "_parent", "_top"

accept-charset - specify character encodings for the form data
Possible Values: "valid mime type"

The h1 h2 h3 h4 h5 and h6 elements

The HTML <h1, <h2>, <h3>, <h4>, <h5> and <h6> elements are used to define heading size and hierarchy on your pages. h1 is the most enlarged, and h6 would be the smallest of the group.

<h1>

Sample Text

</h1>

<h2>

Sample Text

</h2>

<h3>

Sample Text

</h3>

<h4>

Sample Text

</h4>

<h5>

Sample Text

</h5>

<h6>

Sample Text

</h6>

The head element

The HTML <head> element is used to relate the web document's metadata by using the <title> and <meta> elements inside of it.

Inside this element is where we also place links to external JavaScript and CSS files that your document requires to run using the <link> element, as well as a few other resources you can link to the document.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>Sonia</h2>

</body>

</html>

The header element

NOTE: This element is new for HTML5 and will be a standardized element in 2014.

The HTML <header> element is used to designate the header of a page section. It will typically have headings grouped into an <hgroup> element.

<h2>Learn How to Karate Chop People</h2>

</hgroup>

</header>

<p>You can learn how to Karate Chop people with ease using...</p>

<footer><em>KarateKrazyChop.com</em></footer>

</section>

The hgroup element

NOTE: This element is new for HTML5 and will be a standardized element in 2014.

The HTML <hgroup> element is used to designate a group of headings in a section of your page.

<div>

<h2>Learn Web Development Online Free</h2>

<h4>All Lessons Are Free!!</h4>

</hgroup>

</header>

<p>

You can learn to deftly assemble web applications by going...

</p>

<footer><small>www.DevelopPHP.com</small></footer>

</div>

The hr element

The HTML <hr> element is used to designate a horizontal rule (line). This element should be styled completely using CSS if you want to change the default line you get.

I was walking down the street one day.

<hr />

In the very merry month of may.

The html element

The <html> element is the root element of your HTML document. You can place one <head> element and one <body> element inside of it and that is all.

<head> and <body> independently contain your page metadata and elements.

<html>

<body>

<h2>

Hello Universe

</h2>

<p>

Welcome to the show!

</p>

</body>

</html>

The i element

The <i> element is used to italicize text.

Here is an example of <i>italicized text</i>.

<br />

It renders an effect like the em tag, <em>by slanting it</em>.

The iframe element

The <iframe> element is used to insert an independent document or application into your web page. You can also place navigation links to allow the user to change the iframe content.

Using it you can strategically place one document into another and specify the external document's size.

<a href="http://www.c-sharpcorner.com/" target="myiframe">Target 1</a>

<br />

<a href="http://www.c-sharpcorner.com/" target="myiframe">Target 2</a>

<br />

Attributes for this element:

src - specify the source document
Possible Values: "relative or full URL string"

width - specify the width of the iframe
Possible Values: "integer"

height - specify the height of the iframe
Possible Values: "integer"

name - specify a name for the iframe element
Possible Values: "you designate name"

New HTML5 attributes for this element:(applies 2014)

sandbox - disable iframe features for security and
Possible Values: "allow-option"
options: "allow-plugins", "allow_forms", "allow_scripts" , "allow_same_origin"

seemless - specify seemless inclusion of the iframe into the document
Possible Values: "seemless"

The img element

The HTML <img> element is used to render image media like graphics, illustrations, and photos. It is very important that web images be optimized by the webmaster.

Which means that if you have a very large image, you should shrink it to the dimensions that it will be displayed on the page. You can use any supported image type (.jpg, .gif, .png, .bmp, etc...) in the img element.

This is a Void Element so it does not have a closing tag.

We will show a few basic examples and supply you with a small image to play with.

Add an image to a web document

Create an Image Link

</a>

Attributes for this element:

src - specify where the image to render is living in your file system
Possible Values: "relative or full URL string"

alt - specify fallback information if the image is missing or does not load
Possible Values: "fallback text"

width - specify image width
Possible Values: "integer"

height - specify image height
Possible Values: "integer"

usemap - specify a <map> element to tie to the image
Possible Values: "the map's name value"

ismap - specify access to an image map on the server side
Possible Values: "ismap"