Web Programming
1) Head
Name: <head>
Type: Container
Function: It is a container for all the head elements. It can include a title for the document, scripts,
styles, meta information, and more.
Syntax: <head> Head goes here </head>
Attributes: None
Example:
2) Title
Name: <title>
Type: Container
Function: Gives a descriptive title to the document
Syntax: <title> Title goes here </title>
Attributes: None
Example: <title> Advantages of Programming </title>
3) Headings
Name: <h1> to <h6>
Type: Container
Function: <h1> defines the most important heading. <h6> defines the least important heading.
Syntax: <h1> 1st heading goes here </h1>
Attributes:
Example: <h1> My First Heading </h1>
4) Break line
Web Programming
Name: <br>
Type: Standalone
Function: inserts a single line break.
Syntax: <br> break line
Attributes:
Example: This text contains<br>a line break.
5) Preformatting
Name: <pre>
Type: Container
Function: element is displayed in a fixed-width font , and it preserves both spaces and line breaks.
Syntax: <pre> Preformatted text goes here </pre>
Attributes:
Example: <pre> My name is Jenika
I like icecream
</pre>
6) Horizontal rule
Name: <hr>
Type: Standalone
Function: It is used to separate content (or define a change) in an HTML page.
Syntax: <hr> horizontal rule goes here
Attributes:
Example: HTML is a language for describing web pages. <hr>
Web Programming
7) Paragraph
Name: <p>
Type: Container
Function: It defines a paragraph
Syntax: <p>This is some text in a paragraph.</p>
Attributes:
Example: <p> My first paragraph. </p>
8) Comments
Name: <!--………-->
Type: Standalone
Function: Can type in comments that will not be displayed on the web page.
Syntax:<!—Comments go here-->
Attributes:
Example: <!--This can be changed-->
Font Formatting Elements
9) Bold text
Name:<b>
Type: Container
Function: specifies bold text.
Syntax: <b> text goes
Attributes:
Example: <b>and this is bold text</b>
10) Important text
Name: <strong>
Type: Container
Function: It defines important text.
Syntax: <strong> text goes here </text>
Attributes:
Example: <strong>Strong text</strong>
11) Italic text
Name: <i>
Type: Container
Function: renders as emphasized text
Web Programming
Syntax: <i> text goes here </i>
Attributes:
Example: <p>He named his car <i>The lightning</i>, because it was very
fast.</p>
12) Emphasized Text
Name: <em>
Type: Container
Function:. defines a part of text in an alternate voice or mood
Syntax: <em> text goes here </em>
Attributes:
Example: <em>Emphasized text</ em>
13) Marked text
ame: <mark>
N
Type: Container
Function: highlights parts of your text.
Syntax: <mark> text goes here </text>
Attributes:
Example: <p>Do not forget to buy <mark>milk</mark> today.</
p>
14) Small text
ame: <small>
N
Type: Container
Function: defines smaller text
Syntax: <small> text goes here </small>
Attributes:
Example: <small> Hey</small>
15) Deletes text
ame: <del>
N
Type: Container
Function: Deletes text
Syntax: <del> deleted text </del>
Attributes:
Example: p>My favorite color is <d
el>blue</del> !</p>
16) Inserted Text
ame: <ins>
N
Type: Container
Function: Inserts text
Syntax: <ins> Inserted text </ins>
Web Programming
Attributes:
Example: <p>My favorite color is <del>blue</del> <ins>red</
ins>!</p>
17) Subscript text
Name: <sub>
Type: Container
Function: Subscript text appears half a character below the normal line
Syntax: <sub> This text has subscript</sub>
Attributes:
Example:
18) Superscript text
Name: <sup>
Type:Container
Function: text appears half a character above the normal line
Syntax:<sup> This text has superscript</sup>
Attributes:
Example: a<sup>2</sup>
Phrase Formatting Elements
19) Short Quotations
Name: <q>
Type: Container
Function: Puts the text in quotations
Syntax: <q> Text goes here </q>
Attributes:
Example: <q> I will and I can </q>
20) Abbreviations
Name: <abbr>
Type: Container
Syntax: <abbr> Abbreviation goes here </abbr>
Function: Shows the abbreviation
Attributes:
Example: <abbr title= “ World Health Organization”>WHO</abbr>
21) Address
Name:<address>
Type:Container
Function: defines the contact information for the author/owner of a document or an article.
Syntax: <address>…..</address>
Attributes:
Web Programming
Example: <address>
Written by <a href="[Link] Doe</a>.<br>
Visit us at:<br>
[Link]<br>
Box 564, Disneyland<br>
USA
</address>
22) Cite
Name:<cite>
Type: Container
Function: It defines the title of a work
Syntax: <cite> Text goes here </cite>
Attributes:
Example: <cite> Harry Potter </cite> is a famous book
23) Bi-directional override
Name:<bdo>
Type: Container
Function: It is used to override the current text direction
Syntax: <bdo> text goes here</bdo>
Attributes:
Example: <bdo> dir=”rtl”> This text </bdo>
24) Keyboard input
Name:<kbd>
Type: Container
Function: Any input from the keyboard
Syntax:<kbd> …</kbd>
Attributes:
Example:<kbd> File </kbd>
25) Sample Output
Name :<samp>
Type: Container
Function: Gives any sample output
Syntax:<sample>….</sample>
Attributes:
Example:<sample> Sample output from a computer program </sample>
26) Program Code
Name :<code>
Type: Container
Web Programming
Function: Defines a program code
Syntax :< code> Computer code goes here</code>
Attributes:
Example :<code> printf(“hello”);</code>
27) Variable
Name :<var>
Type: Container
Function: Defines any variable
Syntax :<var> some variable</var>
Attributes:
Example: <var>E</var>=<var>c</var>
28)Anchor tag
Name:<a>
Type:Container
Function:defines a hyperlink, which is used to link from one page to another.
Syntax:<a>Link goes here</a>
Attributes:
Example: <a href="[Link] [Link]!</a>
29)Unordered list
Name: <ul>
Type: Container
Function:defines an unordered (bulleted) list.
Syntax:<ul> unordered list goes here</ul>
Attributes:
Example: <ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
30) List item
Name:<li>
Type: Container
Function: defines a list item.
Syntax: <li>list item goes here</li>
Attributes:
Example: <ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
Web Programming
31)Ordered HTML List
Name:<ol>
Type: Container
Function:defines an ordered list. An ordered list can be numerical or alphabetical.
Syntax: <ol> Ordered list goes here</ol>
Attributes:
Example: <ol>
<li>Coffee</li>
<li>Tea</li>
</ol>
32) Description list ( definition term)
Name:<dt>
Type: Container
Function: defines a term/name in a description list.
Syntax: <dt> term goes here </dt>
Attributes:
Example: <dt>Milk</dt>
<dd>White cold drink</dd>
33) Description list (definition description)
Name:<dd>
Type: Container
Function: used to describe a term/name in a description list.
Syntax: <dd>description goes here</dd>
Attributes:
Example: <dt>Milk</dt>
<dd>White cold drink</dd>
34) Description list ( description list)
Name:<dl>
Type:Container
Function: defines a description list.
Syntax: <dl> list goes here</dl>
Attributes:
Example: <dl>
Web Programming
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
35) Style
Name:<style>
Type:Container
Function: used to define style information for an HTML document.
Syntax: <style>.....</style>
Attributes:
Example: <style>
h1 {color:red;}
p {color:blue;}
</style>
36) Form
Name: <form>
Type: Container
Function: used to create an HTML form for user input.
Syntax: <form>.....</form>
Attributes:
Example: <form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
37) Input tag
Name: <input>
Type: Standalone
Function: specifies an input field where the user can enter data.
Syntax: <input type="submit" value="Submit">
Attributes:
Example: <input type="submit" value="Submit">
38) Text area
Web Programming
Name: <textarea>
Type: Container
Function: defines a multi-line text input control.
Syntax: <textarea rows="4" cols="50">
At [Link] you….
</textarea>
Attributes:
Example: <textarea rows="4" cols="50">
At [Link] you….
</textarea>
39) Select
Name: <select>
Type: Container
Function: used to create a drop-down list.
Syntax: <select>....</select>
Attributes:
Example: <select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
40) Option
Name: <option>
Type: Container
Function: tag defines an option in a select list.
Syntax: <option>......</option>
Attributes:
Example: <select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
41) Group related options
Name: <optgroup>
Type: Container
Function: used to group related options in a drop-down list.
Syntax: <optgroup>.....</optgroup>
Web Programming
Attributes:
Example: <optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
42) Meta
Name: <meta>
Type: Standalone
Function: provides metadata about the HTML document.
Syntax: <meta>.....</meta>
Attributes:
Example: <head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
</head>
43) Navigation
Name: <nav>
Type: Container
Function: defines a set of navigation links.
Syntax: <nav>.....</nav>
Attributes:
Example: <nav>
<a href="/html/">HTML</a> |
</nav>
44) Header
Name: <header>
Type: Container
Function: represents a container for introductory content or a set of navigational links.
Syntax: <header>........</header>
Attributes:
Example: <header>
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here</p>
</header>
45) Footer
Name: <footer>
Type: Container
Function: defines a footer for a document or section.
Web Programming
Syntax: <footer>......</footer>
Attributes:
Example: <footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="[Link]
someone@[Link]</a>.</p>
</footer>
46) Article
Name: <article>
Type: Container
Function: specifies independent, self-contained content.
Syntax: <article>........</article>
Attributes:
Example: <article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
</article>
47) Aside
Name: <aside>
Type: Container
Function: defines some content aside from the content it is placed in.
Syntax: <aside>.......</aside>
Attributes:
Example: <aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
48) Section
Name: <section>
Type: Container
Function: defines sections in a document, such as chapters, headers, footers, or any other sections of
the document.
Syntax: <section> Section goes here</section>
Attributes:
Example: <section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
Web Programming
49) Division
Name: <div>
Type: Container
Function: defines a division or a section in an HTML document.
Syntax: <div>.....</div>
Attributes:
Example: <div style="background-color:lightblue">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
50) Table
Name: <table>
Type: Container
Function: defines an HTML table.
Syntax: <table>...</table>
Attributes:
Example: <table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
51) Table head
Name: <th>
Type: Container
Function: defines a header cell in an HTML table.
Syntax: <th>...</th>
Attributes:
Example: <th>Month</th>
Web Programming
52) Table row
Name: <tr>
Type: Container
Function: defines a row in an HTML table.
Syntax: <tr>......</tr>
Attributes:
Example: <tr>
<td>January</td>
<td>$100</td>
</tr>
53) Table data
Name: <td>
Type: Container
Function: defines a standard cell in an HTML table.
Syntax: <td>....</td>
Attributes:
Example: <td>Cell A</td>
54) Caption
Name: <caption>
Type: Container
Function: defines a table [Link] <caption> tag must be inserted immediately after the <table> tag.
Syntax: <caption>......</caption>
Attributes:
Example: <caption>Monthly savings</caption>
55) Script
Name: <script>
Type: Container
Function: used to define a client-side script (JavaScript).
Syntax: <script>...</script>
Attributes:
Example: <script>
[Link]("demo").innerHTML = "Hello JavaScript!";
</script>
56) No script
Name: <noscript>
Type: Container
Function: defines an alternate content for users that have disabled scripts in their browser or have a
browser that doesn't support script.
Web Programming
Syntax: <noscript>....</noscript>
Attributes:
Example: <script>
[Link]("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>
57)
Name:
Type:
Function:
Syntax:
Attributes:
Example:
58)
Name:
Type:
Function:
Syntax:
Attributes:
Example:
59)
Name:
Type:
Function:
Syntax:
Attributes:
Example:
Web Programming