deviant art

Deviant Login Shop
 Join deviantART for FREE Take the Tour
×

More from ~SweetDuke


×


This is just a simple html guide to formatting text on dA (and other sites as well), since nicely formatted text makes everything more visually appealing! :) My goal was just to compile some html info into a simple, easy to understand guide for quick reference.  I'm not very experienced with html so please let me know if you have any corrections or codes I should add!  

This guide goes a little above and beyond dA's FAQ entry (although I purposely left out anything to do with links, because they don't work on literature submissions).  I also provided working examples, which might make the codes a little easier to understand. (Keep in mind that when you type html tags, the effects won't be visible until you hit "Preview" on your comment, journal, etc. I only made them visible here for the purpose of demonstration.)

Let's get started! :dummy:









The following codes can be used in comments, deviation descriptions, journals, and profile page widgets.




<b>This will make bold text.</b>
<strong>This will also make bold text.</strong>



<i>This will make italicized text.</i>
<em>This will also make italicized text.</em>



<u>This will make underlined text.</u>



<s>This will make striked out text.</s>
<strike>This will also make striked out text.</strike>
<del>This will also make striked out text.</del>



You can also <b><u>combine multiple codes like this,</u></b> easy!
      *Note: When using multiple tags, close the most recent tag first (like how I put </u> before </b>).



<sub>This will display the text in subscript.</sub>
<sub>Use it multiple times to make text smaller  <sub>and smaller <sub>and smaller</sub></sub></sub>!



<sup>This will display the text in superscript.</sup>
<sup>Use it multiple times to make text smaller  <sup>and smaller <sup>and smaller</sup></sup></sup>!



<small>This will make text smaller (and not go below like subscript or above like superscript).</small>
      *Note: This tag doesn't work in literature submissions, so that's why it's not showing up here properly. XD



You can create cool effects like thissssss by typing this<sub>s<sub>s<sub>s<sub>s<sub>s</sub></sub></sub></sub></sub>!



<code>This will change your text to a monospaced font.</code>
<tt>This will also change your text to a monospaced font.</tt>
      *Note: Monospaced fonts include Consolas, Courier, DejaVu Sans Mono, Lucida Console, Monaco, Prestige, etc.



Type <hr /> or <hr> to get the nice line I've been using throughout this guide! ↓



If you want something like :) instead of :) there are a few options:

Type :<i></i>)

Type : then  &#41; for the )
(Here is a list of the ASCII character set: http://www.w3schools.com/tags/ref_ascii.asp)

Sometimes you can also type :<span>)
(For example, it works in comments but not in deviation descriptions.)



<blockquote>Use this to create an indented section of text.</blockquote>
<blockquote><blockquote>Use it multiple times to indent text further!</blockquote></blockquote>



To get an ordered (numbered) list like

An artist's essential items:



      
  1. Coffee

  2.   
  3. deviantART

  4.   
  5. Photoshop

  6.   
  7. Wacom

you can use the Ordered List tag <ol> by typing:

<h4>An artist's essential items:</h4>
<ol>
  <li>Coffee</li>
  <li>deviantART</li>
  <li>Photoshop</li>
  <li>Wacom</li>
</ol>

(You don't need to hit enter between all of the <li> tags [they can all be on one line] because they will go on separate lines automatically.  I just kept them on separate lines so that the code is easier to see.)



To get an un-ordered list like

An artist's essential items:



      
  • Coffee

  •   
  • deviantART

  •   
  • Photoshop

  •   
  • Wacom

you can use the Un-Ordered List tag <ul> by typing:

<h4>An artist's essential items:</h4>
<ul>
  <li>Coffee</li>
  <li>deviantART</li>
  <li>Photoshop</li>
  <li>Wacom</li>
</ul>

(You don't need to hit enter between all of the <li> tags [they can all be on one line] because they will go on separate lines automatically.  I just kept them on separate lines so that the code is easier to see.)







The following codes can ONLY be used in journals and profile page widgets.




<font face="impact">This will change your font, depending on what font name you type in the "quotation marks".</font>
      *Note: Fonts will only show up if the viewer has that font installed on their computer. Otherwise it will show up as another default font.



<font size="4">This will change the size of your font.</font>



<div align="left">This will align your text to the left.</div>


<div align="center">This will center your text.</div>

<div align="justify">This will justify your text.</div>

<div align="right">This will align your text to the right.</div>



<h1>

This will give you heading text.

</h1>



<h2>

This will give you heading text.

</h2>



<h3>

This will give you heading text.

</h3>



<h4>

This will give you heading text.

</h4>



<h5>
This will give you heading text.
</h5>



<h6>
This will give you heading text.
</h6>







I hope some people found this to be helpful! If you see any mistakes or have other codes you think should be added, please let me know! ♥

86,663

10,241 1,305 674
Download HTML download, 8.8 KB
This is just a simple html guide to text formatting on dA. :aww: I know that most people know these already, but there are some people who don't and there might be a few that are new to you. I just tried to make a simple, easy to understand compilation for quick reference. I am personally not very experienced with html so let me know if you see any corrections I should make or codes I should add! (And thanks to *Stock-by-Casey for the Ordered List example!)

Edit - Since many people have asked me about changing the font color, I'll copy/paste my response:
As far as I know, dA won't let you use html codes to change the font color in custom widgets, deviation descriptions, or comments. You can only change font colors in your journal if you're a premium member and can use CSS.


Edit 2 - Thanks for all of the comments and favs!!!!! I can't reply to all of you, but I'm so glad that this guide was able to help so many people!


More Resources


Here are a couple FAQ entries and tutorials to help with other formatting questions that I didn't address in this guide:

Preview image created with [link]

Details

Stats

Submitted on
July 10, 2011
File Size
8.8 KB
Submitted with
Sta.sh
Views
86,663 (22 today)
Favourites
10,241 (who?)
Comments
1,305
Downloads
674
URL
Thumb
Only verified accounts can report policy violations. Please check your email and click on the verification link.
* Required field
Add a Comment:
 
:iconcrazydash456:
~crazydash456 7 hours ago  New member
)
Reply
:iconcrazydash456:
~crazydash456 7 hours ago  New member
YOUR ICON IS A DRATINI. :iconbravoplz:
Reply
:iconcrazydash456:
~crazydash456 7 hours ago  New member
I secretly don't want to be a virgin anymore
LOL JK XD just testing.
Reply
:iconkatsweery:
~Katsweery 1 day ago  Hobbyist Digital Artist
This is extremely helpful! Thanks so much for making it!
Reply
:iconmodethewoulfie:
~MODEthewoulfiE 1 day ago  Hobbyist General Artist
Thanks so much!
Reply
:iconacillathepkmnranger:
~Acillathepkmnranger 3 days ago  Hobbyist Writer
thank you for posting this<sup>
Reply
:iconacillathepkmnranger:
~Acillathepkmnranger 3 days ago  Hobbyist Writer
<h1> :3
<h2> hi
<h3> hello
<h4> this is useful
<h5> yay
<h6> EPICNESS
Reply
:icondiamondluv180:
~diamondluv180 4 days ago  Hobbyist Digital Artist
omg I love you <3
Reply
:iconnikt3hcheshire:
~NikT3hCheshire 5 days ago  Student Digital Artist
ello.
wat. testing.
Reply
:iconnikt3hcheshire:
~NikT3hCheshire 5 days ago  Student Digital Artist
hi ouo -testing it-
Reply
Add a Comment: