- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <span> Tag
The HTML <span> tag is an inline container for phrasing the text. We can easily style the span tag using CSS and it is easily manipulated with JavaScript using the class or id attributes. It should be used only when no other semantic element is suitable.
The <span> tag is different from the <div> tag, the <div> tag is a block-level element, whereas the <span> is an inline-level element.
It is used to grouping and applying styles to inline elements.
Syntax
Following is the syntax of the <span> tag −
<span>.....</span>
Example
In the following program, we are creating multiple spans using the HTML <span> tag to mark up the part text or content in an HTML.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML span tag</title> </head> <body> <!--create span tag--> <span>Span1</span> <span>Span2</span> <span>Span3</span> <span>Span4</span> <span>Span5</span> </body> </html>
When we run the above code, it will generate an output consisting of the all the span tag text displayed in a single line.
As we know it is an inline element so all the span tag content will be displayed in one line.
Example
Following is another example of the HTML <span> tag. Here, we are creating multiple input fields to take user input and using the <span> tag to markup a part of text or content for each input field.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML span tag</title> <style> span { color: red; font-size: 12px; } </style> </head> <body> <form> <label for="">Username</label> <br> <input type="text"> <span>only characters and digits are allowed (a-zA-Z,0-9)</span> <br> <br> <label for="">Password</label> <br> <input type="password"> <span>password can contain '@#$0-9a-zA-A'</span> <br> <br> <button>Login</button> </form> </body> </html>
On running the above code, the output window will pop up displaying the input fields along with span text applied with CSS on the webpage.
Example
In this example, we are using the HTML <span> tag to markup the part of text or content of the given document. We are using the "class" attribute in each "span" tag to access them in the style tag to style the span element using their class with the extension .classname.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML span tag</title> <style> .demo { color: red; font-size: 20px; font-style: italic; } .demo1 { color: green; font-size: 12px; font-style: oblique; } </style> </head> <body> <h3>HTML span tag example....</h3> <p>Lorem ipsum dolor sit amet consectetur <span class='demo'>adipisicing elit</span>. Excepturi, sed? Vel debitis tempora ut nihil optio vitae, <span class='demo1'>blanditiis harum sunt ipsum labore</span> maiores minus molestias voluptas, praesentium dolor accusamus dolorem? </p> </body> </html>
When we run the above code, it will generate an output displaying the the text some of them are applied with CSS used with <span> tag.
Example
Let's look at the following example, where we are going to run the script for parsing content used in the <span>
<!DOCTYPE html> <html lang="en"> <head> <title>HTML span tag</title> <style> #txt { color: red; font-style: italic; font-size: 30px; } </style> </head> <body> <!--Create span tag--> <span id='txt'>Text within span tag.</span> <button onclick="Show()">Show</button> <!--javascript--> <script> function Show() { let demo = document.getElementById('txt'); alert(demo.innerHTML); } </script> </body> </html>
On executing the above code, the output window will pop up, displaying the text along with a click button on the webpage. When the user clicks the button, it gets triggered and displays a pop-up.
To Continue Learning Please Login
Login with Google