HTML Tags
HTML Tags:
1. <html> tag: The <html > tag tells the browser that this is an HTML document. It represents the root of an HTML document and is the container for all other HTML elements.
2. <head> tag: The <head> element is a container for all the head elements. It must include a title for the document, and can include scripts, styles and more.
3. <title> tag: The <title> tag is required in all HTML documents and it defines the title of the document.
Code
<html> <head> <title> HTML Reference </title> </head> </html>
4. <body> tag: The body tag defines the document's body. It contains all the contents of an HTML, document, such as text, hyperlinks, images, tables, lists, etc.
Code
<html> <head> <title> Title of the document </title> </head> <body> The content of the document </body> </html>
Attributes of <body> tag:
4.1. <body bgcolor="color_name"> tag: The bgcolor attribute specifies the background color of a document.Code
<body bgcolor="red"> </body>
Code
<body text="green" > </body>
Code
<body link= "blue"> </body>
Code
<body vlink="red"> </body>
Code
<body alink="green"> </body>
Code
<body style="background-color: Yellow"></body>
5. <header> tag: The < header> tag specifies a header for a document or section.
We can have several <header> elements in one document.
The font size of the content within the header tag varies depending on the type of header tag.
The default is font style is Times New Roman.
Attributes of <header> tag:
5.1. <h1 align="left/right center/justify"> tag: The align attribute specifies the horizontal alignment of a heading.
Code
<h1 align="center">This is heading 1</h1>
Code
<h1 style="background-color: yellow">title</h1>
6. <p> tag: The <p> tag defines a paragraph.
Code
<p>This is some text in a paragraph. </p>
Attributes of <p> tag:
6.1. <p align="left/right/center/justify"> tag: The align attribute specifies the alignment of the text within a paragraph.
Code
<p align="center">This is a paragraph</p>
Code
<p style="background-color: color_name">This is a paragraph</p>
7. <a> tag: The <a> tag defines a hyperlink, which is used to link from one page to another.
Attributes of <a> tag:
7.1 <a href="URL"> tag: The href attribute specifies the URL of the page the link goes to. If the href attribute is not present, the <a> tag is not a hyperlink.Code
<a href="URL">Click here</a>
Code
<a href="#abc">See Chapter 4</a> <h2><a id="abc">Chapter 4</a></h2>
This attribute is only used if the href attribute is set. The value of the attribute will be the name of the downloaded file.
Code
<a href="Winter.jpg" download>
8. <img> tag: The <img> tag defines an image in an HTML page.
Attributes of <img> tag:
8.1. <img src="URL"> tag: The src attribute specifies the URL of the image.
Code
<img src="smiley.jpg">
8.2 <img align="left|right|middle|top|bottom"> tag: The align attribute specifies the alignment of an image according to the surrounding element.
Code
<img src="smiley.jpg” align="middle">
8.3. <img height="pixels"> tag: The height attribute specifies the height of an image, in pixels.
8.4 <img width="pixels"> tag: The width attribute specifies the width of an image, in pixels.
Code
<img src="smiley.gif" height="42" width="42">
8.5. <img border="pixels"> tag: The border attribute specifies the width of the border around an image.
Code
<img src="smiley.gif" border="5">
9. <hr> tag: The <hr> tag defines a thematic break in an HTML page.
Code
<h1>Header 1</h1> <p>HTML document 1</p> <hr> <h1>Header 2</h1> <p>HTML document 2</p>
Attributes of <hr> tag:
9.1. <hr align="left|center|right"> tag: The align attribute specifies the alignment of a horizontal line.
9.2. <hr width=” pixel|%"> tag: The width attribute specifies the width of a horizontal line, in pixels or percent.
Code
<hr align="left" width="50%">
10. <br> tag: The <br> tag inserts a single line break.
Code
<p> Html document <br> CSS document </p>
11. Test Formatting:
11.1. <b> tag: The <b> tag specifies bold text.
Code
<p> <b> This text is in bold </b> </p>
11.2. <i> tag: The <i> tag specifies italic text.
Code
<p> <i> This text is in italic </i> </p>
11.3. <sub> tag: The <sub> tag defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font.
Code
<p> This text contains <sub>subscript</sub> text. </p>
11.4. <sup> tag: The <sup> tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font.
Code
<p> This text contains <sup>superscript</sup> text. </p>
12. <pre> tag: The <pre> tag defines preformatted text.
Code
<pre> Text in a pre-element displayed in a fixed-width font, and it preserves both spaces and line breaks </pre>
13. <address> tag: The <address> tag defines the contact information for the author/owner of a document or an article
Code
<address> Visit us at: <br> Example.com <br> Box 564, Disneyland <br> USA </address>
14. <bdo> tag: The <bdo> tag is used to override the current text direction.
Attribute of <bdo> tag:
14.1. <bdo dir="ltr|rtl”> tag: The dir attribute specifies the text direction of the text inside a <bdo>element.
Code
<bdo dir="rtl"> This text will go right-to-left </bdo>
15. <del> tag: The <del> tag defines text that has been deleted from a document.
Code
<p>My favorite color is <del>blue</del></p>
16. <ins> tag: The <ins> tag defines a text that has been inserted into a document.
Code
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
17. Comment tag: The comment tag is used to insert comments in the source code. Comments are not displayed in the browser.
Code
<! --This is a comment. -->
18. Style definition:
18.1. <font color="color_name"> tag: The color attribute specifies the color of the text inside a <font> element.
Code
<h1><font color="red">This is some text! </font> </h1>
18.2 <font size="number"> tag: The size attribute specifies the size of the text inside a <font> element.
Code
<h1><font size="6">This is some text! </font> </h1>
18.3. <h1 align="left|right|center|justify"> tag: The align attribute specifies the horizontal alignment of a heading
Code
<h1 align="center">This is heading 1</h1>
18.4. <font face="font family"> tag: The face attribute specifies the font of the text inside a <font> element.
Code
<h1><font face="Times New Roman">Text </font> </h1>
19. Setting image as a link: This tag is used to set an image as a link.
Code
<a href=" "> <img src="Winter.jpg" alt="alt.txt" width="42" height="42"> </a>
20. <table> tag: The <table> tag defines an HTML table. An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements.
The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.
Code
<table> <tr> <th> Month </th> <th> Savings </th> </tr> <tr> <td> January </td> <td> $100 </td> </tr> </table>
Attributes of <table> tag are:
20.1. <table align="left|right|center"> tag: The align attribute specifies the alignment of a table according to surrounding text.
Code
<table align="right">
20.2. <table bgcolor="color_name"> tag: The bgcolor attribute specifies a background color of a table.
Code
<table bgcolor="Yellow">
20.3. <table border="1"> tag: The border attribute specifies if a border should be displayed around the table cells or not.
Code
<table border="1">
20.4. <table cellpadding="pixels"> tag: The cellpadding attribute specifies the space, in pixels, between the cell wall and the cell content.
Code
<table cellpadding="10">
20.5. <table cellspacing="pixels"> tag: The cellspacing attribute specifies the space, in pixels, between cells.
Code
<table cellspacing="10">
20.6. <table width= "pixels|%"> tag: The width attribute specifies the width of a table.
Code
<table width="400">
21. <caption> tag: The <caption> defines a table caption. The <caption> tag must be inserted immediately after the <table> tag.
Code
<table> <caption>Monthly savings</caption> </table>
22. <marquee> tag: The HTML <marquee> tag is used for scrolling piece of text or image displayed either horizontally across or vertically down your website page depending on the settings.
Code
<marquee> This is basic example of </marquee>
Attribute of <marquee> tag:
22.1. <marquee direction="right|left"> tag: This tag is used to move the text or image horizontally across.
Code
<h1> <marquee direction="right"> Header <marquee > </h1>
23. <frameset> tag: This tag defines a frameset. It holds one or more e <frame> elements.
Code
<frameset rows="25%, *, 25%"> <frame src =" "> </frameset>
24. <ul> tag: The <ul > tag defines an unordered (bulleted) list.
Code
<ul > <li>Tea </li> <li>Coffee </li > <li>Milk </li > </ul >
25. <ol> tag: The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
Code
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
26. Nested list: This is a combination of both ordered and unordered lists.
Code
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black Tea </li> <li>Green Tea </li> </ul> </li> <li>Milk</li> </ul>
27. <input> tag: The <input> tag specifies an input field where the user can enter data. The <input> elements are used within a <form> element to declare input controls that allow users to input data.
Attribute of <input> tag:
27.1. <input type="value"> tag: The type attribute specifies the type of <input> element to display. The default type is: text.
28. <form> tag: The <form> tag is used to create an HTML form for user input.
Attributes of <form> tag:
28.1 <form action= "URL"> tag: The action attribute specifies where to send the form-data when a form is submitted.
Code
<form action="demo_form.html"> First name: <input type="text" name="fname"> <br> Last name: <input type="text" name= "Iname"> <br> <input type="submit" value="Submit"> </form>
28.2. <form method="get|post"> tag: The method attribute specifies how to send form-data. The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").
Code
<form action= "demo_form.http" method="get"> First name: <input type="text" name="fname"> <br> Last name: <input type="text" name="lname"> <br> <input type="submit" value="Submit"> </form>
28.3. <form name="text"> tag: The name attribute specifies the name of a form.
Code
<form action ="demo_form.http" method= "get" name= "My_form"> First name: <input type="text" name= "fname"> <br> Last name: <input type="text" name= "lname"> <br> <input type="submit" value="Submit"> </form>
28.4. <form target="_blank|_self|_parent|_top" >tag: The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
Code
<form action="demo_form.html" method="get" target="_blank"> First name: <input type="text" name="fname"> <br> Last name: <input type="text" name="lname"> <br> <input type="submit" value="Submit"> </form>
29. <textarea> tag: The <textarea> tag defines a multi-line text input control.
Attributes of <textarea> tag:
29.1. <textarea rows="number"> tag: The rows attribute specifies the visible height of a text area, in lines.
29.2. <textarea cols="number"> tag: The cols attribute specifies the visible width of a text area.
Code
<textarea rows="4" cols ="50"> Enter text here… </textarea>
29.3. <textarea maxlength="number"> tag: The maxlength attribute specifies the maximum length (in characters) of a text area.
Code
<textarea maxlength="50"> Enter text here… </textarea>
29.4. <textarea disabled> tag: The disabled attribute is a boolean attribute. When present, it specifies that the text area should be disabled. A disabled text area is unusable and the text is not selectable (cannot be copied)
30. <button> tag: The <button> tag defines a clickable button.
Attribute of <button> tag:
30.1 <button type="button|submit|reset"> tag: The type attribute specifies the type of button.
Code
<button type="reset" value="Reset"> Reset</button>
31. <select> tag: The <select> element is used to create a drop-down list.
The <option> tags inside the <select> element define the available options in the list.
Code
<select> <option value="volvo">Volvo</option> <option value="mercedes">Mercedes</option> <option value="audi" >Audi </option> </select>
Attributes of <select> tag:
31.1 <select multiple> tag: The multiple attribute is a boolean attribute. When present, it specifies that multiple options can be selected at once.
Code
<select multiple> <option value="volvo">Volvo</option> <option value="mercedes">Mercedes</option> <option value="audi" >Audi </option> </select>
31.2 <select size= "number"> tag: The size attribute specifies the number of visible options in a drop-down list.
If the value of the size attribute is greater than 1, but lower than the total number of options in the list, the browser will add a scroll bar to indicate that there are more options to view.
Code
<select size="2"> <option value=" volvo"> Volvo</option> <option value="mercedes">Mercedes</option> <option value ="audi" >Audi </option> </select>
31.3. <select name= "text"> tag: The name attribute specifies the name for a drop-down list
Code
<select name="cars"> <option value="volvo"> Volvo</option> <option value="mercedes">Mercedes</option> <option value="audi"> Audi </option> </select>
32. <optgroup> tag: The <optgroup> is used to group related options in a drop-down list. If you have a long list of options, groups of related options are easier to handle for a user.
Attribute of <optgroup> tag:
32.1. <optgroup label= "text ">tag: The label attribute specifies a label for an option-group.
Code
<select> <optgroup label= "Swedish Cars"> <option value="volvo"> Volvo</option> <option value="saab"> Saab</option> </optgroup> <optgroup label= "German Cars"> <option value="mercedes">Mercedes</option> <option value="audi"> Audi </option> </optgroup> </select>
33. <fieldset> tag: The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a box around the related elements.
The <legend> tag defines a caption for the <fieldset> element.
Code
<form> <fieldset> <legend>Personal Info</legend> First name: <input type="text" name="fname"> <br> Last name: <input type="text" name="lname"> <br> </fieldset> </form>
34. <u> tag: The <u> tag is used to underline the text
Code
<p>This is a<u> paragraph</u>. </p>
Post a Comment