span
Designing Chaturbate Bios - <span>
HTML Tag - Span
The HTML span element is a generic inline container for inline elements and content. It used to group elements for styling purposes (by using the class or id attributes), A better way to use it when no other any 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.
| TAG | HTML MARKUP | DEFINES |
|---|---|---|
<span> |
<span>....</span> |
HTML element – is used to group inline-elements in a document |
HTML MARKUP
<span> - can be used in conjunction with inline css and supports inline-block (css markup)
<span> - </span>
<span>This element is using <span> tag</span>
Will render:
This element is using <span> tag
<span style="display:block;width:50%;height:auto;padding:10px;margin:3px auto 4px 2px;background-color:orange;-webkit-border-radius:6px 0 6px 0;border-radius:6px 0 6px 0;color:#000;text-transform:uppercase;text-align:center;font-size:16px;">This element is using <span> tag and inline-css</span>
Will render:
This element is using <span> tag and inline-css
Code Snippets
Test markup codes and see how your browser is rendering them. Use button to see how to use the source editor and rendering tool
Markup Code Box
Default button, on click, removes the markup code from light-blue box
Render Box
That's how it looks rendered in browser. Optionally you can Save as PDF
Markup Codes using <span> HTML tag
We've mentioned above, <span> tag can be used both as a single block or in group.
Span tag and how to style them to look more appealing using inline-CSS
<span style="display:block;width:50%;height:auto;padding:10px;margin:3px auto 4px 2px;background-color:red;-webkit-border-radius:6px;border-radius:6px;color:#fff;text-transform:uppercase;text-align:center;font-size:16px;text-shadow:0 0 5px #f1f1f1;">This element is using <span> tag and inline-css</span>
Will render:
This element is using <span> tag and inline-css
<span style="display:inline-block;width:20%;height:auto;padding:10px;margin:3px auto 4px 2px;background-color:#036;color:#fff;text-transform:uppercase;text-align:left;font-size:16px;">This element is using <span> tag and inline-css</span><span style="display:inline-block;width:20%;height:auto;padding:10px;margin:3px auto 4px 2px;background-color:#222;color:#fff;text-transform:uppercase;text-align:left;font-size:16px;">This element is using <span> tag and inline-css</span>
Will render:
This element is using <span> tag and inline-cssThis element is using <span> tag and inline-css
<span style="display:block;width:50%;height:auto;padding:10px;margin:3px auto 4px 2px;background-color:#f1f1f1;-webkit-border-radius:6px 0 0 6px;border-radius:6px 0 0 6px;color:#000;text-align:left;font-size:16px;border-left:6px solid #ccc;">This element is using <span> tag and inline-css</span>
Will render:
This element is using <span> tag and inline-css
Inline-css can be added to:
Editing Tips
Our suggestions for fast editing and viable markup rendering
target="_ ". All links (on page or external URLs) are set up to open on another page (with a countdown) so there's no need to use target="_ "
