MGINGER

BASIC HTML TAGS

Labels:
TagsDescription • Meaning • Definition
<a>ANCHOR tag creates <a href="http://www.fillster.com">link</a> to other internet location, or file.
<abbr>ABBREVIATION tags indicate interpretation of the meaning to the browsers and search engines for such as kind of abbreviations as "Inc.", "etc.".
<acronym>ACRONYM tags defines an acronym, like; <acronym title="World Wide Web">WWW</acronym>.
<address>ADDRESS tags are used to identify the author's contact information for a section or a document.
<applet>APPLET element tags are used to embed and invoke a Java application within an HTML page.
<area>AREA tag defines a section of an image.
<b>BOLD tag is specifying <b>bold section</b> within the text document.
<base>BASE tag defines information regarding to the links on the page.
<basefont>BASEFONT tags defines changes of all text appearance on the web page.
<bdo>BDO tag is specifying the direction of text display by overwriting the default value from Left to Right. <bdo dir="rtl">Right to Left</bdo>
<bgsound>BGSOUND tag is defining a background sound for a webpage.

<html>
  <head>
    <bgsound src="JingleBells.wav" loop="3">
  </head>
  <body>
  </body>
</html>

Demo • Example
<big>BIG tag makes the <big>text larger</big> then the rest of the text.
<blockquote>BLOCKQUOTE tags
<blockquote>separate a section</blockquote>
of text from the surrounding text.
<blink>BLINK tags defines text to <blink>blink</blink> repeatedly. Internet Explorer doesn't support this tag yet.
<body><html>
  <head>
  </head>
  <body>
      Body tags identify the content of a web page.
  </body>
</html>
<br>Line Break tag is specifying<br>
a new line
<button>BUTTON tag is used to create a <button type="button">Push Button</button>  
<caption><table>
  <caption>CAPTION tag adds a caption to a table.</caption>
    <tr>
      <td>
      </td>
    </tr>
</table>
<center>
<center>CENTER tags center text, images, etc.</center>
<cite><cite>CITE tags defines a citation and displaying in italics.</cite>
<code>CODE tags are used for example, to indicate a code of the current <code>htmltags.html</code> page.
<col>COL tags are used to define column properties for table columns.

<table>
  <colgroup span="2">
    <col width="60" align="left"></col>
    <col width="80" align="center"></col>
  </colgroup>
  <tr>
    <td>1st Column</td>
    <td>2nd Column</td>
  </tr>
</table>
<colgroup>COLGROUP tags are used to define groups of table columns.

<table>
  <colgroup span="2">
    <col width="60" align="left"></col>
    <col width="80" align="center"></col>
  </colgroup>
  <tr>
    <td>1st Column</td>
    <td>2nd Column</td>
  </tr>
</table>
<dd>DD tag defines a definition description.

<dl>
  <dt>NASA</dt>
    <dd>National Aeronautics and Space Administration</dd>
  <dt>MBA</dt>
    <dd>Master of Business Administration</dd>
</dl>
<dfn>DFN tags emphasize definition, for example; <dfn>PC</dfn>: Personal Computer.
<del>DEL tag indicates <del>deleted text</del>
<dir>DIR tags define directory lists.

<dir>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</dir>
<dl>DL tag defines a definition list.

<dl>
  <dt>CSU</dt>
    <dd>California State University</dd>
  <dt>UN</dt>
    <dd>United Nations</dd>
</dl>
<div>DIV tag is a logical section of a web document.

<div>
  <h1>Home Pets</h1>
    <p>Cats</p>
    <p>Dogs</p>
</div>
<dt>DT tags defines a definition term.

<dl>
  <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>
TagsDescription • Meaning • Definition
<embed>EMBED tag gives a command to a browser to include a multimedia elements, such as video, sound files within a web document.

<embed src="videofile.mov" width="100" height="100">

<embed src="musicfile.mid" width="50" height="50">

Demo • Example
<em>EM tags <em>emphasize</em> text.
<fieldset>FIELDSET tag creates a form for all elements in it.

