Introduction to HTML: Tags, Attributes, and Structure

HTML HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1995 It is used to design web pages using the markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages and markup language defines the text document within t he tag that define the structure of web pages. The major points of HTML are given below: o HTML stands for HyperText Markup Language. o HTML is used to create web pages and web applications. o HTML is widely used language on the web. o We can create a static website by HTML only. o Technically, HTML is a Markup language rather than a programming language. Tags vs Attributes in HTML(Building blocks of HTML) HTML Tags: Tags are the starting and ending parts of an HTML element. They begin with < symbol and end with > symbol. Whatever written inside < and > are called tags. Example : <b> </b> Tags are divided into three groups: 1. Document structure 2. Block 3. inline HTML Attributes: It is used to define the character of an HTML element. It always placed in the opening tag of an element. It generally provides additional styling (attribute) to the element. Example: <p align="center">This is paragraph.</p> Golden Rules To Remember  The vast majority of tags must be opened (<tag>) and closed (</tag>) with the element information such as a title or text resting between the tags.  When using multiple tags, the tags must be closed in the order in which they were opened. For example: Example: <strong><em>This is really important!</em></strong> HTML Basic Format Page Structure The basic structure of an HTML page is laid out below. It contains the essential building-block elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which all web pages are created. <DOCTYPE! html> – A doctype or document type declaration is an instruction that tells the web browser about the markup language in which the current page is written. It is not an element or tag. The doctype declaration is not case-sensitive.  <html> – This tag is used to define the root element of HTML document. This tag tells the browser that it is an HTML document. It is the second outer container element that contains all other elements within it.  <head> – This tag is used to define the head portion of the HTML document that contains information related to the document. Elements within the head tag are not visible on the front-end of a webpage.  <body> – The body tag is used to enclose all the visible content of a webpage. In other words, the body content is what the browser will show on the front end. Example 1: This is the basic example of HTML that display the heading and paragraph content.   HTML <!DOCTYPE html> <html>  <head>  <title>Basic Web Page</title> </head>  <body>  <h1>Welcome to JMIETI</h1>  <p>A computer science portal for College</p> </body> </html> Characteristics of HTML:  Easy to understand: It is the most straightforward language you can say, very easy to grasp this language and easy to develop.  Flexibility: This language is so much flexible that you can create whatever you want, a flexible way to design web pages along with the text.  Linkable: You can make linkable text like users can connect from one page to another page or website through these characteristics.  Limitless features: You can add videos, GIFs, pictures, or sound anything you want that will make the website more attractive and understandable.  Support: You can use this language to display the documents on any platform like Windows, Linux, or Mac.  Not a Programming Language: HTML is not a programming language as it is only concerned with presenting the information on the web. It is not used to program any logic but to give structure and semantically meaning to our website. Though we can link JavaScript code to it which is a programming language.  Language Support: HTML can support various other languages like JavaScript, Ruby, PHP, Perl, and many more. You can also able to run embed python during the runtime. Advantages of HTML:  HTML is easy to learn, easy to apply and it’s totally free you will just need a text editor and a browser.  HTML is supported by all the browsers and it is the most friendly search engine.  HTML can easily integrate with other languages and is easy to develop.  It is the basic of all programming languages and the lightest language ever.  In HTML, the display changes frequently depending on the window size or the device size making it comfortable to read by the user. Disadvantages of HTML:  HTML can be used to create only static Web-page, it can not create dynamic web-page.  There is a lack of security in HTML.  Creating a simple Web-page required so many tags.  HTML language is not centralised i.e. all the web pages that are connected, you have to design them separately else need to use CSS.  HTML becomes complex when you try to create a huge website. HTML Editors HTML text editors are used to create and modify web pages. HTML codes can be written in any text editors including the notepad. One just needs to write HTML in any text editor and save the file with an extension “.html” or “.htm”. Some of the popular HTML text editors are given below:  Notepad  Notepad++  Sublime Text 3  Atom Notepad Notepad is a simple text editor. It is an inbuilt desktop application available in Windows OS. Brackets Brackets is an open-source software primarily used for Web development. It provides live HTML, CSS, JavaScript editing functionality. Sublime Text 3 Sublime is a cross platform code editor tool. It supports all markup languages. Atom Atom is an open source code editor tool for MAC, Linux and Windows. Steps to write HTML code in Editor: 1. Open any of the text editors of your choice. Here we are using the notepad text editor. 2. Create new file: File->New File or Ctrl+N. 3. Write HTML code in text editor. 4. Save the file with a suitable name of your choice and .html extension. 5. Open the saved HTML file in your favourite browser (double click on the file, or right-click – and choose “Open with”). Core HTML Attributes: The four core attributes that can be used on the majority of HTML elements (although not all) are −  Id  Title  Class  Style The Id Attribute The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary reasons that you might want to use an id attribute on an element −   If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content. If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name. We will discuss style sheet in separate tutorial. For now, let's use the id attribute to distinguish between two paragraph elements as shown below. Example <p id = "html">This para explains what is HTML</p> <p id = "css">This para explains what is Cascading Style Sheet</p> The title Attribute The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute − The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading. Example <!DOCTYPE html> <html> <head> <title>The title Attribute Example</title> </head> <body> <h3 title = "Hello HTML!">Titled Heading Tag Example</h3> </body> </html> This will produce the following result − Now try to bring your cursor over "Titled Heading Tag Example" and you will see that whatever title you used in your code is coming out as a tooltip of the cursor. The class Attribute The class attribute is used to associate an element with a style sheet, and specifies the class of element. You will learn more about the use of the class attribute when you will learn Cascading Style Sheet (CSS). So for now you can avoid it. The value of the attribute may also be a space-separated list of class names. For example − class = "className1 className2 className3" The style Attribute The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element. <!DOCTYPE html> <html> <head> <title>The style Attribute</title> </head> <body> <p style = "font-family:arial; color:#FF0000;">Some text...</p> </body> </html> This will produce the following result − At this point of time, we are not learning CSS, so just let's proceed without bothering much about CSS. Here, you need to understand what are HTML attributes and how they can be used while formatting content. Internationalization Attributes There are three internationalization attributes, which are available for most (although not all) XHTML elements.  dir  lang  xml:lang The dir Attribute The dir attribute allows you to indicate to the browser about the direction in which the text should flow. The dir attribute can take one of two values, as you can see in the table that follows − Value Meaning ltr Left to right (the default value) rtl Right to left (for languages such as Hebrew or Arabic that are read right to left) Example <!DOCTYPE html> <html dir = "rtl"> <head> <title>Display Directions</title> </head> <body> This is how IE 5 renders right-to-left directed text. </body> </html> This will produce the following result − When dir attribute is used within the <html> tag, it determines how text will be presented within the entire document. When used within another tag, it controls the text's direction for just the content of that tag. The lang Attribute The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new XHTML documents. The values of the lang attribute are ISO-639 standard two-character language codes. Check HTML Language Codes: ISO 639 for a complete list of language codes. Example <!DOCTYPE html> <html lang = "en"> <head> <title>English Language Page</title> </head> <body> This page is using English Language </body> </html> This will produce the following result − The xml:lang Attribute The xml:lang attribute is the XHTML replacement for the lang attribute. The value of the xml:lang attribute should be an ISO-639 country code as mentioned in previous section. Generic Attributes Here's a table of some other attributes that are readily usable with many of the HTML tags. Attribute Options Function align right, left, center Horizontally aligns tags valign top, middle, bottom Vertically aligns tags within an HTML element. bgcolor numeric, hexidecimal, RGB Places a background color behind an values element background URL Places a background image behind an element id User Defined Names an element for use with Cascading Style Sheets. class User Defined Classifies an element for use with Cascading Style Sheets. width Numeric Value Specifies the width of tables, images, or table cells. height Numeric Value Specifies the height of tables, images, or table cells. title User Defined "Pop-up" title of the elements. We will see related examples as we will proceed to study other HTML tags. For a complete list of HTML Tags and related attributes please check reference to HTML Tags List. HTML - Header We have learnt that a typical HTML document will have following structure − Document declaration tag <html> <head> Document header related tags </head> <body> Document body related tags </body> </html> This chapter will give a little more detail about header part which is represented by HTML <head> tag. The <head> tag is a container of various important tags like <title>, <meta>, <link>, <base>, <style>, <script>, and <noscript> tags. The HTML <title> Tag The HTML <title> tag is used for specifying the title of the HTML document. Following is an example to give a title to an HTML document − <!DOCTYPE html> <html> <head> <title>HTML Title Tag Example</title> </head> <body> <p>Hello, World!</p> </body> </html> This will produce the following result − The HTML <meta> Tag The HTML <meta> tag is used to provide metadata about the HTML document which includes information about page expiry, page author, list of keywords, page description etc. Following are few of the important usages of <meta> tag inside an HTML document − <!DOCTYPE html> <html> <head> <title>HTML Meta Tag Example</title>  <meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">  <meta name = "description" content = "Simply Easy Learning by Tutorials Point">  <meta name = "author" content = "Tutorials Point">  <meta http-equiv = "content-type" content = "text/html; charset = UTF-8">  <meta http-equiv = "refresh" content = "30">  <meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">  <meta name = "robots" content = "noindex, nofollow"> </head> <body> <p>Hello, World!</p> </body> </html> This will produce the following result − The HTML <base> Tag The HTML <base> tag is used for specifying the base URL for all relative URLs in a page, which means all the other URLs will be concatenated into base URL while locating for the given item. For example, all the given pages and images will be searched after prefixing the given URLs with base URL http://www.tutorialspoint.com/ directory − <!DOCTYPE html> <html> <head> <title>HTML Base Tag Example</title> <base href = "https://www.tutorialspoint.com/" /> </head> <body> <img src = "/images/logo.png" alt = "Logo Image"/> <a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a> </body> </html> This will produce the following result − But if you change base URL to something else, for example, if base URL is http://www.tutorialspoint.com/home then image and other given links will become like http://www.tutorialspoint.com/home/images/logo.png and http://www.tutorialspoint.com/html/index.htm The HTML <link> Tag The HTML <link> tag is used to specify relationships between the current document and external resource. Following is an example to link an external style sheet file available in css sub-directory within web root − <!DOCTYPE html> <html> <head> <title>HTML link Tag Example</title> <base href = "https://www.tutorialspoint.com/" /> <link rel = "stylesheet" type = "text/css" href = "/css/style.css"> </head> <body> <p>Hello, World!</p> </body> </html> This will produce the following result − The HTML <style> Tag The HTML <style> tag is used to specify style sheet for the current HTML document. Following is an example to define few style sheet rules inside <style> tag − <!DOCTYPE html> <html> <head> <title>HTML style Tag Example</title> <base href = "https://www.tutorialspoint.com/" /> <style type = "text/css"> #00aa77 .myclass { background-color: #aaa; padding: 10px; } </style> </head> <body> <p class = "myclass">Hello, World!</p> </body> </html> This will produce the following result − Note − To learn about how Cascading Style Sheet works, kindly check a separate tutorial available at css The HTML <script> Tag The HTML <script> tag is used to include either external script file or to define internal script for the HTML document. Following is an example where we are using JavaScript to define a simple JavaScript function − <!DOCTYPE html> <html> <head> <title>HTML script Tag Example</title> <base href = "http://www.tutorialspoint.com/" /> <script type = "text/JavaScript"> function Hello() { alert("Hello, World"); } </script> </head> <body> <input type = "button" onclick = "Hello();" name = "ok" value = "OK" /> </body> </html> This will produce the following result, where you can try to click on the given button – OK HTML - Formatting If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML. Bold Text Anything that appears within <b>...</b> element, is displayed in bold as shown below − Example <!DOCTYPE html> <html> <head> <title>Bold Text Example</title> </head> <body> <p>The following word uses a <b>bold</b> typeface.</p> </body> </html> This will produce the following result − Italic Text Anything that appears within <i>...</i> element is displayed in italicized as shown below − Example <!DOCTYPE html> <html> <head> <title>Italic Text Example</title> </head> <body> <p>The following word uses an <i>italicized</i> typeface.</p> </body> </html> This will produce the following result − Underlined Text Anything that appears within <u>...</u> element, is displayed with underline as shown below − Example <!DOCTYPE html> <html> <head> <title>Underlined Text Example</title> </head> <body> <p>The following word uses an <u>underlined</u> typeface.</p> </body> </html> This will produce the following result − Strike Text Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text as shown below − Example <!DOCTYPE html> <html> <head> <title>Strike Text Example</title> </head> <body> <p>The following word uses a <strike>strikethrough</strike> typeface.</p> </body> </html> This will produce the following result − Monospaced Font The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width. Example <!DOCTYPE html> <html> <head> <title>Monospaced Font Example</title> </head> <body> <p>The following word uses a <tt>monospaced</tt> typeface.</p> </body> </html> This will produce the following result − Superscript Text The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters. Example <!DOCTYPE html> <html> <head> <title>Superscript Text Example</title> </head> <body> <p>The following word uses a <sup>superscript</sup> typeface.</p> </body> </html> This will produce the following result − Subscript Text The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters. Example <!DOCTYPE html> <html> <head> <title>Subscript Text Example</title> </head> <body> <p>The following word uses a <sub>subscript</sub> typeface.</p> </body> </html> This will produce the following result − Inserted Text Anything that appears within <ins>...</ins> element is displayed as inserted text. Example <!DOCTYPE html> <html> <head> <title>Inserted Text Example</title> </head> <body> <p>I want to drink <del>cola</del> <ins>wine</ins></p> </body> </html> This will produce the following result − Deleted Text Anything that appears within <del>...</del> element, is displayed as deleted text. Example <!DOCTYPE html> <html> <head> <title>Deleted Text Example</title> </head> <body> <p>I want to drink <del>cola</del> <ins>wine</ins></p> </body> </html> This will produce the following result − Larger Text The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it as shown below − Example <!DOCTYPE html> <html> <head> <title>Larger Text Example</title> </head> <body> <p>The following word uses a <big>big</big> typeface.</p> </body> </html> This will produce the following result − Smaller Text The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below − Example <!DOCTYPE html> <html> <head> <title>Smaller Text Example</title> </head> <body> <p>The following word uses a <small>small</small> typeface.</p> </body> </html> This will produce the following result − Grouping Content The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page. For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div> element so that they appear using a special set of style rules. Example <!DOCTYPE html> <html> <head> <title>Div Tag Example</title> </head> <body> <div id = "menu" align = "middle" > <a href = "/index.htm">HOME</a> | <a href = "/about/contact_us.htm">CONTACT</a> | <a href = "/about/index.htm">ABOUT</a> </div> <div id = "content" align = "left" > <h5>Content Articles</h5> <p>Actual content goes here.....</p> </div> </body> </html> This will produce the following result − The <span> element, on the other hand, can be used to group inline elements only. So, if you have a part of a sentence or paragraph which you want to group together, you could use the <span> element as follows. Example <!DOCTYPE html> <html> <head> <title>Span Tag Example</title> </head> <body> <p>This is the example of <span style = "color:green">span tag</span> and the <span style = "color:red">div tag</span> alongwith CSS</p> </body> </html> This will produce the following result − These tags are commonly used with CSS to allow you to attach a style to a section of a page. HTML - Comments Comment is a piece of code which is ignored by any web browser. It is a good practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. Comments help you and others understand your code and increases code readability. HTML comments are placed in between  tags. So, any content placed with-in  tags will be treated as comment and will be completely ignored by the browser. Example <!DOCTYPE html> <html> <head>  <title>This is document title</title> </head>  <body> <p>Document content goes here.....</p> </body> </html> This will produce the following result without displaying the content given as a part of comments – Valid vs Invalid Comments Comments do not nest which means a comment cannot be put inside another comment. Second the double-dash sequence "--" may not appear inside a comment except as part of the closing -> tag. You must also make sure that there are no spaces in the start-of comment string. Example Here, the given comment is a valid comment and will be wiped off by the browser. <!DOCTYPE html> <html> <head> <title>Valid Comment Example</title> </head> <body>  <p>Document content goes here.....</p> </body> </html> This will produce the following result − But, following line is not a valid comment and will be displayed by the browser. This is because there is a space between the left angle bracket and the exclamation mark. <!DOCTYPE html> <html> <head> <title>Invalid Comment Example</title> </head> <body> < !-- This is not a valid comment --> <p>Document content goes here.....</p> </body> </html> This will produce the following result − Multiline Comments So far we have seen single line comments, but HTML supports multi-line comments as well. You can comment multiple lines by the special beginning tag  placed before the first line and end of the last line as shown in the given example below. Example <!DOCTYPE html> <html> <head> <title>Multiline Comments</title> </head> <body> <!-This is a multiline comment and it can span through as many as lines you like. --> <p>Document content goes here.....</p> </body> </html> This will produce the following result − Conditional Comments Conditional comments only work in Internet Explorer (IE) on Windows but they are ignored by other browsers. They are supported from Explorer 5 onwards, and you can use them to give conditional instructions to different versions of IE. Example <!DOCTYPE html> <html> <head> <title>Conditional Comments</title>  </head> <body> <p>Document content goes here.....</p> </body> </html> You will come across a situation where you will need to apply a different style sheet based on different versions of Internet Explorer, in such situation conditional comments will be helpful. Using Comment Tag There are few browsers that support <comment> tag to comment a part of HTML code. Note − The <comment> tag deprecated in HTML5. Do not use this element. Example <!DOCTYPE html> <html> <head> <title>Using Comment Tag</title> </head> <body> <p>This is <comment>not</comment> Internet Explorer.</p> </body> </html> If you are using IE, then it will produce following result − But if you are not using IE, then it will produce following result − Commenting Script Code Though you will learn JavaScript with HTML, in a separate tutorial, but here you must make a note that if you are using Java Script or VB Script in your HTML code then it is recommended to put that script code inside proper HTML comments so that old browsers can work properly. Example <!DOCTYPE html> <html> <head> <title>Commenting Script Code</title> <script> <!-document.write("Hello World!") //--> </script> </head> <body> <p>Hello , World!</p> </body> </html> This will produce the following result − Commenting Style Sheets if you are using Cascading Style Sheet (CSS) in your HTML code then it is recommended to put that style sheet code inside proper HTML comments so that old browsers can work properly. Example <!DOCTYPE html> <html> <head> <title>Commenting Style Sheets</title> <style> <!-.example { border:1px solid #4a7d49; } //--> </style> </head> <body> <div class = "example">Hello , World!</div> </body> </html> This will produce the following result − HTML Phrase tag(Logical Tag) The HTML phrase tags are special purpose tags, which defines the structural meaning of a block of text or semantics of text. i.e. Logical tags are used to tell the browser what kind of text is written inside the tags. Some cases when we could use logical tags are:      When we want to write code on our website. When we want to Emphasize some text. When we want to display the abbreviation on the Web page. When we want to display some famous quotation on our web page. When we want to write some mathematical formula in terms of variables. Following is the list of phrase tags, some of which we have already discussed in HTML formatting. o Abbreviation tag : <abbr> o Acronym tag: <acronym> (not supported in HTML5) o Marked tag: <mark> o Strong tag: <strong> o Emphasized tag : <em> o Definition tag: <dfn> o Quoting tag: <blockquote> o Short quote tag : <q> o Code tag: <code> o Keyboard tag: <kbd> o Address tag: <address> 1. Text Abbreviation tag This tag is used to abbreviate a text. To abbreviate a text, write text between <abbr> and </abbr> tag. Example 1. <p>An <abbr title = "Hypertext Markup language">HTML </abbr>language is used to create web pages. </p> Output: 2. Marked tag: The content written between <mark> and </mark> tag will show as yellow mark on browser. This tag is used to highlight a particular text. Play Video Example 1. <p>This tag will <mark>highlight</mark> the text.</p> Output: 3. Strong text: This tag is used to display the important text of the content. The text written between <strong> and </strong> will be displayed as important text. Example 1. <p>In HTML it is recommended to use <strong>lowercase</strong>, while writing a code. </p> Output: 4. Emphasized text This tag is used to emphasize the text, and displayed the text in italic form. The text written between <em> and </em> tag will italicized the text. Example 1. <p>HTML is an <em>easy </em>to learn language.</p> Output: 5. Definition tag: When you use the <dfn> and </dfn> tags, it allow to specify the keyword of the content. Following is the example to show how to definition element. Example 1. <p><dfn>HTML </dfn> is a markup language. </p> Output: 6. Quoting text: The HTML <blockquote> element shows that the enclosed content is quoted from another source. The Source URL can be given using the cite attribute, and text representation of source can display using <cite> ..... </cite>element. Example 1. <blockquote cite="https://www.keepinspiring.me/famousquotes/"><p>?The first step toward success is taken when you refuse to be a captive o f the environment in which you first find yourself.?</p></blockquote> 2. <cite>-Mark Caine</cite> Output: 7. Short Quotations: An HTML <q> ....... </q> element defines a short quotation. If you will put any content between <q> ....... </q>, then it will enclose the text in double quotes. Example: 1. <p>Steve Jobs said: <q>If You Are Working On Something That You Really Care A bout, You Don?t Have To Be Pushed. The Vision Pulls You.</q>?</p> Output: 8. Code tags The HTML <code> </code> element is used to display the part of computer code. It will display the content in monospaced font. 1. <p>First Java program</p> 2. <p><code>class Simple{ public static void main(String args[]){ 3. System.out.println("Hello Java"); }} </code> 4. </p> Output: 9. Keyboard Tag In HTML the keyboard tag, <kbd>, indicates that a section of content is a user input from keyboard. 1. <p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + t<kbd></kbd> to restore page on chrome.</p> Output: 10. Address tag An HTML <address> tag defines the contact information about the author of the content. The content written between <address> and </address> tag, then it will be displayed in italic font. 1. <address> You can ask your queries by contact us on <a href="">example123@new domain.com</a> 2. <br> You can also visit at: <br>58 S. Garfield Street. Villa Rica, GA 30187. 3. </address> Output: Tag Description <abbr> Defines the abbreviation of text. <acronym> Defines the acronym. <address> contact information of a person or an organization. <cite> Defines citation. It displays the text in italic format. <code> Defines the piece of computer code. <blockquote> Defines a long quotation. <del> Defines the deleted text and is used to mark a portion of text which has been deleted from the document. <dfn> Defines the definition element and is used to representing a defining instance in HTML. <ins> Defines inserted text. <kbd> Defines keyboard input text. <pre> Defines the block of preformatted text which preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers. <q> Defines the short quotation. <samp> Defines the sample output text from a computer program. Tag Description <strong> Defines strong text i.e. show the importance of the text. <var> Defines the variable in a mathematical equation or in the computer program. Now let’s implement some above-listed tags through examples 1. <bdo> Tag: The <bdo> tag stands for Bi-Directional Override. This tag is used to change the direction of the text. It takes a “dir” attribute which decides the direction of the text. Syntax: <bdo> Statements... </bdo>  HTML <!DOCTYPE html> <html> <body> <p>This text will go right-to-left</p> <bdo dir="rtl">Hello</bdo> <p>This text will go left-to-right</p> <bdo dir="ltr">Hello</bdo> </body> </html> Output: This text will go right-to-left Hello This text will go left-to-right Hello 2. <del> Tag: The <del> tag draws a line cutting the text which shows the text is wrong or deleted. Syntax: <del>Statements... </del>  HTML <!DOCTYPE html> <html> <body> <p>Welcome to year <del>2020</del> 2021</p> </body> </html> Output: 3. <ins> Tag: The <ins> tag is used to show that some text is inserted into the document. Browsers will usually show inserted tags underlined. Syntax: <ins>Statements... </ins>  HTML <!DOCTYPE html> <html> <body> <p>price of this shoe is <del>1000</del><ins>850</ins> </p> </body> </html> Output: 4. <strong> Tag: The <strong> tag is used to tell the browser that the text inside this tag is of great importance and significance. Browser displays this text in bold. Syntax: <strong>Statements... </strong>  HTML <!DOCTYPE html> <html> <body> <p>This is <strong>bolded (important)</strong> text. </p> </body> </html> Output: 5. <code> Tag: Code tag is used to tell the user that the text written inside this tag is a code of some programming language. The content inside this tag is displayed in monospace font. Syntax: <code>Statements... </code>  HTML <!DOCTYPE html> <html> <body> <p>This is <code>your code</code></p> </body> </html> Output: 6. <kbd> Tag: The <kbd> tag is used to denote that the text shown is input from the keyboard. The content inside is displayed in a monospace font. Syntax: <KBD>Statements... </KBD>  HTML <!DOCTYPE html> <html> <body> <p> Press <kbd>Ctrl</kbd> + <kbd>C</kbd> To copy text </p> </body> </html> Output: 7. <pre> Tag: Text in a pre tag is displayed in fixed width-font, and preserves all the spaces and break lines i.e. the text is shown exactly as it was written in HTML source code. Syntax: <pre>Statements... </pre>  HTML <!DOCTYPE html> <html> <body> <pre> Welcome to geeks for geeks this is pre tag </pre> </body> </html> Output: Sample Code using Logical Tags: This example contains all logical tags.  HTML <!DOCTYPE html> <html> <body> <h1>Logical Tags</h1>  Welcome to <abbr title="Hello"> GFG </abbr> <br />  This is <acronym title="Hello"> GFG </acronym> <br />  <address> Hello, 5th & 6th Floor, Royal Kapsons, A- 118, Sector- 136, Noida, Uttar Pradesh (201305) </address> <br />  <cite> Hello </cite> is my favourite website. <br />  <code> Sample code: system.out.println(); </code>  <blockquote cite= "https://www.Hello.org/"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, and quizzes. </blockquote>  <del> This contains deleted content.</del>  <ins> Newly inserted content.</ins>  <p> <dfn> Hello </dfn> is a Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, and quizzes. </p>  <kbd> Hello - This is a Keyboard input </kbd>  <pre> Dear User, Congratulations !! We are delighted to inform you that you are going to be part of GfG journey. Thanks, GfG Team This is a predefine formatted text </pre> </body> </html> Output: HTML Paragraphs Tags: In this article, we will know the HTML Paragraph, & its basic implementation through the examples. The <p> tag in HTML defines a paragraph. These have both opening and closing tags. So anything mentioned within <p> and </p> is treated as a paragraph. Most browsers read a line as a paragraph even if we don’t use the closing tag i.e, </p>, but this may raise unexpected results. So, it is a good convention, and we must use the closing tag. Syntax: <p> Content </p> Example 1: In this example, we are using the <p> tag that is used for paragraphs in HTML.  HTML <!DOCTYPE html> <html> <body> <h2>Welcome To Hello</h2>  <p>A computer science portal for geeks.</p> </body> </html> Output: HTML <p> tag Example 2: This example explains the HTML <p> tag.  HTML <!DOCTYPE html> <html> <body> <p>A Computer Science portal for geeks.</p> <p>It contains well written, well thought articles.</p> </body> </html> Output: Multiple <p> tags Key Points: When we look at the webpage, we see that there are few spaces added before and after a paragraph. HTML does this by default. Let’s look at a few properties of the paragraph tag:  As already mentioned, the<p>tag automatically adds space before and after any paragraph, which is basically margins added by the browser.  If a user adds multiple spaces, the browser reduces them to a single space.  If a user adds multiple lines, the browser reduces them to a single line.  By default, the display of the Paragraph element is set to “block” which you can change using CSS. This means that if you add another paragraph to the webpage the next paragraph will be inserted in the next line on the webpage. Example: This example explains the HTML <p> tag having multiple lines.  HTML <!DOCTYPE html> <html> <body> <p> This paragraph has multiple lines. But HTML reduces them to a single line, omitting the carriage return we have used. </p> <p> This paragraph has multiple spaces. But HTML reduces them all to a single space, omitting the extra spaces and line we have used. </p> </body> </html> Output: <p> tag with multiple lines <br> tag: There is a way to let the HTML know where the browser needs to change the lines by using the <br> tag. These tags do not have any closing tag. So, just a single opening tag will change the line. Syntax: <br> Example: This example explains the <br> tag inside the <p> tag to add the line-break.  HTML <!DOCTYPE html> <html> <body> <p> This paragraph has multiple <br />lines. But HTML reduces them <br />to a single line, omitting <br />the carriage return we have used. </p> </body> </html> Output: Use of <br> tag inside the <p> tag Align attribute: The <p> tag specifically supports the alignment attribute and allows us to align our paragraphs in left, right, or center alignment. Syntax: <p align="value"> Example: This example explains the align attribute to align the content in the <p> tag.  HTML <!DOCTYPE html> <html> <body> <p align="center">Welcome Geeks</p> <p align="left">A Computer Science portal for geeks.</p> <p align="right">It contains well written, well thought articles.</p> </body> </html> Output: Use of align attribute in <p> tag <pre> tag: We have seen how the paragraph tag ignores all the changes of lines and extra spaces within a paragraph, but there is a way to preserve this by the use of the <pre> tag. It also contains an opening and a closing tag. It displays a text within a fixed height and width and preserves the extra lines and spaces we use. Syntax: <pre> Content </pre> Example: This example explains the use of the <pre> tag in the <p> tag. HTML  <!DOCTYPE html> <html> <body> <pre> This paragraph has multiple lines. But it is displayed as it is unlike the paragraph tag. </pre> <pre> This paragraph has multiple spaces. But as it is tag. </pre> </body> </html> Output: it is displayed unlike the paragraph Use of <pre> tag in the <p> tag HTML Heading A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display on the webpage. When you place the text within the heading tags <h1>.........</h1>, it is displayed on the browser in the bold format and size of the text depends on the number of heading. There are six different HTML headings which are defined with the <h1> to <h6> tags, from highest level h1 (main heading) to the least level h6 (least important heading). h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6 is used for least important. Headings in HTML helps the search engine to understand and index the structure of web page. Play Video Note: The main keyword of the whole content of a webpage should be display by h1 heading tag. See this example: 1. <h1>Heading no. 1</h1> 2. <h2>Heading no. 2</h2> 3. <h3>Heading no. 3</h3> 4. <h4>Heading no. 4</h4> 5. <h5>Heading no. 5</h5> 6. <h6>Heading no. 6</h6> Test it Now Output: Heading no. 1 Heading no. 2 Heading no. 3 Heading no. 4 Heading no. 5 Heading no. 6 Heading elements (h1....h6) should be used for headings only. They should not be used just to make text bold or big. o HTML headings can also be used with nested elements. Following are different codes to display the way to use heading elements. Example: 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>Heading elements</title> 5. </head> 6. <body> 7. <h1>This is main heading of page. </h1> 8. <p>h1 is the most important heading, which is used to display the keyword of page </p> 9. <h2>This is first sub-heading</h2> 10. <p>h2 describes the first sub heading of page. </p> 11. <h3>This is Second sub-heading</h3> 12. <p>h3 describes the second sub heading of page.</p> 13. <p>We can use h1 to h6 tag to use the different subheading with their paragraphs if 14. required. 15. 16. </p> </body> 17. </html> Output: HTML - Formatting If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML. Bold Text Anything that appears within <b>...</b> element, is displayed in bold as shown below − Example <!DOCTYPE html> <html> <head> <title>Bold Text Example</title> </head> <body> <p>The following word uses a <b>bold</b> typeface.</p> </body> </html> This will produce the following result − Italic Text Anything that appears within <i>...</i> element is displayed in italicized as shown below − Example <!DOCTYPE html> <html> <head> <title>Italic Text Example</title> </head> <body> <p>The following word uses an <i>italicized</i> typeface.</p> </body> </html> This will produce the following result − Underlined Text Anything that appears within <u>...</u> element, is displayed with underline as shown below − Example <!DOCTYPE html> <html> <head> <title>Underlined Text Example</title> </head> <body> <p>The following word uses an <u>underlined</u> typeface.</p> </body> </html> This will produce the following result − Strike Text Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text as shown below − Example <!DOCTYPE html> <html> <head> <title>Strike Text Example</title> </head> <body> <p>The following word uses a <strike>strikethrough</strike> typeface.</p> </body> </html> This will produce the following result − Monospaced Font The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width. Example <!DOCTYPE html> <html> <head> <title>Monospaced Font Example</title> </head> <body> <p>The following word uses a <tt>monospaced</tt> typeface.</p> </body> </html> This will produce the following result − Superscript Text The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters. Example <!DOCTYPE html> <html> <head> <title>Superscript Text Example</title> </head> <body> <p>The following word uses a <sup>superscript</sup> typeface.</p> </body> </html> This will produce the following result − Subscript Text The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters. Example <!DOCTYPE html> <html> <head> <title>Subscript Text Example</title> </head> <body> <p>The following word uses a <sub>subscript</sub> typeface.</p> </body> </html> This will produce the following result − Inserted Text Anything that appears within <ins>...</ins> element is displayed as inserted text. Example <!DOCTYPE html> <html> <head> <title>Inserted Text Example</title> </head> <body> <p>I want to drink <del>cola</del> <ins>wine</ins></p> </body> </html> This will produce the following result − Deleted Text Anything that appears within <del>...</del> element, is displayed as deleted text. Example <!DOCTYPE html> <html> <head> <title>Deleted Text Example</title> </head> <body> <p>I want to drink <del>cola</del> <ins>wine</ins></p> </body> </html> This will produce the following result − Larger Text The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it as shown below − Example <!DOCTYPE html> <html> <head> <title>Larger Text Example</title> </head> <body> <p>The following word uses a <big>big</big> typeface.</p> </body> </html> This will produce the following result − Smaller Text The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below − Example <!DOCTYPE html> <html> <head> <title>Smaller Text Example</title> </head> <body> <p>The following word uses a <small>small</small> typeface.</p> </body> </html> This will produce the following result − Grouping Content The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page. For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div> element so that they appear using a special set of style rules. Example <!DOCTYPE html> <html> <head> <title>Div Tag Example</title> </head> <body> <div id = "menu" align = "middle" > <a href = "/index.htm">HOME</a> | <a href = "/about/contact_us.htm">CONTACT</a> | <a href = "/about/index.htm">ABOUT</a> </div> <div id = "content" align = "left" > <h5>Content Articles</h5> <p>Actual content goes here.....</p> </div> </body> </html> This will produce the following result − The <span> element, on the other hand, can be used to group inline elements only. So, if you have a part of a sentence or paragraph which you want to group together, you could use the <span> element as follows. Example <!DOCTYPE html> <html> <head> <title>Span Tag Example</title> </head> <body> <p>This is the example of <span style = "color:green">span tag</span> and the <span style = "color:red">div tag</span> alongwith CSS</p> </body> </html> This will produce the following result − These tags are commonly used with CSS to allow you to attach a style to a section of a page. CHARACTER ENTITY REFERENCE A character entity is a code used to represent a character that doesn't belong to the document's character set. With this mechanism, authors of HTML documents can insert symbols by writing strings composed by well known and widely supported characters. There are three ways to write a character entity, and all of them start with an ampersand ("&") and end with a semicolon (";"):    By its entity name: a standarized and unique name for each character (for example, á for "á"). By its decimal code: a number sign ("#") followed by a decimal code, unique for each character (for example, á for "á"). By its hexadecimal code: a number sign ("#") followed by a lowercase letter X followeb by a hexadecimal code, unique for each character (for example, á for "á"). ‘<‘ is already reserved in HTML language. Sometimes this character needs to display on the web page that creates ambiguity in code. Along with these are the character which is normally not present in basic keyboard ( £, ¥, €, © ), etc. We will explore the HTML entities in detail as we grow in the article. Syntax: &entity_name; or &#entity_number; HTML Character Entities The following sections present the complete lists of character entity references. Essential Entities The following table lists the the essential entities in HTML. Character Entity Name Entity Number Description & & & Ampersand " " " Double quote mark < < < Less than symbol > > > Greater than symbol ' ' ' Apostrophe (XHTML only) Currency Symbols The following table lists the entities for currency symbols. Character Entity Name Entity Number Description ¢ ¢ ¢ Cent £ £ £ Pound ¤ ¤ ¤ General currency ¥ ¥ ¥ Yen € € € Euro Copyright, Trademark, and Registered Symbol The following table lists the entities for copyright, trademark, and registered symbol. Character Entity Name Entity Number Description © © © Copyright ® ® ® Registered ™ ™ ™ Trademark General Punctuation The following table lists the entities for general punctuation. Character Entity Name Entity Number Description &ensp;   En space &emsp;   Em space     Thin space     Nonbreaking space – – – En dash — — — Em dash ‘ ‘ ‘ Left/Opening single-quote ’ ’ ’ Right/Closing single-quote and apostrophe ‚ &sbquo; ‚ Single low-9 quotation mark “ “ “ Left/Opening double-quote ” ” ” Right/Closing double-quote „ &bdquo; „ Double low-9 quotation mark ‹ &lsaquo; ‹ Left-pointing single angle quotation mark › &rsaquo; › Left-pointing single angle quotation mark « « « Left-pointing double angle quotation mark » » » Right-pointing double angle quotation mark † &dagger; † Dagger ‡ &Dagger; † Double dagger • • • Bullet … &hellep; … Ellipses ‰ &permil; ‰ Per mille symbol (per thousand) ′ ′ ′ Prime, minutes, feet ″ ″ ″ Double prime, seconds, inches ‾ &oline; ‾ Overline Ú &frasl; ⁄ Fraction slash Arrows The following table lists the entities for arrows. Character Entity Name Entity Number Description ← ← ← Left arrow ↑ ↑ ↑ Up arrow → → → Right arrow ↓ ↓ ↓ Down arrow ↔ ↔ ↔ Left-right arrow ↵ &crarr; ↵ Down arrow with corner leftward ⇐ ⇐ ⇐ Leftward double arrow ⇑ &uArr; ⇑ Upward double arrow ⇒ ⇒ ⇒ Rightward double arrow ⇓ &dArr; ⇓ Downward double arrow ⇔ ⇔ ⇔ Left-right double arrow Mathematical Symbols The following table lists the entities for mathematical symbols. Character Entity Name Entity Number Description ∀ ∀ ∀ for all ∂ ∂ ∂ Partial differential ∃ ∃ ∃ There exists ∅ ∅ ∅ Empty set, null set, diameter ∇ ∇ ∇ Nabla, backward difference ∈ ∈ ∈ Element of ∉ ∉ ∉ Not an element of ∋ &ni; ∋ Contains as a member ∏ ∏ ∏ N-ary product, product sign ∑ ∑ ∑ N-ary summation − − − Minus sign ∗ &lowast; ∗ Asterisk operator √ √ √ Square root, radical sign ∝ &prop; ∝ Proportional to ∞ ∞ ∞ Infinity ∠ &ang; ∠ Angle ∧ &and; ∧ Logical and, wedge ∨ &or; ∨ Logical or, vee ∩ ∩ ∩ Intersection, cap ∪ ∪ ∪ Union, cup ∫ ∫ ∫ Integral ∴ &there4; ∴ Therefore ∼ &sim; ∼ Tilde operator, varies with, similar to ≅ &cong; ≅ Approximately equal to ≈ ≈ ≈ Almost equal to, asymptotic to ≠ ≠ ≠ Not equal to ≡ &equiv; ≡ Equivalent to ≤ ≤ ≤ Less than or equal to ≥ ≥ ≥ Greater than or equal to ⊂ ⊂ ⊂ Subset of ⊃ ⊃ ⊃ Superset of ⊄ &nsub; ⊄ Not a subset of ⊆ &sube; ⊆ Subset of or equal to ⊇ &supe; ⊇ Superset of or equal to ⊕ &oplus; ⊕ Circled plus, direct sum ⊗ &otimes; ⊗ Circled times, vector product ⊥ &perp; ⊥ Up tack, orthogonal to, perpendicular ⋅ ⋅ ⋅ Dot operator Greek Letters The following table lists the entities for greek letters. Character Entity Name Entity Number Description Α Α Α Greek capital alpha Β Β Β Greek capital beta Γ Γ Γ Greek capital gamma Δ Δ Δ Greek capital delta Ε Ε Ε Greek capital epsilon Ζ Ζ Ζ Greek capital zeta Η Η Η Greek capital eta Θ Θ Θ Greek capital theta Ι Ι Ι Greek capital iota Κ Κ Κ Greek capital kappa Λ Λ Λ Greek capital lambda Μ Μ Μ Greek capital mu Ν Ν Ν Greek capital nu Ξ Ξ Ξ Greek capital xi Ο Ο Ο Greek capital omicron Π Π Π Greek capital pi Ρ Ρ Ρ Greek capital rho Σ Σ Σ Greek capital sigma Τ Τ Τ Greek capital tau Υ Υ Υ Greek capital upsilon Φ Φ Φ Greek capital phi Χ Χ Χ Greek capital chi Ψ Ψ Ψ Greek capital psi Ω Ω Ω Greek capital omega α α α Greek small alpha β β β Greek small beta γ γ γ Greek small gamma δ δ δ Greek small delta ε ε ε Greek small epsilon ζ ζ ζ Greek small zeta η η η Greek small eta θ θ θ Greek small theta ι ι ι Greek small iota κ κ κ Greek small kappa λ λ λ Greek small lambda μ μ μ Greek small mu ν ν ν Greek small nu ξ ξ ξ Greek small xi ο ο ο Greek small omicron π π π Greek small pi ρ ρ ρ Greek small rho ς &sigmaf; ς Greek small letter final sigma σ σ σ Greek small sigma τ τ τ Greek small tau υ υ υ Greek small upsilon φ φ φ Greek small phi χ χ χ Greek small chi ψ ψ ψ Greek small psi ω ω ω Greek small omega ϑ &thetasym; ϑ Greek small theta symbol ϒ &upsih; ϒ Greek upsilon with hook ϖ ϖ ϖ Greek pi symbol Miscellaneous The following table lists the other useful entities supported by HTML. Character Entity Name Entity Number Description ⌈ &lceil; ⌈ Left ceiling ⌉ &rceil; ⌉ Right ceiling ⌊ &lfloor; ⌊ Left floor ⌋ &rfloor; ⌋ Right floor ⟨ &lang; ⟨ Left-pointing angle bracket ⟩ &rang; ⟩ Right-pointing angle bracket ◊ &loz; ◊ Lozenge ℑ &image; ℑ Blackletter capital I, imaginary part ℘ &weierp; ℘ Script capital P, power set ℜ &real; ℜ Blackletter capital R, real part ℵ &alefsym; ℵ Alef symbol, or first transfinite cardinal ♠ &spades; ♠ Black spade suit ♣ &clubs; ♣ Black club suit ♥ &hearts; ♥ Black heart suit ♦ &diams; ♦ Black diamond suit Hypertext: Hypertext can be defined as the text shown on your web browser's screen, which contains hyperlinked data (data here means from which document it will go to which document) and hence leads readers to different web pages by clicking on them. In this chapter, you will learn how to create your hyperlinks and use them to build websites and web pages. Anchor Tag The Anchor tag in HTML can be defined as a means to create a hyperlink that can link your current page on which the text is being converted to hypertext via <a> (anchor tag) to another page. This anchoring from one page to another is made possible by the attribute "href", which can be abbreviated (hypertext reference). href attribute The attribute 'href' of the Anchor tag is implemented for defining the address or path to which this hypertext will get linked. In other words, it can be said that it directs you out of your page to that destination page, whose link you have mentioned within the double quotes of the href attribute as value. The syntax for an anchor tag with href attribute looks something like this: <a href="URL">Text Here</a> Appearance of HTML <a> tag Since Anchor tags are used for giving hyperlinks, you might have noticed that they change color based on certain situations, such as unvisited, clicked, visited, etc. Let's see their color code concerning their activity:    An unvisited link gets displayed with properties like underlined, and the color is blue. A link that is visited gets displayed as underlined with color as purple. A link that is an active link gets displayed as underlined with red color. Still, many web developers will deposit their link colors in their web pages to match their site's color scheme. Here's the format: <body bgcolor="red" text="yellow" link="blue" alink="#FFFF00" vlink="#FF00FF"> You can also provide hex code for colors (as you can see from the above example), or else you can use specific words for each color, which is acceptable by the browser. Program for Anchor Tag Example: Run Code <!DOCTYPE html> <html> <body> <a href="https://www.w3schools.in/">Welcome to w3schools</a> </body> </html> Anchor in Images Anchor tags can also be used to create hyperlinks through images also. Here's a code snippet to show how to perform that. Example: <!DOCTYPE html> <html> <body> <a href="https://www.w3schools.in/"> <img alt="w3schools logo" src="abc.png" width="170" height="57"> </a> </body> </html> Link Attributes  href- Specify the link's target URL <a href="domain.com">  name-Link to an anchor mark within the page<a name="backtotop" >  target-Specify how the taget document should be opened, e.g.< in a new tab target="_blank">  title- Provide text that will be displayed when the user hovers over< a link title="hello! I am a link" >  rel- Specifies the relationship between the source and the target document<a rel="next" >  rev- reverse of rel atrribute href attribute To create a hyperlink, the destination (address) of the document must be known. A hyperlink can link to pages on your own domain, to other websites, or to a file (such as a PDF document). For example, to link to the Google homepage, the code is as follows: <a href="https://www.google.com">Google Home</a> Href stands for hypertext reference. This attribute defines the target address of the document, which this time is linked to (https://www.google.com). The “=” sign is the connection of the attribute with the attribute value, whereby “href” is the attribute and “ https://www.google.com ” is the attribute value. There is an apostrophe before and after the attribute value. The defined phrase “Google Home” is known as the anchor text or link text - this is what is visible and clickable for the user. An anchor text is ideally concise, informative, and relevant to the landing page. If you want to link internally to another part of your website, you don’t have to specify the full address, in this case, the file name is sufficient: <a href="MyPage.html">My page</a> Name attribute The name attribute of the anchor tag can be used to enable users to “jump” to a specific point on a page (jump marker, anchor). This is especially useful with large pages or subdivisions. The HTML code looks like this: <a name="to top"></a> or <a name="Content"></a>Content In the first code sample, you link from the bottom of a page back to the beginning, so users can quickly get to the top of the page without having to scroll for a long time. In the second example, users can directly access a part of the page, for example a subdivision point. By clicking, users are guided via name attribute directly to the subject. <a href="#Content">Content</a> By simply setting a hash tag (#) at the anchor name, the browser can identify a jump within the page. You can also link to a specific location on another page internally. This would be defined as follows: <a href="anotherpage.html#name">Linktext</a> The “#name” is specified after the filename. Target attribute The target attribute specifies how the destination page or the target document should be opened. “target=” _ blank “ is used for the opening of the target page in a new tab. This is the usual option when using target attributes for linking to other pages. <a href="http://www.mypage.com" target="_blank" rel="noopener">Linktext</a> Title attribute The title attribute gives users an important indication as to where they will be directed to when they click on a link. If the user hovers with the mouse over a link reference, the title text, which was defined in the attribute, will be displayed. This can be a tool tip, or description of the resource to which the link directs. The data from the title attribute makes the site more user-friendly. The title attribute can also be used for images and graphic files to give a brief description of what is shown in the picture. <img title="Here you can see a sample image" src="exampleimage.png" alt="sample image"> Input:  html <!DOCTYPE html> <html> <body> <h3>Various options available in the Target Attribute</h3> <p>If you set the target attribute to "_blank", the link will open in a new browser window or tab.</p> <a href="https://www.geeksforgeeks.org" target="_blank">GeeksforGeeks</a> <p>If you set the target attribute to "_self", the link will open in the same window or tab.</p> <a href="https://www.geeksforgeeks.org" target="_self">GeeksforGeeks</a> <p>If you set the target attribute to "_top", the link will open in the full body of the window.</p> <a href="https://www.geeksforgeeks.org" target="_top">GeeksforGeeks</a> <p>If you set the target attribute to "_parent", the link will open in the parent frame.</p> <a href="https://www.geeksforgeeks.org" target="_parent">GeeksforGeeks</a> </body> </html> Output: Creating a Bookmark Link for a Webpage A bookmark is a link that can be used to jump to specified portion of a webpage.Bookmarks are very useful if a webpage is quite long. Steps to create a bookmark are: 1. Using the id attribute,create a bookmark. 2. Add the specified portion of the webpage to the bookmark. Input :  html <!DOCTYPE html> <html> <body> <p><a href="#T11">Jump to Topic 11</a></p> <p><a href="#T17">Jump to Topic 17</a></p> <p><a href="#T20">Jump to Topic 20</a></p> <h2>Topic 1</h2> <p>paragraph 1 .....</p> <h2>Topic 2</h2> <p>paragraph 1 .....</p> <h2>Topic 3</h2> <p>paragraph 1 .....</p> <h2>Topic 4</h2> <p>paragraph 1 .....</p> <h2>Topic 5</h2> <p>paragraph 1 .....</p> <h2>Topic 6</h2> <p>paragraph 1 .....</p> <h2>Topic 7</h2> <p>paragraph 1 .....</p> <h2>Topic 8</h2> <p>paragraph 1 .....</p> <h2>Topic 9</h2> <p>paragraph 1 .....</p> <h2>Topic 10</h2> <p>paragraph 1 .....</p> <h2 id="T11">Topic 11</h2> <p>paragraph 1 .....</p> <h2>Topic 12</h2> <p>paragraph 1 .....</p> <h2>Topic 13</h2> <p>paragraph 1 .....</p> <h2>Topic 14</h2> <p>paragraph 1 .....</p> <h2>Topic 15</h2> <p>paragraph 1 .....</p> <h2>Topic 16</h2> <p>paragraph 1 .....</p> <h2 id="T17">Topic 17</h2> <p>paragraph 1 .....</p> <h2>Topic 18</h2> <p>paragraph 1 .....</p> <h2>Topic 19</h2> <p>paragraph 1 .....</p> <h2 id="T20">Topic 20</h2> <p>paragraph 1 .....</p> </body> </html HTML Email Tag HTML <a> tag provides you option to specify an email address to send an email. While using <a> tag as an email tag, you will use mailto: email address along with href attribute. Following is the syntax of using mailto instead of using http. <a href = "mailto: abc@example.com">Send Email</a> This code will generate the following link which you can use to send email. Send Email Now, if a user clicks this link, it launches one Email Client (like Lotus Notes, Outlook Express etc. ) installed on your user's computer. There is another risk to use this option to send email because if user do not have email client installed on their computer then it would not be possible to send email. Default Settings You can specify a default email subject and email body along with your email address. Following is the example to use default subject and body. <a href = "mailto:abc@example.com?subject = Feedback&body = Message"> Send Feedback </a> This code will generate the following link which you can use to send email. Send Feedback HTML Image HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in HTML image element. Let's see an example of HTML image. 1. <h2>HTML Image Example</h2> 2. <img src="good_morning.jpg" alt="Good Morning Friends"/> Output: Attributes of HTML img tag The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are given below. 1) src It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server. The location of image may be on the same directory or another server. 2) alt The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt attribute describes the image in words. The alt attribute is considered good for SEO prospective. 3) width It is an optional attribute which is used to specify the width to display the image. It is not recommended now. You should apply CSS in place of width attribute. 4) height It h3 the height of the image. The HTML height attribute also supports iframe, image and object elements. It is not recommended now. You should apply CSS in place of height attribute. Use of height and width attribute with img tag You have learnt about how to insert an image in your web page, now if we want to give some height and width to display image according to our requirement, then we can set it with height and width attributes of image. Example: 1. <img src="animal.jpg" height="180" width="300" alt="animal image"> Output: Note: Always try to insert the image with height and width, else it may flicker while displaying on webpage. Use of alt attribute We can use alt attribute with img tag. It will display an alternative text in case if image cannot be displayed on browser. Following is the example for alt attribute: 1. <img src="animal.png" height="180" width="300" alt="animal image"> Output: How to get image from another directory/folder? To insert an image in your web, that image must be present in your same folder where you have put the HTML file. But if in some case image is available in some other directory then you can access the image like this: 1. <img src="E:/images/animal.png" height="180" width="300" alt="animal image"> In above statement we have put image in local disk E------>images folder------>animal.png. Note: If src URL will be incorrect or misspell then it will not display your image on web page, so try to put correct URL. Use <img> tag as a link We can also link an image with other page or we can use an image as a link. To do this, put <img> tag inside the <a> tag. Example: 1. <a href="https://www.javatpoint.com/what-is-robotics"> <img src="robot.jpg" height="100" width="100"> </a> Output: Set Image Border By default, image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture. Example <!DOCTYPE html> <html> <head> <title>Set Image Border</title> </head> <body> <p>Setting image Border</p> <img src = "/html/images/test.png" alt = "Test Image" border = "3"/> </body> </html> This will produce the following result – Set Image Alignment By default, image will align at the left side of the page, but you can use align attribute to set it in the centre or right. Example <!DOCTYPE html> <html> <head> <title>Set Image Alignment</title> </head> <body> <p>Setting image Alignment</p> <img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/> </body> </html> This will produce the following result − HTML Image Maps With HTML image maps, you can create clickable areas on an image. Image Maps What is image mapping : The HTML <map> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area> tags. In image mapping an image is specified with certain set of coordinates inside the image which act as hyperlink areas to different destinations. It is different from an image link since in image linking, an image can be used to serve a single link or destination whereas in a mapped image, different coordinates of the image can serve different links or destinations. Elements required in Mapping an Image : There are three basic html elements which are required for creating a mapped image. 1. Map : It is used to create a map of the image with clickable areas. 2. Image : It is used for the image source on which mapping is done. 3. Area : It is used within the map for defining clickable areas. Try to click on the computer, phone, or the cup of coffee in the image below: Example Here is the HTML source code for the image map above: <img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="comput er.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.h tm"> <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.ht m"></map> How Does it Work? The idea behind an image map is that you should be able to perform different actions depending on where in the image you click. To create an image map you need an image, and some HTML code that describes the clickable areas The Image The image is inserted using the <img> tag. The only difference from other images is that you must add a usemap attribute: <img src="workplace.jpg" alt="Workplace" usemap="#workmap"> The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map. Tip: You can use any image as an image map! Create Image Map Then, add a <map> element. The <map> element is used to create an image map, and is linked to the image by using the required name attribute: <map name="workmap"> The name attribute must have the same value as the <img>'s usemap attribute . The Areas Then, add the clickable areas. A clickable area is defined using an <area> element. Shape You must define the shape of the clickable area, and you can choose one of these values:     rect - defines a rectangular region circle - defines a circular region poly - defines a polygonal region default - defines the entire region You must also define some coordinates to be able to place the clickable area onto the image. Shape="rect" The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis. So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top: The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top: Now we have enough data to create a clickable rectangular area: Example <area shape="rect" coords="34, 44, 270, 350" href="computer.htm"> This is the area that becomes clickable and will send the user to the page "computer.htm": Shape="circle" To add a circle area, first locate the coordinates of the centre of the circle: 337,300 Then specify the radius of the circle: 44 pixels Now you have enough data to create a clickable circular area: Example <area shape="circle" coords="337, 300, 44" href="coffee.htm"> This is the area that becomes clickable and will send the user to the page "coffee.htm": Shape="poly" The shape="poly" contains several coordinate points, which creates a shape formed with straight lines (a polygon). This can be used to create any shape. Like maybe a croissant shape! How can we make the croissant in the image below become a clickable link? We have to find the x and y coordinates for all edges of the croissant: The coordinates come in pairs, one for the x-axis and one for the y-axis: Example <area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140, 329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm"> This is the area that becomes clickable and will send the user to the page "croissant.htm": Image Map and JavaScript A clickable area can also trigger a JavaScript function. Add a click event to the <area> element to execute a JavaScript function: Example Here, we use the onclick attribute to execute a JavaScript function when the area is clicked: <map name="workmap"> <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="m yFunction()"> </map> <script> function myFunction() { alert("You clicked the coffee cup!"); } </script> Server-side image map Server-side image maps were first supported in Mosaic (web browser) version 1.1. Server-side image maps enable the web browser to send positional information to the server about where the user clicks within an image. This allows the server to make pixel-by-pixel decisions about what content to return in response (possible methods are to use image mask layers, database queries, or configuration files on the server). The HTML code for this type of server-side image map requires the <img> tag to be inside an anchor tag <a>...</a> and the <img> must include the ismap attribute. <a href="/imagemapper"><img src="image.png" ismap /></a> When the user clicks inside the image the browser will append the X and Y coordinates (relative to the upper-left corner of the image) to the anchor URL as a query string and will access the resulting URL (for example, /imagemapper?3,9 ). If the browser does not support ismap then the query string must not be added to the anchor URL and the server should respond appropriately (for example, by returning a text-only navigation page). A major disadvantage of server-side image maps is that their implementation can differ between different server systems. This means that the author of the website using image maps needs to communicate closely with the Web server's administrator to ensure that the maps work correctly. Since there are so many advantages to client-side imagemaps, and almost all current browser versions support them, we shall not explore server-side image maps further in this unit (although most image map programmes still provide features to output/edit server-side map files). Client-side Client-side image maps were introduced in HTML 3.2, and do not require any special logic to be executed on the server (they are fully client-side). They also do not require any JavaScript. Pure HTML A client-side imagemap in HTML consists of two parts: 1. the actual image, which is embedded with the <img> tag. The image tag must have an attribute usemap, which names the imagemap to use for this image (multiple imagemaps may exist on a single page). 2. A <map> element, and inside that, <area> elements, each of which defines a single clickable area within the imagemap. These are similar to the <a> tag defining which URL should be opened for an ordinary web link. A title attribute may be provided, which may be rendered as a tooltip if a desktop user hovers their mouse pointer over the area. For web accessibility reasons, it is often important – and in some cases it may even be a legal or contractual requirement – to provide an alt attribute describing the link that screen reader software can read to, for example, blind users.[3] The <area> elements can be rectangles ( shape="rect" ), polygons ( shape="poly" ) or circles ( shape="circle" ). Shape-Values are coordinatepairs. Every pair has an X and a Y value (from left/top of an image) and is separated with a comma.    Rectangle: Set four coordinates: "x1,y1,x2,y2" Polygon: Set as many coordinates as desired (a multiple of two): "x1,y1,x2,y2, [...] xn,yn" Circle: One coordinate-pair and another value with a radius: "x1,y1,radius" The following example defines a rectangular area ("9,372,66,397"). When a user clicks anywhere inside this area, they are taken to the English Wikipedia's home page. <img src="image.png" alt="Website map" usemap="#mapname" /> <map name="mapname"> <area shape="rect" coords="9,372,66,397" href="https://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" /> </map> Clients-side image maps have a number of advantages over server-side maps.    Reduced server load, since the mapping is done on the client. There is no need to communicate with server side scripts. The user can see the image maps associated hypertext URLs in the status bar of their browser before clicking. HTML - <nobr> Tag The HTML <nobr> tag is used to instruct the browser not to break the specified text (such as the usual line wrap that occurs at the right edge of the browser window). This is used with the <wbr> tag, <wbr> advises the extended browser when it may insert a line break in an otherwise nonbreakable sequence of text. Unlike the <br> tag, which always causes a line break, even within a <nobr>- tagged segment, the <wbr> tag works only when placed inside a <nobr>- tagged content segment and causes a line break only if the current line has already extended beyond the browser's display window margins. Example <!DOCTYPE html> <html> <head> <title>HTML nobr Tag</title> </head> <body> <nobr>This is a very long sequence of text that is forced to be on a single line, even if doing so causes <wbr /> the browser to extend the document window beyond the size of the viewing pane and the poor user must scroll right <wbr /> to read the entire line. </nobr> </body> </html> HTML <font> Tag The <font> tag in HTML plays an important role in the web page to create an attractive and readable web page. The font tag is used to change the color, size, and style of a text. The base font tag is used to set all the text to the same size, color and face. Syntax: <font attribute = "value"> Content </font> Example: In this example, we have used the <font> tag with a font size as 5.  HTML <!DOCTYPE html> <html> <body> <h2>GeeksforGeeks</h2>  <p>Hello Geeks!.</p>  <font size="5"> Welcome to GeeksforGeeks </font> </body> </html> The font tag has basically three attributes which are given below:   Font Size attribute Face/Type attribute Color attribute Note: Font tag is not supported in HTML5. We will discuss all these attributes & understand them through the examples.  font Size: This attribute is used to adjust the size of the text in the HTML document using a font tag with the size attribute. The range of size of the font in HTML is from 1 to 7 and the default size is 3. Syntax: <font size="number"> Example: This example uses the <font> tag where different font sizes are specified.  HTML <!DOCTYPE html> <html> <body>  <font size="1">GeeksforGeeks!</font><br <font size="2">GeeksforGeeks!</font><br <font size="3">GeeksforGeeks!</font><br <font size="4">GeeksforGeeks!</font><br <font size="5">GeeksforGeeks!</font><br <font size="6">GeeksforGeeks!</font><br <font size="7">GeeksforGeeks!</font>  </body> /> /> /> /> /> /> </html> Font Type: Font type can be set by using face attribute with font tag in HTML document. But the fonts used by the user need to be installed in the system first. Syntax: <font face="font_family"> Example: This example describes the <font> tag with different font type & font size.  HTML <!DOCTYPE html> <html> <body>  <font face="Times New Roman" size="6"> GeeksforGeeks!! </font> <br /> <font face="Verdana" size="6"> GeeksforGeeks!! </font><br /> <font face="Comic sans MS" size=" 6"> GeeksforGeeks!! </font><br /> <font face="WildWest" size="6"> GeeksforGeeks!! </font><br /> <font face="Bedrock" size="6"> GeeksforGeeks!! </font><br />  </body> </html> Output: font type attribute Font Color: Font color is used to set the text color using a font tag with the color attribute in an HTML document. Color can be specified either with its name or with its hex code. Syntax: <font color="color_name|hex_number|rgb_number"> Example: This example describes the <font> tag with different font colors.  HTML <!DOCTYPE html> <html> <body>  <font color="#009900">GeeksforGeeks</font><br /> <font color="green">GeeksforGeeks</font>  </body> </html> HTML - Tables The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells. The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default Example <!DOCTYPE html> <html> <head> <title>HTML Tables</title> </head> <body> <table border = "1"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> </body> </html> This will produce the following result – Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2 Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border, then you can use border = "0". Table Heading Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row. Headings, which are defined in <th> tag are centered and bold by default. Example <!DOCTYPE html> <html> <head> <title>HTML Table Header</title> </head> <body> <table border = "1"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </body> </html> This will produce the following result – Name Salary Ramesh Raman 5000 Shabbir Hussein 7000 Cellpadding and Cellspacing Attributes There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute defines space between table cells, while cellpadding represents the distance between cell borders and the content within a cell. Example <!DOCTYPE html> <html> <head> <title>HTML Table Cellpadding</title> </head> <body> <table border = "1" cellpadding = "5" cellspacing = "5"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </body> </html> This will produce the following result – Name Ramesh Raman Salary 5000 Shabbir Hussein 7000 Difference between cellpadding and cellspacing: Cellpadding Cellspacing It specifies the space between the border of a table cell and its contents. It specifies the space between adjacent cells. It is created by using HTML <table> tag but type attribute is set to cellpadding. It is also created by using HTML <table> tag but type attribute is set to cellspacing. It is mainly meant for a single cell. Cellspacing can get subjected to more than one cell. The default cellpadding value is 1 Whereas, the default cellspacing value is 2 Cellpadding is widely used and considered to be an effective mean Cellspacing is less effective than Cellpadding. Cellpadding is an attribute Cellspacing is also an attribute. Colspan and Rowspan Attributes You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows. Example <!DOCTYPE html> <html> <head> <title>HTML Table Colspan/Rowspan</title> </head> <body> <table border = "1"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td rowspan = "2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td> <td>Row 1 Cell 3</td> </tr> <tr> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td> </tr> <tr> <td colspan = "3">Row 3 Cell 1</td> </tr> </table> </body> </html> This will produce the following result – Column 1 Column 2 Column 3 Row 1 Cell 2 Row 1 Cell 3 Row 1 Cell 1 Row 2 Cell 2 Row 2 Cell 3 Row 3 Cell 1 Tables Backgrounds You can set table background using one of the following two ways −   bgcolor attribute − You can set background color for whole table or just for one cell. background attribute − You can set background image for whole table or just for one cell. You can also set border color also using bordercolor attribute. Note − The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use these attributes. Example <!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body> <table border = "1" bordercolor = "green" bgcolor = "yellow"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td rowspan = "2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td> <td>Row 1 Cell 3</td> </tr> <tr> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td> </tr> <tr> <td colspan = "3">Row 3 Cell 1</td> </tr> </table> </body> </html> This will produce the following result – Column 1 Column 2 Column 3 Row 1 Cell 2 Row 1 Cell 3 Row 1 Cell 1 Row 2 Cell 2 Row 2 Cell 3 Row 3 Cell 1 Here is an example of using background attribute. Here we will use an image available in /images directory. <!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body> <table border = "1" bordercolor = "green" background = "/images/test.png"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td rowspan = "2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td> </tr> <tr> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td> </tr> <tr> <td colspan = "3">Row 3 Cell 1</td> </tr> </table> </body> </html> This will produce the following result. Here background image did not apply to table's header. Column 1 Column 2 Column 3 Row 1 Cell 2 Row 1 Cell 3 Row 1 Cell 1 Row 2 Cell 2 Row 2 Cell 3 Row 3 Cell 1 Table Height and Width You can set a table width and height using width and height attributes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area. Example <!DOCTYPE html> <html> <head> <title>HTML Table Width/Height</title> </head> <body> <table border = "1" width = "400" height = "150"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> </body> </html> This will produce the following result – Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2 Table Caption The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is deprecated in newer version of HTML/XHTML. Example <!DOCTYPE html> <html> <head> <title>HTML Table Caption</title> </head> <body> <table border = "1" width = "100%"> <caption>This is the caption</caption> <tr> <td>row 1, column 1</td><td>row 1, columnn 2</td> </tr> <tr> <td>row 2, column 1</td><td>row 2, columnn 2</td> </tr> </table> </body> </html> This will produce the following result – row 1, column 1 row 2, column 1 This is the caption row 1, column 2 row 2, column 2 Table Header, Body, and Footer Tables can be divided into three portions − a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table. The three elements for separating the head, body, and foot of a table are −    <thead> − to create a separate table header. <tbody> − to indicate the main body of the table. <tfoot> − to create a separate table footer. A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody> Example <!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border = "1" width = "100%"> <thead> <tr> <td colspan = "4">This is the head of the table</td> </tr> </thead> <tfoot> <tr> <td colspan = "4">This is the foot of the table</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> </table> </body> </html> This will produce the following result – This is the head of the table This is the foot of the table Cell 1 Cell 2 Cell 3 Cell 4 Nested Tables You can use one table inside another table. Not only tables you can use almost all the tags inside table data tag <td>. Example Following is the example of using another table and other tags inside a table cell. <!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <table border = "1" width = "100%"> <tr> <td> <table border = "1" width = "100%"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </td> </tr> </table> </body> </html> This will produce the following result − Name Salary Ramesh Raman 5000 Shabbir Hussein 7000 HTML - Frames HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns. Disadvantages of Frames There are few drawbacks with using frames, so it's never recommended to use frames in your webpages −     Some smaller devices cannot cope with frames often because their screen is not big enough to be divided up. Sometimes your page will be displayed differently on different computers due to different screen resolution. The browser's back button might not work as the user hopes. There are still few browsers that do not support frame technology. Creating Frames To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines, how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which HTML document shall open into the frame. Note − The <frame> tag deprecated in HTML5. Do not use this element. Example Following is the example to create three horizontal frames − <!DOCTYPE html> <html> <head> <title>HTML Frames</title> </head> <frameset rows = "10%,80%,10%"> <frame name = "top" src = "/html/top_frame.htm" /> <frame name = "main" src = "/html/main_frame.htm" /> <frame name = "bottom" src = "/html/bottom_frame.htm" /> <noframes> <body>Your browser does not support frames.</body> </noframes> </frameset> </html> This will produce the following result – Example Let's put the above example as follows, here we replaced rows attribute by cols and changed their width. This will create all the three frames vertically − <!DOCTYPE html> <html> <head> <title>HTML Frames</title> </head> <frameset cols = "25%,50%,25%"> <frame name = "left" src = "/html/top_frame.htm" /> <frame name = "center" src = "/html/main_frame.htm" /> <frame name = "right" src = "/html/bottom_frame.htm" /> <noframes> <body>Your browser does not support frames.</body> </noframes> </frameset> </html> This will produce the following result – The <frameset> Tag Attributes Following are important attributes of the <frameset> tag − Sr.No Attribute & Description cols Specifies how many columns are contained in the frameset and the size of each column. You can specify the width of each column in one of the four ways − Absolute values in pixels. For example, to create three vertical frames, use cols = "100, 500, 100". 1 A percentage of the browser window. For example, to create three vertical frames, use cols = "10%, 80%, 10%". Using a wildcard symbol. For example, to create three vertical frames, use cols = "10%, *, 10%". In this case wildcard takes remainder of the window. As relative widths of the browser window. For example, to create three vertical frames, use cols = "3*, 2*, 1*". This is an alternative to percentages. You can use relative widths of the browser window. Here the window is divided into sixths: the first column takes up half of the window, the second takes one third, and the third takes one sixth. rows 2 This attribute works just like the cols attribute and takes the same values, but it is used to specify the rows in the frameset. For example, to create two horizontal frames, use rows = "10%, 90%". You can specify the height of each row in the same way as explained above for columns. border 3 This attribute specifies the width of the border of each frame in pixels. For example, border = "5". A value of zero means no border. frameborder 4 This attribute specifies whether a three-dimensional border should be displayed between frames. This attribute takes value either 1 (yes) or 0 (no). For example frameborder = "0" specifies no border. framespacing 5 This attribute specifies the amount of space between frames in a frameset. This can take any integer value. For example framespacing = "10" means there should be 10 pixels spacing between each frames. The <frame> Tag Attributes Following are the important attributes of <frame> tag − Sr.No Attribute & Description src 1 This attribute is used to give the file name that should be loaded in the frame. Its value can be any URL. For example, src = "/html/top_frame.htm" will load an HTML file available in html directory. name 2 This attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into an another frame, in which case the second frame needs a name to identify itself as the target of the link. frameborder 3 This attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the <frameset> tag if one is given, and this can take values either 1 (yes) or 0 (no). marginwidth 4 This attribute allows you to specify the width of the space between the left and right of the frame's borders and the frame's content. The value is given in pixels. For example marginwidth = "10". marginheight 5 This attribute allows you to specify the height of the space between the top and bottom of the frame's borders and its contents. The value is given in pixels. For example marginheight = "10". 6 noresize By default, you can resize any frame by clicking and dragging on the borders of a frame. The noresize attribute prevents a user from being able to resize the frame. For example noresize = "noresize". scrolling 7 This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or "auto". For example scrolling = "no" means it should not have scroll bars. longdesc 8 This attribute allows you to provide a link to another page containing a long description of the contents of the frame. For example longdesc = "framedescription.htm" Browser Support for Frames If a user is using any old browser or any browser, which does not support frames then <noframes> element should be displayed to the user. So you must place a <body> element inside the <noframes> element because the <frameset> element is supposed to replace the <body> element, but if a browser does not understand <frameset> element then it should understand what is inside the <body> element which is contained in a <noframes> element. You can put some nice message for your user having old browsers. For example, Sorry!! your browser does not support frames. as shown in the above example. Frame's name and target attributes One of the most popular uses of frames is to place navigation bars in one frame and then load main pages into a separate frame. Let's see following example where a test.htm file has following code − 1<!DOCTYPE html> <html> <head> <title>HTML Target Frames</title> </head> <frameset cols = "200, *"> <frame src = "/html/menu.htm" name = "menu_page" /> <frame src = "/html/main.htm" name = "main_page" /> <noframes> <body>Your browser does not support frames.</body> </noframes> </frameset> </html> Here, we have created two columns to fill with two frames. The first frame is 200 pixels wide and will contain the navigation menu bar implemented by menu.htm file. The second column fills in remaining space and will contain the main part of the page and it is implemented by main.htm file. For all the three links available in menu bar, we have mentioned target frame as main_page, so whenever you click any of the links in menu bar, available link will open in main page. Following is the content of menu.htm file Live Demo <!DOCTYPE html> <html> <body bgcolor = "#4a7d49"> <a href = "http://www.google.com" target = "main_page">Google</a> <br /> <br /> <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a> <br /> <br /> <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a> </body> </html> Following is the content of main.htm file − Live Demo <!DOCTYPE html> <html> <body bgcolor = "#b5dcb3"> <h3>This is main page and content from any link will be displayed here.</h3> <p>So now click any link and see the result.</p> </body> </html> When we load test.htm file, it produces following result − Now you can try to click links available in the left panel and see the result. The targetattribute can also take one of the following values − Sr.No 1 2 3 4 5 Option & Description _self Loads the page into the current frame. _blank Loads a page into a new browser window. Opening a new window. _parent Loads the page into the parent window, which in the case of a single frameset is the main browser window. _top Loads the page into the browser window, replacing any current frames. targetframe Loads the page into a named targetframe. HTML Lists In this article, we will know the HTML List, along with understanding its types, and various ways to implement them, through the example. A list is a record of short pieces of related information or used to display the data or any information on web pages in the ordered or unordered form. For instance, to purchase the items, we need to prepare a list that can either be ordered or unordered list which helps us to organize the data & easy to find the item. Please refer to the HTML <li> type Attribute article for the various types of attributes that can be used with the ordered & unordered list. Example: The below example illustrates the use of the unordered & ordered list in HTML.  HTML <!DOCTYPE html> <html> <head> <title>GeeksforGeeks</title> </head> <body> <h2>Welcome To GeeksforGeeks Learning</h2> <h5>List of available courses</h5> <ul> <li>Data Structures & Algorithm</li> <li>Web Technology</li> <li>Aptitude & Logical Reasoning</li> <li>Programming Languages</li> </ul> <h5>Data Structures topics</h5> <ol> <li>Array</li> <li>Linked List</li> <li>Stacks</li> <li>Queues</li> <li>Trees</li> <li>Graphs</li> </ol> </body> </html> Output: HTML List Supported Tags: These tags are used in HTML listing.  HTML <ul> Tag  HTML <ol> Tag  HTML <dl> Tag The HTML Unordered List: An unordered list starts with the “ul” tag. Each list item starts with the “li” tag. The list items are marked with bullets i.e small black circles by default. Syntax: <ul> list of items </ul> Attribute: This tag contains two attributes which are listed below:  compact: It will render the list smaller.  type: It specifies which kind of marker is used in the list. Note: The <ul> attributes are not supported by HTML5. Example: This example describes the unordered list.  HTML <!DOCTYPE html> <html> <body> <h2>Grocery list</h2> <ul> <li>Bread</li> <li>Eggs</li> <li>Milk</li> <li>Coffee</li> </ul> </body> </html> Output: Unordered List HTML unordered list has various list item markers: Example 1: The Disc can be used to set the list item marker to a bullet i.e default.  HTML <!DOCTYPE html> <html> <head> <title>HTML ul tag</title> </head> <body> <h1>GeeksforGeeks</h1> <h2>Unordered List with Disc Bullets</h2> <p>GeeksforGeeks courses List:</p> <ul style="list-style-type:disc"> <li>Geeks</li> <li>Sudo</li> <li>Gfg</li> <li>Gate</li> <li>Placement</li> </ul> </body> </html> Output: Unordered List with disc item maker Example 2: The Circle can be used to set the list item marker to a circle.  HTML <!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h2>Unordered List with Circle Bullets</h2> <p>GeeksforGeeks courses List:</p> <ul style="list-style-type: circle"> <li>Geeks</li> <li>Sudo</li> <li>Gfg</li> <li>Gate</li> <li>Placement</li> </ul> </body> </html> Output: Unordered List with circle item maker Example 3: The Square can be used to set the list item marker to a square.  HTML <!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h2>Unordered List with Square Bullets</h2> <p>GeeksforGeeks courses List:</p> <ul style="list-style-type: square"> <li>Geeks</li> <li>Sudo</li> <li>Gfg</li> <li>Gate</li> <li>Placement</li> </ul> </body> </html> Output: Unordered List with square item maker Example 4: It’s none that can be used to set the list item marker with no mark.  HTML <!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h2>Unordered List with No Bullets</h2> <p>GeeksforGeeks courses List:</p> <ul style="list-style-type: none"> <li>Geeks</li> <li>Sudo</li> <li>Gfg</li> <li>Gate</li> <li>Placement</li> </ul> </body> </html> Output: Unordered List with none item maker Example: Nested Unordered List, It is used to nest the list items ie., a list inside another list.  HTML <!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h2>Nested Unordered List</h2> <p>GeeksforGeeks courses List:</p> <ul> <li>DSA</li> <ul> <li>Array</li> <li>Linked List</li> <li>stack</li> <li>Queue</li> </ul> <li>Web Technologies</li> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <li>Aptitude</li> <li>Gate</li> <li>Placement</li> </ul> </body> </html> Output: Nested Unordered List HTML Ordered List: An ordered list starts with the “ol” tag. Each list item starts with the “li” tag. The list items are marked with numbers by default. Syntax: <ol> <li>Item1</li> <li>Item2</li> <li>Item3</li> </ol> Attributes:  compact: It defines the list should be compacted (compact attribute is not supported in HTML5. Use CSS instead.).  reversed: It defines that the order will be descending.  start: It defines from which number or alphabet the order will start.  type: It defines which type(1, A, a, I, and i) of the order you want in your list of numeric, alphabetic, or roman numbers. Example: This example illustrates the use of the reverse attribute, control list counting & type attribute.  HTML <!DOCTYPE html> <html> <head> <title>HTML ol tag</title> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <h3>HTML ol tag</h3> <p>reversed attribute</p> <ol reversed> <li>HTML</li> <li>CSS</li> <li>JS</li> </ol> <p>start attribute</p> <ol start="5"> <li>HTML</li> <li>CSS</li> <li>JS</li> </ol> <p>type attribute</p> <ol type="i"> <li>HTML</li> <li>CSS</li> <li>JS</li> </ol> </body> </html> Output: Ordered List with different list style HTML ordered list has various list item markers: The type attribute of the <ol> tag defines the type of the list item marker. Example 1: The list items will be numbered with numbers i.e default.  HTML <!DOCTYPE html> <html> <body> <h2>Ordered List with Numbers</h2> <ol type="1"> <li>Bread</li> <li>Eggs</li> <li>Milk</li> <li>Coffee</li> </ol> </body> </html> Output: Ordered List with numeric item maker Example 2: Type=”A”, this list of items will be numbered with uppercase letters.  HTML <!DOCTYPE html> <html> <body> <h2>Ordered List with Letters</h2> <ol type="A"> <li>Bread</li> <li>Eggs</li> <li>Milk</li> <li>Coffee</li> </ol> </body> </html> Output: Ordered List with capital alphabetic item maker Example 3: Type=”a”, this list of items will be numbered with lowercase letters.  HTML <!DOCTYPE html> <html> <body> <h2>Ordered List with Lowercase Letters</h2> <ol type="a"> <li>Bread</li> <li>Eggs</li> <li>Milk</li> <li>Coffee</li> </ol> </body> </html> Output: Ordered List with small alphabetic item maker Example 4: Type=”I”, this list of items will be numbered with uppercase roman numbers.  HTML <!DOCTYPE html> <html> <body> <h2>Ordered List with Roman Numbers</h2> <ol type="I"> <li>Bread</li> <li>Eggs</li> <li>Milk</li> <li>Coffee</li> </ol> </body> </html> Output: Ordered List with uppercase roman numbers Example 5: Type=”i”, this list of items will be numbered with lowercase roman numbers.  HTML <!DOCTYPE html> <html> <body> <h2>Ordered List with Lowercase Roman Numbers</h2> <ol type="i"> <li>Bread</li> <li>Eggs</li> <li>Milk</li> <li>Coffee</li> </ol> </body> </html> Output: Ordered List with lowercase roman numbers Example 6: Nested ordered list, a nested ordered list is a list that has a list inside another list.  HTML <!DOCTYPE html> <html> <body> <h1>GeeksforGeeks</h1> <h2>Nested Ordered List</h2> <ol> <li>Coffee</li> <li> Tea <ol> <li>Black tea</li> <li>Green tea</li> </ol> </li> <li>Milk</li> </ol> </body> </html> Output: Nested Ordered List There is another attribute that is specifically defined for a list item, which is used in with the “li” tag and that is the value attribute. Below is a little description of the value attribute specifically used with the “li” tag. Though it is used with various other HTML elements. Value attribute: The value attribute may be used on an individual <li> element within an ordered list to change its value within the list. You define the value of a list item and the number of any list item appearing after it will be recalculated accordingly. Example: This example illustrates the use of the “value attribute” used on the <li> element.  HTML <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h2>Welcome To GFG</h2> <ol> <li>Item One</li> <li value="10">Item Two</li> <li>Item Three</li> <li>Item Four</li> </ol> </body> </html> Output: <img src="https://media.geeksforgeeks.org/wpcontent/uploads/20220522105327/GFG20220522105224.jpg" alt="Use of "value attribute" on  ” srcset=”https://media.geeksforgeeks.org/wpcontent/uploads/20220522105327/GFG20220522105224.jpg, ” sizes=”100vw” width=”237″>Value attribute HTML Description List: A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term name, and the <dd> tag describes each term. Please refer to the How to add description list of an element using HTML? article for further details. Syntax: <dl> Contents... </dl> Example: This example describes the HTML Description List.  HTML <!DOCTYPE html> <html> <body> <h2>A Description List</h2> <dl> <dt>Coffee</dt> <dd>- 500 gms</dd> <dt>Milk</dt> <dd>- 1 ltr Tetra Pack</dd> </dl> </body> </html> Output: Description List HTML Form An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc. An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc. . Why use HTML Form HTML forms are required if you want to collect some data from of the site visitor. For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping address and credit/debit card details so that item can be sent to the given address.\ HTML Form Syntax 1. <form action="server url" method="get|post"> 2. //input controls e.g. textfield, textarea, radiobutton, button 3. </form> HTML Form Tags Let's see the list of HTML 5 form tags. Tag Description <form> It defines an HTML form to enter inputs by the used side. <input> It defines an input control. <textarea> It defines a multi-line input control. <label> It defines a label for an input element. <fieldset> It groups the related element in a form. <legend> It defines a caption for a <fieldset> element. <select> It defines a drop-down list. <optgroup> It defines a group of related options in a drop-down list. <option> It defines an option in a drop-down list. <button> It defines a clickable button. HTML 5 Form Tags Let's see the list of HTML 5 form tags. Tag Description <datalist> It specifies a list of pre-defined options for input control. <keygen> It defines a key-pair generator field for forms. <output> It defines the result of a calculation. HTML <form> element The HTML <form> element provide a document section to take input from user. It provides various interactive controls for submitting information to web server such as text field, text area, password field, etc. Note: The <form> element does not itself create a form but it is container to contain all required form elements, such as <input>, <label>, etc. Syntax: 1. <form> 2. //Form elements 3. </form> HTML <input> element The HTML <input> element is fundamental form element. It is used to create form fields, to take input from user. We can apply different input filed to gather different information form user. Following is the example to show the simple text input. Example: 1. <body> 2. <form> 3. Enter your name <br> 4. 5. <input type="text" name="username"> </form> 6. </body> Output: HTML TextField Control The type="text" attribute of input tag creates textfield control also known as single line textfield control. The name attribute is optional, but it is required for the server side component such as JSP, ASP, PHP etc. 1. <form> 2. First Name: <input type="text" name="firstname"/> <br/> 3. Last Name: <input type="text" name="lastname"/> <br/> 4. </form> Output: Note: If you will omit 'name' attribute then the text filed input will not be submitted to server. HTML <textarea> tag in form The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of <textarea> can be specify either using "rows" or "cols" attribute or by CSS. Example: 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>Form in HTML</title> 5. </head> 6. <body> 7. <form> 8. 9. Enter your address:<br> <textarea rows="2" cols="20"></textarea> 10. </form> 11. </body> 12. </html> Output: Label Tag in Form It is considered better to have label in form. As it makes the code parser/browser/user friendly. If you click on the label tag, it will focus on the text control. To do so, you need to have for attribute in label tag that must be same as id attribute of input tag. NOTE: It is good to use <label> tag with form, although it is optional but if you will use it, then it will provide a focus when you tap or click on label tag. It is more worthy with touchscreens. 1. <form> 2. <label for="firstname">First Name: </label> <br/> 3. <input type="text" id="firstname" name="firstname"/> <br/> 4. <label for="lastname">Last Name: </label> 5. 6. <input type="text" id="lastname" name="lastname"/> <br/> </form> Output: HTML Password Field Control The password is not visible to the user in password field control. 1. <form> 2. <label for="password">Password: </label> 3. 4. </form> Output: <input type="password" id="password" name="password"/> <br/> HTML 5 Email Field Control The email field in new in HTML 5. It validates the text for correct email address. You must use @ and . in this field. 1. <form> 2. <label for="email">Email: </label> 3. <input type="email" id="email" name="email"/> <br/> 4. </form> It will display in browser like below: Note: If we will not enter the correct email, it will display error like: Radio Button Control The radio button is used to select one option from multiple options. It is used for selection of gender, quiz questions etc. If you use one name for all the radio buttons, only one radio button can be selected at a time. Using radio buttons for multiple options, you can only choose a single option at a time. 1. <form> 2. <label for="gender">Gender: </label> 3. <input type="radio" id="gender" name="gender" value="male"/>M ale 4. <input type="radio" id="gender" name="gender" value="female"/>Female <br/> 5. </form> Checkbox Control The checkbox control is used to check multiple options from given checkboxes. 1. <form> 2. Hobby:<br> 3. <input type="checkbox" id="cricket" name="cricket" value="cricket" /> 4. <label for="cricket">Cricket</label> <br> 5. <input type="checkbox" id="football" name="football" value="footb all"/> 6. <label for="football">Football</label> <br> 7. <input type="checkbox" id="hockey" name="hockey" value="hocke y"/> 8. <label for="hockey">Hockey</label> 9. </form> Note: These are similar to radio button except it can choose multiple options at a time and radio button can select one button at a time, and its display. Output: Submit button control HTML <input type="submit"> are used to add a submit button on web page. When user clicks on submit button, then form get submit to the server. Syntax: 1. <input type="submit" value="submit"> The type = submit , specifying that it is a submit button The value attribute can be anything which we write on button on web page. The name attribute can be omit here. Example: 1. <form> 2. <label for="name">Enter name</label><br> 3. <input type="text" id="name" name="name"><br> 4. <label for="pass">Enter Password</label><br> 5. <input type="Password" id="pass" name="pass"><br> 6. <input type="submit" value="submit"> 7. </form> Output: HTML <fieldset> element: The <fieldset> element in HTML is used to group the related information of a form. This element is used with <legend> element which provide caption for the grouped elements. Example: 1. 2. <form> <fieldset> 3. <legend>User Information:</legend> 4. <label for="name">Enter name</label><br> 5. <input type="text" id="name" name="name"><br> 6. <label for="pass">Enter Password</label><br> 7. <input type="Password" id="pass" name="pass"><br> 8. <input type="submit" value="submit"> 9. </fieldset> 10. lt;/form> Output: HTML Form Example Following is the example for a simple form of registration. 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>Form in HTML</title> 5. </head> 6. <body> 7. 8. <h2>Registration form</h2> <form> 9. <fieldset> 10. <legend>User personal information</legend> 11. <label>Enter your full name</label><br> 12. <input type="text" name="name"><br> 13. <label>Enter your email</label><br> 14. <input type="email" name="email"><br> 15. <label>Enter your password</label><br> 16. <input type="password" name="pass"><br> 17. <label>confirm your password</label><br> 18. <input type="password" name="pass"><br> 19. <br><label>Enter your gender</label><br> 20. <input type="radio" id="gender" name="gender" value="male"/>Male <br> 21. <input type="radio" id="gender" name="gender" value="female"/>Fe male <br/> 22. <input type="radio" id="gender" name="gender" value="others"/>others <br /> 23. <br>Enter your Address:<br> 24. <textarea></textarea><br> 25. <input type="submit" value="sign-up"> 26. </fieldset> 27. </form> 28. </body> 29. </html> Test it Now Output: HTML Form Example Let's see a simple example of creating HTML form. 1. <form action="#"> 2. <table> 3. <tr> 4. <td class="tdLabel"><label for="register_name" class="label">Enter name:</labe l></td> 5. <td><input type="text" name="name" value="" id="register_name" style= "width:160px"/></td> 6. </tr> 7. <tr> 8. <td class="tdLabel"><label for="register_password" class="label">Enter passwor d:</label></td> 9. <td><input type="password" name="password" id="register_password" st yle="width:160px"/></td> 10. </tr> 11. <tr> 12. <td class="tdLabel"><label for="register_email" class="label">Enter Email:</labe l></td> 13. <td 14. ><input type="email" name="email" value="" id="register_email" style="width:160p x"/></td> 15. </tr> 16. <tr> 17. <td class="tdLabel"><label for="register_gender" class="label">Enter Gen der:</label></td> 18. <td> 19. <input type="radio" name="gender" id="register_gendermale" value="male" /> 20. <label for="register_gendermale">male</label> 21. <input type="radio" name="gender" id="register_genderfemale" value="fem ale"/> 22. <label for="register_genderfemale">female</label> 23. </td> 24. </tr> 25. <tr> 26. <td class="tdLabel"><label for="register_country" class="label">Select Country:< /label></td> 27. <td><select name="country" id="register_country" style="width:160px"> 28. <option value="india">india</option> 29. <option value="pakistan">pakistan</option> 30. <option value="africa">africa</option> 31. <option value="china">china</option> 32. <option value="other">other</option> 33. </select> 34. </td> 35. </tr> 36. <tr> 37. <td colspan="2"><div align="right"><input type="submit" id="register_0 " value="register"/> 38. </div></td> 39. </tr> 40. </table> 41. </form>

Introduction to HTML: Tags, Attributes, and Structure

Related documents

Products

Support

Introduction to HTML: Tags, Attributes, and Structure

Related documents

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib