Here I am trying to give quick information about html tag which are mostly used in daily development process
For web developers, it is crucial to be proficient, in HTML. And while HTML is not the most difficult to get accustomed to one can still manage to forget all the nooks and crannies it has to offer. A good solution, therefore, is to always have a cheat sheet at hand, helping you in your most troubling moments.
Lists
<ol> … </ol>
Tag for ordered or numbered list of items.
<ul> … </ul>
Contrary to the above tag, used for unordered list of items.
<li> ... </li>
Individual item as part of a list.
<dl> … </dl>
Tag for list of items with definitions.
<dt> … </dt>
The definition of a single term inline with body content.
<dd> … </dd>
The description for the defined term
Example
<ol>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ol>
<ul>
<li>France</li>
<li>Germany</li>
<li>Italy</li>
</ul>
<dl>
<dt>Toyota</dt>
<dd>Japanese
car brand</dd>
<dt>Armani</dt>
<dd>Italian fashion brand
</dd>
</dl>
Forms
<form>… </form>
The
parent tag for an HTML form.
Action=”url”
The URL listed here is where the form data Will be submitted once user fills it.
Method=””
It specifies which HTTP method (POST or GET)
Would be used to submit the form.
Enctype=””
Only
for POST method, this dictates the data
Encoding scheme to be used when form
is
submitted.
Autocomplete
Determines in the form has auto-complete enabled.
novalidate
Determines
whether the form should be validated before submission.
accept-charsets
Determine
character encodings when form is submitted.
target
After
submission, the form response is displayed wherever this refers to, usually has
the following
Values: blank, self, parent, top
<fieldest> … </fieldest>
Identifiles the group of all fields on the form.
<label> … </label>
This is
used to label a field in the form.
<form action=”form _submit.php “method=”post”>
<fieldse>
<legend>Bio:</legend>
First name:<br>
<input type=”test” name=”first-name”
value=”John”placeholder=”please
enter your first name here”><br>
Last name:<br>
<input type=”text”name =”last-name “
Value=”Doe” placeholder=”please
enter your last name here”><br><br>
Favorite sport:<br>
<select>
<option value=”soccer”>soccer
</option>
<option value=”tennis”>Tennis
</option>
<option value=”golf”>Golf
</option>
</select>
<textarea name=”description”>
</textarea>
<input type=”submit” value=”Submit”>
</fieldset>
</form>
<input/>
This tag is used to take input from the user. Input type is determined by a number of attributes.
Input Type Attributes
type=’’’’
Determines which type of input (text, dates, password) is
requested from the user.
name=’’’’
Specifies the name of the input filed.
Value=’’’’
Specifies the value contained currently in the input filed.
Size=’’’’
Determines the input element width (number of characters).
Maxlength=””
Specifies the most input field characters allowed.
required
Makes an input field compulsory to be filled by the user. The form cannot be submitted if a required field is left empty.
Width=””
Determines the width of the input element, in pixel values.
height=””
Determines the height of the input element in pixel values.
Placeholder=””
Can be used to give hints to the user about the nature Of the requested data.
Pattern=””
Specifies a regular expression, which can be used to look for patterns in the user’s text.
min=””
The minimum value allowed for an <input> element.
Mix=””
The maximum value allowed for an <input> element.
autofocus
forces focus on the input element when webpage loads completely.
disabled
Disables the input element. User can no longer enter data.
<textarea> … </textarea>
For longer strings of input. Can be used to get multi-sentence text from the user.
<select> …</select>
This tag specifies a list of options which the user can choose from.
name=””
The name of a particular list of options.
Size=””
Total number of options given to the user.
Multiple
States whether the user can choose multiple options from the list.
required
Specifies whether choosing an option/S is necessary for from submission.
autofocus
Specifies that a drop-down list automatically comes into focus after a page loads.
Option Attributes
<option> … </option>
Tap for listing individual items in the list of options.
Value=”’’
The text visible to the user for any given option.
Selected
Determines which option is selected by default when the form loads.
<button> … </button>
Tag for creating a button for form submission.
Table
<table> … </table>
Marks a table in a webpage.
<caption> … </caption>
Description of the table is placed inside this tag.
<thead> … </thead>
Specifies information pertaining to specific columms of the
table.
<tbody> … </tbody>
The body of the table, where the date is held.
<tfoot> … </tfoot>
Determines the footer of the table.
<tr> … </tr>
Denotes a single row in a table.
<th> … </th>
The value of a heading of a table’s column.
<td> … </td>
A single cell of a table. Contains the actual value/date.
<colgroup> … </colgroup>
Used for groping columns together.
<col> … </col>
Denotes a column inside a table.
Example
<table>
<colgroup>
<col
span=”2”>
<col>
<colgroup>
<tr>
<th>Name</th>
<th>Major</th>
<th>GPA</th>
</tr>
<tr>
<td>Bob</td>
<td>Law</td>
<td>3.55</td>
</tr>
<tr>
<td>Alice</td>
<td>Medicine</td>
<td>3.61</td>
</tr>
</table>
Object and iFrames
<object> … </object>
This tag is used to embed
additional multimedia into a webpage. Can be audio, document(pdf)etc.
Height=’’’’
Determines object height in pixel values.
Width=’’’’
Determines object widthin pixel value.
Type=’’’’
The type/format of
the object contains.
<iframe> … </iframe>
An inline block of content, this is used as a container for
multimedia in a flexible manner. It floats inside a webpage, meaning it is
placed relative to other webpage items.
iFrame Attributes
name=’’’’
The name of the iFrame.
Src=’’’’
The source URL/path of the
multimedia object to be held inside the iFrame.
Srcdoc=’’’’
Any HTML content
to be displayed inside the iFrame.
height=’’’’
Determines the
height of the iFrame.
Width=” “
Determines the
width of the iFrme.
<param/>
For iFrame
customization. This includes additional parameters to go alone with the
content.
<embed> … </embed>
This
is used to embed external objects, like pluging (e.g. a flash video).
blockquote
Anyone who has never made a mistake has never tried anything
new. <cite>-albert Einstein</cite></blockquote>
pre
Some pre-formatted text
</pre>
<p>A code snippet:<code>some
code</code></p>
Links
<a href=””> … </a>
Anchor tag. Primarily used for including hyperlinks.
<a herf=’’mailto:”> … </a>
Tag dedicated to sending mails.
<a herf=tel://###-###> … </a>
Anchor tag for mentioning contact numbers. As the numbers
are clickable, this can be particularly beneficial for mobile users.
<a herf=”name”> … </a>
A variation of the above tag, this is only meant to navigate
to a div section of the webpage.
Images
<img/>
A tag to display images in the webpage.
src=url
The URL or path where the image is located on your drive or
on the web.
alt=”text’
The text written here is displayed when user hovers mouse
over the image. Can be used to give additional details of the image.
height=””
Specifies imagein pixels or percentages.
width=””
specifies image width in pixels or percentages.
align=””
The relative alignment of the image. Can charge with changes
to order elements in the webpage.
border=””
specifies border thickness of the image. If not mentioned,
defaults to 0.
<map> … </map>
Denotes an interactive (clickable) image.
<map name=””> … </map>
Name of the map associated between the image and the map.
<area/>
Specifies image map area.
shape=””
Shape of the area.
coords=””
Coordinates of the vital information of the shape.
Example: vertices for rectangles, center/radius for circles.
Example
<img src=”planets.gif”
width=”145” height=”126”
alt=”planets”
usemap=”#planetmap”>
<map name=”planetmap”>
<area shape=”rect”
coords=”0,0,60,100”
href=”sun.htm” alt=Sun”>
<area shape=”circle”
coords=”90,58,3”
href=mercur.htm” alt=”Mercury”>
<area shape=”circle” coords=”124,58,8”
href=”venus.htm” alt=”Venus”>
</map>
height=””
Determines the height of the
embedded item.
Width=””
Determines
the width of the embedded item.
Type=””
The type
or format of the embedded content.
Src=””
The
URL/path of the embedded item.
Example
<object width=”1000” height=1000”></object>
<iframe src=”some_other_webpage.html”
width=”500” height=”500”></iframe>
<embed src=”some_video.swf”width=”500”
Height=”500”></embed>
HTML5
New Tags
<header> … </header>
Specifies the webpage header. Could also be used for objects
the webpage.
<footer> … </footer>
Specifies the webpage footer. Could
also be used for objects inside the webpage.
<main> … </main>
Marks
the main content of the webpage.
<article> … </article>
Denotes
an article.
<aside> … </aside>
Denotes content displayed in a
sidebar of the webpage.
<section> … </section>
Specifies
a particular section in the webpage.
<datails> … </details>
Used for
additional information.User has the option to view or hide this.
<summary> …</summary>
Used as
a heading for the above tag. Is always visible to the user.
<dialog> … </dialog>
Used to
create a dialog box.
<figure> …</figure>
A tag
reserved for figures (diagrams, charts) in HTML5.
<figcaption> … </figcaption>
A
description of the figure is placed
inside these.
<marks>…</marks>
Used to
highlight a particular portion of the text.
<nav>…</nav>
Navigation
links for the user in a webpage.
<menuitem>…</menuitem>
A
particular item from a list or a menu.
<meter>…</meter>
Measures
data within a given range.
<progress>…</progress>
Typically
used as a progress bar, this is used to track progress.
<rp> … </rp>
This tag is meant for showing text
for browsers without ruby annotation support.
<rt> … </rt>
Displays East Asian typography character
details.
<ruby> … </ruby>
Describes
a ruby annotation for East Asian typography
<time> … </time>
Tag for
formatting date and time.
<wbr>
A line
break within the content.
Collective
Character Objects
" "
Quotation
Marks-“
< &It
Less
then sign-<
> >
Greater
than sign->
 
Non-breaking
space
© ©
Copyright
symbol- ©
& &
Ampersand-
&
@ Ü
@Symbol-@
• ö
Small
bullet- .
™ û
Trademark
symbol-^TM
Document
Structure
<h1..h6> … </h1..h6>
Six
different variations of writing a heading.<h1> has the largest font size
,while <h6> has the smallest.
<div> …</div>
A
webpage’s content is usually divided into blocks, specified by the div tag.
<span> … </span>
This tag
injects inline elements, like an image,icon, emoticon without ruining the
formatting / stying of the page.
<p> … </p>
Plain
text is placed inside this tag.
<br/>
A line
break for webpages. Is used when wanting to write a new line.
<hr/>
similar
to the above tag. But in addition to switching to the next line, this tag also
draws a horizontal bar to indicate the end of the section.
Example
<div>
<h1>Top
5 Greatest Films</h1>
<p>These
are considered the greatest <span>reel-icon</span> ofall time
</p>
<hr/>
<h2>1.The
Godfather</h2>
<p>This
1972 classic stars Marlon Brando and Al pacino.</p>
</div>
Text
Formatting
<strong> … </strong>
Makes
text bold. Used to emphasize a point
<b> … </b>
Alternative
to the above tag, also creates bold text.
<em> …</em>
Another
emphasis tag, but this displays text in italics.
<i>… </i>
Also
used to display text in italics, but does not emphasize it like the above tag.
<tt> … </tt>
Formatting
for typewriter-like text. No longer supported in HTML5.
<strike> … </strike>
Another
old tag, this is used to draw a line at the center of the text, so as to make
it appear unimportant or no longer useful.
<cite> … </cite>
Tag for citing author of a quote.
<del> … </del>
Pre-formatted,
‘monospace’ text laid out with whitespace inside the element intact.
<ins> … </ins>
Danites
text that has been inserted into the webpage.
<blockquote> … </blockquote>
Quotes
often go into this tag. Is used in tandem with the <cite>tag.
<q> … </q>
Similar
to the above tag, but for shorter quotes.
<abbr> … </abbr>
Denotes
abbreviations, along with the full forms.
<address> … </address>
Tag for
specifying author’s contact details.
<dfn> …. </dfn>
Tag
dedicated for definitions.
<code> … </code>
This is used to display code snippets within a paragraph.
<sub> … <sub>
Used for
writing a subscript (smaller font just below the mid-point of normal font).
Example:
<sup> … </sup>
Similar
to the above tag. But for superscripting.
<small> … </small>
Reduces text size. In HTML5, it often refers to redundant or invalid information.
Document Summary
Let us see how we can break the code up in different components:
<html> … </html>
This tag
specifies that the webpage is written in HTML. It appears at the very first and
last line of the webpage. It is mainly used to show that the page uses HTML5
–the latest version of the language. Also known as the root element, this tag can
be thought of as a parent tag for every other tag used in the page.
<head> … </head>
This tag
is used to specify meta data about the webpage.it includes the webpage’s name,
its dependencies (JS and CSS scripts), font usage etc.
<title> … </title>
As the name suggests, This tag contains the title/name of the
webpage open in the browser’s title bar for every webpage open in the browser.
Search engines use this tag to extract the topic of the webpage, which is quite
convenient when ranking relevant search results.
<body> … </body>
Everything
the user sees on a webpage is written inside this tag. It is a container for
all the contents os the webpage.
<html>
<head>
<title>My
First Website<title>
</head>
<body>
</body>
</html>
Document information
<base/>
Used to specify the base URL of
your site. This tag makes linking to internal links on your site cleaner.
<meta/>
This is
the meta date tag fir the webpage. Can be useful or mentioning the page’s author,
keywords, original published date etc.
<link/>
This is
used to link to scripts external to the webpage. Typically utilized for
including stylesheets.
<style> … </style>
The
style tag can be used as an alternative to an external style sheet, or
complement it. Includes the webpage’s appearance information.
<script> … <script>
Used to
add code snippets, typically in javaScript, to make webpage dynamic. It can
also be used to just link to an external script.
Example
<html>
<head>
<meta
charset=”utf-8”>
<base
href=http://myfirstwebsite.com
target=”blank”/>
<title>My
Beautiful Website</title>
<link
rel=”stylesheet”href=”/css/maser.css”>
<script
type=”text/javascript”>
Var
dummy =0;
</script>
</head>
<body>
</body>
</html>
0 Comments
thank you for your comment