<fieldset>Find a rounded-corner box around this text.</fieldset>
<font>FONT tags attribute text <font face="cursive, serif">font</font>, <font color="#0000ff">color</font>, and <font size="4">size</font>.
<form>Form tags define a form.

<form action="contact.html" method="post">
  Your Email:
    <input type="text" name="visitor-email" maxlength="80" value="" /><br />
  Your Name:
    <input type="text" name="visitor-name" maxlength="80" value="" /><br />
    <input type="submit" value="Send" />
</form>


eMail: 

Name: 

<frame>Frame tags define each frame within a frameset.

<html>
<head>
  <title>Frame Tags in Action</title>
</head>
<noframes>
  <body>
    <h1>Sorry, your browser doesn't support this feature!</h1>
  </body>
</noframes>
<frameset cols="35%, 65%">
  <frame src ="/htmlcodes/left-frame.html" />
  <frame src ="/htmlcodes/right-frame.html" />
</frameset>
</html>

Demo • Example
<frameset>FRAMESET tags define a layout of frames.

<html>
<frameset cols="45%, *">
  <frame src ="/htmlcodes/left-frame.html" />
  <frame src ="/htmlcodes/right-frame.html" />
</frameset>
</html>

Demo • Example
<h1> - <h6>H1 - H6 define level 1-6 headers.

<h1>Header 1</h1>

<h2>Header 2</h2>

<h3>Header 3</h3>

<h4>Header 4</h4>

<h5>Header 5</h5>
<h6>Header 6</h6>
<head>Head tags define general information about the document, page title, meta-tags, scripts and links to follow, and other commands to browsers.

<html>
  <head>
    <title>HTML Tags - Head Tag</title>
    <meta name="keywords" content="html tags, head tag" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="javaexample.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>
<hr>HR tag draws a horizontal break line.


Two choices for the same result: <hr> or <hr />
<html>HTML tags contain HTML elements, and give a command to browsers to read the document as an HTML document.

<html>
  <head>
  </head>
  <body>
  </body>
</html>
<iframe>iFrame tag creates an inline frame that contains another web page in it.

<img>IMG tag attributes an image.

<img src="http://www.fillster.com/images/tutorial.gif" width="60" height="62" alt="Here write a name for your image" />

IMG tag tutorial demonstration
<input>INPUT tags define input fields, check boxes, radio buttons.

<form action="contact.html" method="post">
  Your Email:
    <input type="text" name="visitor-email" maxlength="80" value="" /><br />
  Your Name:
    <input type="text" name="visitor-name" maxlength="80" value="" /><br />
    <input type="radio" name="Level" value="Web Designer" />Web Designer<br />
    <input type="radio" name="Level" value="Web Developer" checked="checked" />Web Developer<br />
    <input type="checkbox" name="Computer" value="Windows" />Windows<br />
    <input type="checkbox" name="Computer" value="Mac" />Mac<br />
    <input type="submit" value="Send" />
</form>


eMail: 

Name: 

Web Designer
Web Developer

Windows
Mac

<ins>INS tag defines an <ins>inserted text</ins>.
<isindex>ISINDEX tag defines a single-line input field.

<isindex prompt="Example: ">

<i><I> tag is specifying <i>italic text</i>.
<kbd>KBD tag stands for <kbd>keyboard text</kbd>.
<label>LABEL tag defines a label to a form control.

<p>Where do you live?</p>
<form action="">
  <input type="radio" name="country" id="us" />
    <label for="usa">USA</label><br />
  <input type="radio" name="country" id="uk" />
    <label for="uk">UK</label>
</form>


Where do you live?

<legend>LEGEND tag assigns a caption in a fieldset element.

<legend>Questionnaire</legend>
<p>Where do you live?</p>
<form action="">
  <input type="radio" name="country" id="usa" />
    <label for="usa">USA</label><br />
  <input type="radio" name="country" id="canada" />
    <label for="canada">Canada</label>
</form>

Questionnaire
Where do you live?

<li>LI tag defines a list of ordered and unordered items.

<ol>
    <li>HTML</li>
    <li>PHP</li>
    <li>JavaScript</li>
</ol>

