coding180 icon

Coding180

HTML element: Span

HTML element: Span

Tutorials > HTML > HTML Elements


The span tag is an inline element, that is, when added to the page, it is inserted laterally after the other components, unlike divs that are block-type elements.

Span elements, by default, also do not have any defined visual characteristics, this needs to be done via CSS to highlight or apply special formatting to a certain part of the text.

For example, code below demonstrates the use of span in two cases. 
In the first, the tag does not have any additional attributes; in the second, we added a different look to it via CSS.

<p>This is text with a <span>
        featured snippet</span>.</p>
<p>
    This is text with a <span style="background: #1abc9c; 
border-radius:5px; padding:5px">
        featured snippet</span>.
</p>

 

The result can be seen in image below and, as expected, in the first case we could not see any visual difference due to the use of span.

output: 

Html span - coding180

 


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel