Python How to Get Text From Html Span
Example: In this example, we simply use span tag with style in HTML.
Attention reader! Don't stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
HTML
<!DOCTYPE html>
< html >
< body >
< h2 >Welcome To GeeksforGeeks</ h2 >
< p >GeeksforGeeks is a < span style = "color:red;font-weight:bolder" >
computer science</ span > portal for
< span style = "background-color: lightgreen;" >geeks</ span >.
</ p >
</ body >
</ html >
Output:
The HTML span element is a generic inline container for inline elements and content. It is used to group elements for styling purposes (by using the class or id attributes), A better way to use it when no other semantic element is available. span is very similar to the div tag, but div is a block-level tag and span is an inline tag. Span tag is a paired tag means it has both open(<) and closing (>) tag, and it is mandatory to close the tag.
- The span tag is used for the grouping of inline elements.
- The span tag does not make any visual change by itself.
- span is very similar to the div tag, but div is a block-level tag and span is an inline tag.
Syntax:
<span class="">Some Text.............</span>
Attribute: This tag accept all the Global attribute and Event Attributes
Example 1: In this example suppose we want to write three times GeeksforGeeks in three lines with bold, italic, underline, in green color with font-family = courier new, so we need to use many HTML tags such as <b>, <i>, <u>, <font> for every time in every line, and we want to make changes need to modify every tag.
HTML
<!DOCTYPE html>
< html >
< body >
< h2 >Welcome To GfG</ h2 >
< span >The span tag does not create a line break</ span >
< span >it allows the user to separate things from other elements</ span >
< span >around them on a page within the same line</ span >
< br >
< font color = "009900" size = "6" >
< b >
< u >
< i >GeeksforGeeks</ i >
</ u >
</ b >
</ font >
< br >
< font color = "009900" size = "6" >
< b >
< u >
< i >GeeksforGeeks</ i >
</ u >
</ b >
</ font >
< br >
< font color = "009900" size = "6" >
< b >
< u >
< i >GeeksforGeeks</ i >
</ u >
</ b >
</ font >
</ body >
</ html >
Output:
Example 2: In this example by using <span> tag we can reduce code and HTML Attributes see below example will display the same output as the above example with using <span> tag by applying CSS in a span tag.
HTML
<!DOCTYPE html>
< html >
< head >
< title >GeeksforGeeks span tag</ title >
< style type = text /css>
span {
color: green;
text-decoration: underline;
font-style: italic;
font-weight: bold;
font-size: 26px;
}
</ style >
</ head >
< body >
< h2 >Welcome To GFG</ h2 >
< span >GeeksforGeeks</ span ></ br >
< span >GeeksforGeeks</ span ></ br >
< span >GeeksforGeeks</ span ></ br >
</ body >
</ html >
Output:
Example 3: As we know span is an inline tag it takes space as much as required and leaves space for other elements let see it in the below example all four-span elements will display in the same line because each tag takes only the necessary space and the rest of the space free for other elements.
HTML
<!DOCTYPE html>
< html >
< head >
< title >GeeksforGeeks span tag</ title >
</ head >
< body >
< h2 >Welcome To GfG</ h2 >
< span style = "background-color:powderblue;" >
GfG</ span >
< span style = "background-color: lightgray;" >
-Contribute-</ span >
< span style = "background-color: yellow;" >
Article</ span >
< span style = "background-color: lightgreen;" >
GCET</ span >
</ body >
</ html >
Output:
Example 4: A span tag can be used to set color/background color a part of a text. In the below example inside paragraph applying three times span tag with a different style.
HTML
<!DOCTYPE html>
< html >
< head >
< title >GeeksforGeeks span tag</ title >
</ head >
< body >
< h2 >Welcome To GfG</ h2 >
< p >< span style = "background-color:lightgreen" >
GeeksforGeeks</ span > is A Computer Science
Portal where you can< span style = "color:blue;" >
Publish</ span > your own
< span style = "background-color:lightblue;" >articles</ span >
and share your knowledge with the world!!
</ p >
</ body >
</ html >
Output:
Example 5: Manipulate JavaScript with span tag, in the below example, we add a span tag inside a paragraph with id="demo" we can changes its text by applying javascript in this example GFG will be changed "GeeksforGeeks" after clicking on Button.
HTML
<!DOCTYPE html>
< html >
< body >
< h2 >Welcome to GfG</ h2 >
< p > < span id = "demo"
style = "background-color:lightgreen;" >
GfG
</ span >
A computer Science portal for Geeks
</ p >
< button type = "button" o
nclick="document.getElementById('demo') .innerHTML =
'GeeksforGeeks!!!' ">
Change Text!
</ button >
</ body >
</ html >
Output:
Difference Between Div tag and span tag : The div and span tag are two common tags when creating pages using HTML and perform different functionality on them while div tag is a block-level element and span is inline element The div tag creates a line break and by default creates a division between the text that comes after the tag as begun and until the tag ends with </div>. div tag creates separate boxes or containers for all elements inside this tag like text, images, paragraphs.
Supported Browsers:
- Google Chrome
- Internet Explorer
- Edge 12 and above
- Firefox 1 and above
- Opera
- Safari
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Python How to Get Text From Html Span
Source: https://www.geeksforgeeks.org/html-span-tag/
0 Response to "Python How to Get Text From Html Span"
Post a Comment