<ul>
    <li>HTML</li>
    <li>PHP</li>
    <li>JavaScript</li>
</ul>


  1. HTML
  2. PHP
  3. JavaScript
  • HTML
  • PHP
  • JavaScript
<link>LINK tag defines a link to an external document, such as External Style Sheets.

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<marquee>MARQUEE tags define different movement behaviors.

Demos • Examples
<menu>MENU tag defines a menu list.

<menu>
    <li>Google</li>
    <li>Yahoo</li>
    <li>MSN</li>
</menu>


  • Google
  • Yahoo
  • MSN
    • <meta>META tags are declaring information for the search engine robots and crawlers.

    <html>
      <head>
        <meta name="description" content="Page description goes here.">
        <meta name="keywords" content="meta tags, html tags, meta">
      </head>
      <body>
      </body>
    </html>
    <noframe>NOFRAME tag is specifying an alternate web page layout for browsers that don't support frames.

    <html>
    <head>
      <title>Frame Tags in Action</title>
    </head>
    <noframes>
      <body>
        <h1>Sorry, your browser doesn't support this feature!</h1>
      </body>
    </noframes>
    <frameset cols="35%, 65%">
      <frame src ="/htmlcodes/left-frame.html" />
      <frame src ="/htmlcodes/right-frame.html" />
    </frameset>
    </html>

    Demo • Example
    <noscript>NOSCRIPT tag is specifying a "NOSCRIPT" version page layout for browsers that don't support "SCRIPT" version. NOSCRIP tags are used in conjunction with the JavaScript or VBScript elements.

    <script type="text/javascript" language="javascript">
      document.write("We are here to learn HTML");
    </script>
    <noscript>
      Sorry, your browser doesn't support JavaScript, VBScript.
    </noscript>
    TagsDescription • Meaning • Definition
    <optgroup>OPTGROUP tag creates an option drop-down group menu.

    <select>
      <optgroup label="Fruits">
        <option value ="banana">Banana</option>
        <option value ="pineapple">Pineapple</option>
      </optgroup>
      <optgroup label="Vegetables">
        <option value ="tomato">Tomato</option>
        <option value ="potato">Potato</option>
      </optgroup>
    </select>

    <option>OPTION tag creates a drop-down menu. OPTION tag works only in conjunction with a SELECT tag.

    <select>
        <option value ="beginner" selected="selected">Beginner</option>
        <option value ="intermediate">Intermediate</option>
        <option value ="advanced">Advanced</option>
    </select>

    <ol>OL tags define an ordered list of items.

    <ol>
        <li>Red</li>
        <li>Green</li>
        <li>Blue</li>
    </ol>


    1. Red
    2. Green
    3. Blue
    <p><P> tag is specifying a paragraph and creates a new line.

    <h4>Header 4</h4>


    <p>This is a paragraph.</p>
    <pre>PRE tag is specifing a preformatted text. This tag does,t let the browsers to eliminate "white spaces" in the text.

    <pre>
    City  London  Cool
City  Paris  Awesome
City  New York Great
    </pre>

       EXAMPLE


