This tutorial is intented to introduce the HTML code basics to users that have never written a web site manually. Writing HTML code is pretty much writing tags, attributes and content. That’s why we’ll focus on how a tag and it’s attributes and contents are defined. Please Note that In older versions of HTML, some tags did not require ending tags. With the emergence of XML and XHTML, you should be sure to include both beginning and ending tags.
Elements and tags
HTML is composed by a set of elements that are the basis of its structure. Elements are designed to give special information that will be used to compute their final representation. This means that where a tag is defined in the HTML code, something will happen in the representation of that document, that may be visual or not.
Body tag and attributes |
|
<body>...</body> |
Contains the viewed portion of the document |
<body bgcolor="color"> |
Sets the color of the background in hexadecimal code |
<body background="filename.xxx"> |
Sets an image as a page’s background (wallpaper) |
<body text="color"> |
Specifies the color of normal text in hexadecimal code |
<body link="color"> |
Specifies the default color of unvisited links in hexadecimal code |
<body alink="color"> |
Specifies the color of links on click in hexadecimal code |
<body vlink="color"> |
Specifies the color of followed links in hexadecimal code |
Font tag and attributes |
|
<font>...</font> |
Changes font attributes for text within the tags |
<font size="value">...</font> |
Sets the font to a size from 1 to 7, with 1 the smallest and 7 the largest |
<font face="name">...</font> |
Sets the font face |
<font color="color">...</font> |
Sets the font color using hexadecimal code |
Image tag and attributes |
|
<img> |
Embeds an image in the document at the location of the tag |
<img src="url" alt="text"> |
Adds an image with a text description |
<img src="url" alt="text" align="direction"> |
Aligns an image to the left, right, center, bottom, or top |
<img src="url" alt="text" border="number"> |
Sets the size of the border around an image |
<img src="url" alt="text" height="pixels"> |
Sets the height of an image |
<img src="url" alt="text" width="pixels"> |
Sets the width of an image |
<img src="url" alt="text" hspace="pixels"> |
Sets a horizontal margin to be placed around an image |
<img src="url" alt="text" vspace="pixels"> |
Sets a vertical margin to be placed around an image |
<img src="url" alt="text" usemap="map-name"> |
Designates an image as a client-side image map |
Anchor tag and attributes |
|
<a>...</a> |
Designates the origin and destination of a hyperlink |
<a href="url">...</a> |
Creates a hyperlink |
<a href="#name">...</a> |
Links to a target location in the current page |
<a href="URL#name">...</a> |
Links to a target location in a page outside your site |
<a name="name">...</a> |
Sets a target location within a document |
<a href="mailto:email">...</a> |
Creates a mailto link |
| Optional attributes: | |
<a href="?" target="?">...</a> |
Specifies where the linked-to document is to be placed |
<a href="?" rel="?">...</a> |
Sets up a relationship between the linked-to document and the current page |
<a href="?" rev="?">...</a> |
Sets up a reverse relationship between the current page and the linked-to document |
Table tags and attributes |
|
<table>...</table> |
Generates a table |
<table border="pixels"> |
Sets the size of cell borders |
<table cellspacing="pixels"> |
Sets the amount of space between cells |
<table cellpadding="pixels"> |
Sets the amount of space between a border and cell content |
<table height="pixels" or "%"> |
Sets the height of a table |
<table width="pixels" or "%"> |
Sets the width of a table |
<td>...</td> |
Defines a table data cell |
<td colspan="columns"> |
Sets a cell to span columns |
<td rowspan="rows"> |
Sets a cell to span rows |
<td nowrap> |
Prevents the lines within a cell from wrapping |
<th>...</th> |
Defines a table header with bold, centered table data |
<tr>...</tr> |
Defines a table row |
<tr align="?"> or <td align="?"> |
Aligns the contents of a row or cell to the left, right, or center |
<tr valign="?"> or <td valign="?"> |
Sets the vertical alignment of a row or cell to the top, middle, or bottom |
Frame tags and attributes |
|
<frameset>...</framesET> |
Specifies the layout of subsections in the main browser window |
<frameset rows="value,value"> |
Defines the rows within a frameset |
<frameset cols="value,value"> |
Defines the columns within a frameset |
<noframes>...</noframes> |
Provides alternate content for browsers that do not support frames |
<frame src="?"> |
Defines the appearance and content of a single frame |
<frame name="name"> |
Labels the frame for targeting by other frames |
<frame marginwidth="#"> |
Sets the margin width of a frame |
<frame marginheight="#"> |
Sets the margin height of a frame |
<frame scrolling="value"> |
Creates a frame scrollbar |
<frame noresize> |
Prevents the resizing of a frame |
Form tags and attributes |
|
<form>...</form> |
Generates a container for all form elements |
<form action="url"> |
Designates the path of the script to process input from the form |
<form method="get|post"> |
Instructs the browser how to interact with the form URL |
<form accept="media type"> |
Defines which MIME types are supported by the server processing the form |
<form accept-charset="text"> |
Defines which character sets are supported by the server processing the form |
<form enctype="media type"> |
Defines the format of the submitted data |
<option> |
Defines each menu item |
<select name="name">...</select> |
Generates a pull-down menu |
<input type="checkbox"> |
Generates a check box |
<input type="hidden"> |
Conceals a field from view |
<input type="image"> |
Generates an image that acts like a Submit button |
<input type="password"> |
Generates a one-line password box |
<input type="radio"> |
Generates a radio button |
<input type="text"> |
Generates a one-line text box |
<input type="submit"> |
Generates a Submit button (send form) |
<input type="reset"> |
Generates a Reset button (clear form) |
Posted by: Dhiraj kumar
HTML5, CSS3, JQuery Tips & Tricks 
A person essentially assist to make severely posts I’d state. That is the very first time I frequented your web page and so far? I surprised with the analysis you made to make this actual submit incredible. Fantastic job!
Thanks for your comment.
I have a friend that wants and explanation of the tag. I want to give the best explanation possible. Do you have a recent or any post that would give good firm ground. Thanks!
Thanks for your comment. Sure I will in future.. very soon.
I am so sorry, I meant to say DIV tag, my phone decided to omit it.
A DIV is a block element… A container of sorts… You usually identify what a DIV tag contains by assigning it a class or id… For example All your header stuff goes here … The header would go inside those opening and closing div tags and then you would typically follow that with a container that holds all the main content of a document/page… That is the very basic explanation. But I think div’s will start to be used less and less in the future with the advent of HTML5 growing in popularity… For example, Instead of using the method I just put above, for a header you can use HTML5’s new tag… This helps to identify content more intuitively and is better for SEO. Hope that helps…
Richard, Thanks for your comment.
As you know Div element is used as an element/division. In Html5 we have some more tags for different divisions like Header, Footer etc. But still we need Div tag as separation/creation of different flexible elements/divisions inside these Html5 tags. There is no end of this tag in future as per W3C. http://dev.w3.org/html5/html-author/#the-div-element
Great help, but I think I will layout a comprehensive page with examples to show my friend in question. He is an old school tables guy and we are getting home up to speed with HTML5 and CSS3. You all have been kind.
It removed the tags I tried to use… It was supposed to read “div” and “header” with brackets around it…
Hello Dhirag,
I would like you to do a guest blog with post. Please email me if you are interested. I really like this post!
Nice to hear you found it useful, thanks for your comment!
Great post. 🙂
Thanks.
excellent, layout, beneficial ideas recognize the value of each of the enthusiasm
Thank you!
I’m impressed, I must say. Really rarely do you encounter a blog that’s both educative and entertaining, and let me tell you, you might have hit the nail about the head. Your idea is outstanding; the issue is an element that insufficient individuals are speaking intelligently about. I’m happy i always came across this at my seek out something in regards to this.
Thanks a lot. Enjoy.. 🙂
Thanks for the useful information! I might have never gotten this on my own! Do you find it alright to reference point about this on my own website basically have a backlink to the webpage?
Thanks for reading. 🙂
Sure.. You can share it with a reference backlink.
Excellent post. I’m checking constantly your blog and Im impressed! Useful info specifically the final part 🙂 I take care of similarly info much. I had been in search of this unique information for your very long time. Thank you so much and enjoy.
Thanks for reading.
Loving the information for this web site , you have carried out great job to the content .
You’ve actually created some exceptional points here. I specifically appreciate the way in which you’re qualified to stick a great deal of thought in a relatively short post (comparitively) which creates it an thoughtful publish with your subject. Many people feel, you’ve presented the subject within a quite thorough yet concise manner, which is genuinely useful when somebody hopes to find the facts without spending too a good deal time searching the internet and sifting your noise to locate the methods their questions. I get so frustrated with the plentiful within the outcomes in the major SE’s due to the fact they normally manage to mostly contain filler content that oftentimes isn’t extremely sensible. Unless you mind I am about to add this post along with your webpage to my delicious favorites so we could share it with our kids. I appear toward approaching returning to read your future posts likewise.
Thanks Cary.
Sounds good. This is the useful and informative article. Thanks for sharing this info along with us.
I simply couldnt leave your web site before letting you know which i really enjoyed the useful information you are offering on your visitors Will probably be back soon to evaluate through new posts
This web site post turns into a 2 thumbs high from me.
ive checked this cool site several times now and that i should point out that i’ve found it quite good actually. carry on doing what youre doing! 😉
Information great read!
Nice 1 dude… kudos to u… gr8 job… 🙂
“Reference: Useful HTML tags and their attributes | HTML,
HTML5, CSS, CSS3, JQuery, Flash, Photoshop, mobile, iphone & ipad web
application” vinyl blinds was indeed certainly engaging and instructive!
Within modern world that is hard to carry out.
Thanks a lot, Ashley
HTML Attributes are property of the elements which may have values and these attribute values are always enclosed in quotes. It’s providing to the browser with some additional information about an elements how the elements should appear or behave. HTML elements can contain one or more attributes, attribute names and attribute values are case-insensitive and separated by an equals (=) sign.
[HTML Attributes](http://www.willvick.com/HTML/HTMLAttribute.aspx)
[HTML Attributes Examples](http://www.willvick.com/HTML/HTMLExampleAttribute.aspx)
[Youtube – HTML Tutorial – Attributes](http://www.youtube.com/watch?v=ucOXvaCEZgg)