u
Designing Chaturbate Bios - <u>
HTML Tag - Underline
The HTML <u> tag represents some text that should be stylistically different from normal text
On Chaturbate this additional element is helpful when editing a custom design.
| TAG | HTML MARKUP | DEFINES |
|---|---|---|
<u> |
<u>...</u> |
HTML tag used to render the text underlined |
HTML MARKUP
u - can be used as default, as it is, or empowered by inline-css.
HTML Markup Code:
<u>This is a text which uses simple underline HTML tags</u>
Will render:
This is a text which uses simple underline HTML tags
<u style="display:block;width:90%;height:auto;padding:15px;margin:4px auto 12px auto;font-size:16px;color:#666;background-color:#f1f1f1;">This is a text which uses underline HTML tags and inline-css</u>
Will render:
This is a text which uses underline HTML tags 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 <u> HTML tag
Underline tags can hold different types of content but keep in mind that there's a certain legacy between all HTML tags.
Underline tags and how to style them to look more appealing using inline-CSS
1. Basic html for underline element with some inline-css
<u style="display:block;width:50%;height:auto;margin:7px auto 5px 3px;color:#036;padding:4px 8px;text-align:left;">Some Text Here</u>
Show:
Some Text Here2. Other styling using inline-css
<u style="display:block;width:50%;height:auto;margin:7px auto 5px 3px;color:#f1f1f1;padding:15px;text-align:left;background-color:#4b9cf3;">Some Text Here</u>
Show:
Some Text Here3. Other styling using inline-css
<u style="display:block;width:50%;height:auto;margin:7px auto 5px 3px;color:#f1f1f1;padding:15px;text-align:left;background-color:#222;-webkit-border-radius:20px 0 20px 0;border-radius:20px 0 20px 0;">Some Text Here</u>
Show:
Some Text Here4. Using underline HTML markup with a link inside
<u style="display:block;width:50%;height:auto;margin:7px auto 5px 3px;color:#f1f1f1;padding:15px;text-align:left;background-color:#222;-webkit-border-radius:20px 0 20px 0;border-radius:20px 0 20px 0;"><a href="#" style="color:pink;text-decoration:none;">Some Text Here as a link</a></u>
Show:
Some Text Here as a linkAs mentioned above, there's a legacy and a certain structure between markup codes, from parent to child. In this case the parent element is the underline and the child element is the link.
5. A bit more complex, 1 underline containing 3 other blocks defined as span (also a HTML tag accepted by Chaturbate)
<u style="display:block;width:80%;height:auto;margin:7px auto 5px 3px;padding:15px;text-align:left;background-color:#222;"><span style="display:inline-block;width:30%;height:auto;padding:10px;text-align:center;background-color:#F3C;color:#fff;margin:5px auto;">Box Left</span><span style="display:inline-block;width:30%;height:auto;padding:10px;text-align:center;background-color:#9C0;color:#fff;margin:5px auto;">Box Center</span><span style="display:inline-block;width:30%;height:auto;padding:10px;text-align:center;background-color:#06C;color:#fff;margin:5px auto;">Box Right</span></u>
Show:
Box LeftBox CenterBox Right6. Other styling using inline-css and removing the underline style
<u style="display:block;width:50%;height:auto;margin:7px auto 5px 3px;color:#f1f1f1;padding:15px;text-align:left;background-color:#222;-webkit-border-radius:20px 0 20px 0;border-radius:20px 0 20px 0;text-decoration:none;">Some Text Here</u>
Show:
Some Text Here