City  London  Cool
City  Paris  Awesome
City  New York Great
    <q><Q> tag is specifing short quotations. The function is similar to <blockquote> tag except that <Q> tag doesn't break lines of the text.

    <q>I'll be back</q> - is a popular phrase associated with Arnold Schwarzenegger.
    <s><S> tag produces a strike throughout a text. <S> tag is depreciated and is not supported in XHTML 1.0 Strict DTD, therefore it's recommended to use DEL tag instead.

    Strike through <s>the following text.</s>
    <samp>SAMP tag is specifing a fixed-width font.

    Compare for yourself - 1 <samp>Compare for yourself - 2<samp>
    <script>SCRIPT tags define scripts within a web page and let the web browsers know that it's not an HTML section. You can place a <SCRIPT> tag anywhere within HTML, but the best practice is to place it between the <HEAD></HEAD> tags.

    <html>
      <head>
        <script src="javascript.js" type="text/javascript"></script>
      </head>
      <body>
        <script type="text/javascript">
            document.write("This is a script tag placement tutorial.")
        </script>
      </body>
    </html>
    <select>SELECT tag creates a menu on a form.

    <select>
        <option value ="planes" selected="selected">Planes</option>
        <option value ="trains">Trains</option>
        <option value ="automobiles">Automobiles</option>
    </select>

    <small>SMALL tag creates a small text.

    Compare normal text in relationship to <small>small text</small>
    <span>SPAN tag is specifying a section of a document.

    <div>
        <p>Cats and Dogs <span style="color:blue;">are our friends.</span></p>
    </div>
    <strike>STRIKE tag creates a strike through words or text. Strike tag is depreciated and is not supported in XHTML 1.0 Strict DTD, therefore it's recommended to use DEL tag instead.

    <strike>striking through</strike>
    <strong>STRONG tag is specifying a strong text.

    <div>
        <p>Weightlifters are <strong>strong people.</strong></p>
    </div>
    <style>STYLE tag specifies a link and location to a style sheet, and gives a command to browsers regarding to a layout for a web page. Please find; First bold line is an External Style, and the next bold lines are for the Internal Style web page presentation.

    <html>
      <head>
        <title>HTML Tags - Head Tag</title>
        <link rel="stylesheet" type="text/css" href="style.css" />

        <style type="text/css">
            h1{text-align: center; font-style: italic}
            p{color:#ff0000}
        </style>
      </head>
      <body>
      </body>
    </html>
    <sub>SUB tag is defining a subscripted text.

    SUB tag is creating <sub>a subscripted text.</sub>
    <sup>SUP tag is defining a superscripted text.

    SUP tag is creating <sup>a superscripted text.</sup>
    <table>TABLE tag is defining a table.

    <table>
      <tr>
        <td>First Cell</td>
        <td>Second Cell</td>
      </tr>
    </table>
    <td>TD tag creates a data cell.

    <table>
      <tr>
        <td>First Data Cell</td>
        <td>Second Data Cell</td>
      </tr>
    </table>
    <th>TH tag creates a header cell.

    <table>
      <tr>
        <th colspan="2">My Shopping List</th>
      </tr>
      <tr>
        <td>Apples</td>
        <td>Pears</td>
      </tr>
    </table>
    <tr>TR tag creates a row in a table.

    <table>
      <tr>
        <td>Data Cell 1</td>
        <td>Data Cell 2</td>
      </tr>
    </table>
    <tbody>TBODY tag creates a table body.

    <table>
      <thead>
        <tr>
          <td colspan="2">>Header - Complete List of Basic HTML Tags</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tags</td>
          <td>Attributes</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">>Footer - Created by Fillster.com</td>
        </tr>
      </tfoot>
    </table>
    <textarea>TEXTAREA tag creates a text area.

    <textarea rows="4" cols="30">
      Place you text in here...
    </textarea>

    <tfoot>TFOOT tag creates a table footer.

    <table>
      <thead>
        <tr>
          <td colspan="2">>Header - HTML Tags List</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>HTML Tags</td>
          <td>HTML Attributes</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">>Footer - Copyright © Fillster.com</td>
        </tr>
      </tfoot>
    </table>
    <thead>THEAD tag creates a table header.

    <table>
      <thead>
        <tr>
          <td colspan="2">>Header text place here.</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Element - 1</td>
          <td>Element - 2</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">>Footer notes put here.</td>
        </tr>
      </tfoot>
    </table>
    <title>TITLE tag declares a title of an HTML document.

    <html>
      <head>
        <title>Brief description of the web page.</title>
      </head>
      <body>
      </body>
    </html>
    <tt>TT tag creates a teletype text.

    This is a default font of the text, <tt>but this is a teletype font.</tt>
    <u>U tag makes an underlined text.

    This text has the <u>underlined words.</u>
    <ul>UL tags define an unordered list of items.

    <ul>
        <li>Code</li>
        <li>Script</li>
        <li>Tag</li>
    </ul>


    • Code
    • Script
    • Tag
    <var>VAR tag indicates a variable parameter.

    This is a <var>variable parameter<var> of the sentence.

    1 comment: