Shop Forum More Submit  Join Login


This is just a quick text formatting guide for dA. My goal was to make a simple html guide for easy reference.  Please PAY ATTENTION to where the codes WILL and WILL NOT work!  (Certain codes won't work in comments and deviation descriptions, no matter how hard you try.)  :'D

 

I provided "working examples," which might make the codes easier to understand because you can see them in action. (Keep in mind that when you type html tags, the effects won't be visible until AFTER you hit "Preview" on your comment, journal, etc. I only made them visible for the purpose of demonstration.) Enjoy!!!

 





Divider (4) by LadyMidnightSolace Divider (4) by LadyMidnightSolace Divider (4) by LadyMidnightSolace

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


Divider (4) by LadyMidnightSolace Divider (4) by LadyMidnightSolace Divider (4) by LadyMidnightSolace



<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 showing up like subscript here.  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: www.w3schools.com/tags/ref_asc…)

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.)







Divider (4) by LadyMidnightSolace Divider (4) by LadyMidnightSolace Divider (4) by LadyMidnightSolace

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


Divider (4) by LadyMidnightSolace Divider (4) by LadyMidnightSolace Divider (4) by LadyMidnightSolace



<font face="Arial">Change the font name in the "quotation marks."</font>
<font face="Arial Black">Change the font name in the "quotation marks."</font>
<font face="Comic Sans MS">Change the font name in the "quotation marks."</font>
<font face="Courier New">Change the font name in the "quotation marks."</font>
<font face="Georgia">Change the font name in the "quotation marks."</font>
<font face="Impact">Change the font name in the "quotation marks."</font>
<font face="Lucida Console">Change the font name in the "quotation marks."</font>
<font face="Lucida Sans Unicode">Change the font name in the "quotation marks."</font>
<font face="Palatino Linotype">Change the font name in the "quotation marks."</font>
<font face="Tahoma">Change the font name in the "quotation marks."</font>
<font face="Times New Roman">Change the font name in the "quotation marks."</font>
<font face="Trebuchet MS">Change the font name in the "quotation marks."</font>
<font face="Verdana">Change the font name 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.  Here is a list of Web Safe Fonts that will work on most computers: www.w3schools.com/cssref/css_w…



<font size="1">This will change the size of your font.</font>
<font size="2">This will change the size of your font.</font>
<font size="3">This will change the size of your font.</font>
<font size="4">This will change the size of your font.</font>
<font size="5">This will change the size...</font>
<font size="6">This will change the size...</font>
<font size="7">This will change the size...</font>
      *Note: Size 7 is the maximum size.



<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>







Divider (4) by LadyMidnightSolace Divider (4) by LadyMidnightSolace Divider (4) by LadyMidnightSolace

The following codes can be used for links.
Some types of links may or may not work in different places on dA.


Divider (4) by LadyMidnightSolace Divider (4) by LadyMidnightSolace Divider (4) by LadyMidnightSolace


Avatar Linking


    Type :iconsweetduke: to get :iconsweetduke:
   
         *Note: Obviously change my username "sweetduke" to anyone else's username for it to work.  ;)



Username Linking



    Typing :devsweetduke: or @sweetduke will give you SweetDuke
   
         *Note: Obviously change my username "sweetduke" to anyone else's username for it to work.  ;)



Text Linking (changing the name of links)


   
    <a href="Image URL address">Name of Image</a>
         
         This is a link to my page.
             
              *Note: Copy/paste your link into the "quotation marks," and type whatever you want for the Name of Image.



Image Linking


    <a href="URL address"><img src="Image URL address" alt="Name of Image" /></a>

         Ren's sprite is cute!
             
              *Note: Go to the deviation and copy/paste the link in "URL address."  Then DOWNLOAD the deviation, and copy/paste that new link in "Image URL address" (the link should start with http://orig or http://fc). Type whatever you want for the Name of Image.



Thumb Codes (and how to use stamps)



    :thumb174033030: Status Stamps + Plz Accounts by SweetDuke

    :bigthumb174033030: Status Stamps + Plz Accounts by SweetDuke

         *Note: Here is a visual tutorial on how to find the thumb codes: fav.me/d41g4pz  Or you can go to the right of the image and find the share buttons (Note, Facebook, Tumblr, & Twitter) and click the down arrow, then copy/paste the thumb code.  You can also scroll down further to the right under "Details" and copy the thumb code there. Type :bigthumb#####: to get a bigger thumbnail image.






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!

Updated 2/9/17 - Added links!  (Since they work in literature submissions now but not in 2011 when I submitted this haha.)  I also included more font face and font size examples, updated the outdated thumbnails, fixed some formatting styles, and more!

This is just a simple html guide to text formatting on dA. :aww: I know that many people know these already, but there are some people who don't and there might be a few tips that are new to you (I learned a lot of new ones when I compiled this heehee). 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 DamselStock for the Ordered List example!)  I did not include media embedding or acronym/popup tags, so if you're interested, you can check the FAQ #104 below.  

To change the FONT COLOR, use these codes: (Note - The font color codes are for premium members and super groups ONLY!)
Colored Text (Custom box) - More colors by CypherVisor

Dividers created by LadyMidnightSolace



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 backup-lunari.deviantart.com/a…
Add a Comment:
 
:iconkellieeth:
Kellieeth Featured By Owner 2 days ago  New Deviant Student General Artist
Test
Reply
:iconspacebear17:
spacebear17 Featured By Owner 2 days ago  Student Digital Artist
testing
Reply
:iconshinykilleroptics:
ShinyKillerOptics Featured By Owner 2 days ago  Hobbyist General Artist
I have seen one who could insert a picture on the profile widget thing, not a stamp, no link, just a pic.
and you can't copy a pic and then set it on the profile widget thingy

wow I'm good at explaining
Reply
:iconmiyeopta:
Miyeopta Featured By Owner 3 days ago
Is it possible to change the text color?? 
Reply
:iconbeta-mei03:
Beta-mei03 Featured By Owner Edited 3 days ago
test
test
test
test
Name
Reply
:icongordonfroman17:
GordonFroman17 Featured By Owner 4 days ago
test
Reply
:iconslleepyprince:
SlleepyPrince Featured By Owner Edited 5 days ago  Student Digital Artist
<tt> The "< tt >" isn't working on my descriptions :c
Do I need to put something else, like "
tt="Courier New" >?</tt>
Reply
:iconshiryu080:
Shiryu080 Featured By Owner 6 days ago
test
Reply
:iconkeeners4:
keeners4 Featured By Owner 6 days ago
Tysm ~ Heart 
Reply
:iconlirycaallson:
LirycaAllson Featured By Owner Apr 15, 2018  Hobbyist Digital Artist
oh
Reply
:iconemiemil112:
emiemil112 Featured By Owner Edited Apr 15, 2018
<sub>s</sub>
Reply
:iconhellomark304304:
hellomark304304 Featured By Owner Apr 14, 2018  Student Filmographer
test
Reply
:iconspriingtrapxx:
Spriingtrapxx Featured By Owner Apr 13, 2018  Hobbyist General Artist
oof test
Reply
:icondecadefury567exe666:
DecadeFury567exe666 Featured By Owner Apr 12, 2018  Hobbyist General Artist
Test
Reply
:iconmiyeopta:
Miyeopta Featured By Owner Edited Apr 8, 2018
Thank you
Reply
:iconcraziepanda32:
CraziePanda32 Featured By Owner Edited Apr 7, 2018  Hobbyist Traditional Artist
great
Reply
:iconartemiszeta:
ArtemisZeta Featured By Owner Apr 4, 2018  New Deviant Professional Digital Artist
WEW
Reply
:iconhardh3rtz:
HardH3rtz Featured By Owner Edited Apr 4, 2018  Hobbyist Traditional Artist
fonts doesn't work in journal :)
tested in different browsers.
Reply
:iconkagamichhi:
Kagamichhi Featured By Owner Apr 8, 2018  Hobbyist Writer
same here! have you figured out a way to fix that? do let me know.
Reply
:iconhardh3rtz:
HardH3rtz Featured By Owner Apr 8, 2018  Hobbyist Traditional Artist
Not really :(
I had read somewhere else that it is a core function, since (?). It was not referenced.
While others say you must have the fonts installed on your computer. Which is also a hopeless case, because I had that too an even then it didn’t work.
So I have to do with the standard font.Luffy Anime Emoji (Cry) [V4]  

If if you want to publish different fonts I suggest making some sheets in gimp where you can place your message, save it, and then publish it on deviantart.
I’m going to do that for my commissions info pages/ journals.
Or if you are good in programming; CSS.

Sorry if I wasn’t very helpful for you, but I hope you can work with this.Luffy 
Reply
:iconkagamichhi:
Kagamichhi Featured By Owner Apr 8, 2018  Hobbyist Writer
I highly appreciate it!
I can only change the font of some of my works, while the rest remain unaffected. 
I think its got something to do with the italics on the original work.

Thank you so much for the help!Hug [ YURI ON ICE ] Drunk hug. 
Reply
:iconhardh3rtz:
HardH3rtz Featured By Owner Apr 8, 2018  Hobbyist Traditional Artist
I just pretend that deviantart is sometimes broken when we edit stuff xD.
That can be indeed the case. Or the html page from deviantart can’t handle the codes. Well.. whatever’s the case, it’s just freaking annoying sometimes lol.

And no problem at all. Glad I could help, even if it’s just a little bit Meow :3 Natsuki Shinomiya (Super hug) [V1] 
Reply
:iconaritheabominablewolf:
AriTheAbominableWolf Featured By Owner Apr 3, 2018
<h1>
TESTING
</h1>
Reply
:iconbloodyalice1576:
BloodyAlice1576 Featured By Owner Apr 3, 2018  Hobbyist General Artist
testing 
Reply
:iconins6nity:
ins6nity Featured By Owner Apr 3, 2018  New Deviant
mike check mike check.
Reply
:iconz0oxy:
Z0oXy Featured By Owner Mar 31, 2018  Hobbyist Digital Artist
test
Reply
:iconmy--melody:
my--melody Featured By Owner Mar 31, 2018  New Deviant
.:Bunny kyaa:.this is so cuteee~.:Bunny rubs:. 
Reply
:iconragingfurry:
RagingFurry Featured By Owner Mar 29, 2018
Bold
Reply
:iconthesoupstore:
TheSoupStore Featured By Owner Mar 27, 2018  Student Digital Artist
test
Reply
:iconprisecyt:
PrisecYT Featured By Owner Mar 27, 2018   Digital Artist
yes good
Reply
:iconflippingrnadom:
FlippingRnadom Featured By Owner Mar 25, 2018  Student General Artist
testing testing
Reply
:iconbrodget:
Brodget Featured By Owner Mar 25, 2018  Hobbyist Digital Artist
test test
Reply
:iconphoems17cutieplier:
Phoems17cutieplier Featured By Owner Mar 25, 2018  Student Digital Artist
testing
Reply
:iconthelightsparrow:
TheLightSparrow Featured By Owner Edited Mar 18, 2018  New Deviant
Testing,
More Testing,
Reply
:iconstuntpony:
Stuntpony Featured By Owner Edited Mar 18, 2018
Testing, testing, one two, three.
Reply
:iconmarbledcrush:
MarbledCrush Featured By Owner Mar 17, 2018  Hobbyist Traditional Artist
test?
Reply
:iconfoxyfriend0412:
Foxyfriend0412 Featured By Owner Mar 14, 2018  Student General Artist
< div align="center" > < div align=“center” > Test </div>
Reply
:iconmockingjay-moony:
Mockingjay-Moony Featured By Owner Mar 6, 2018  Hobbyist Digital Artist
test
Reply
:iconmockingjay-moony:
Mockingjay-Moony Featured By Owner Mar 5, 2018  Hobbyist Digital Artist
test
Reply
:iconelephantempress:
ElephantEmpress Featured By Owner Feb 28, 2018  Hobbyist Digital Artist
<blockquote>dafsdfasdgdfhgfg</blockquote>
Reply
:iconelement-kitten-klaws:
element-kitten-klaws Featured By Owner Edited Feb 27, 2018  Hobbyist Digital Artist
this is so helpful thank you !! : D
Reply
:iconbloodyalice1576:
BloodyAlice1576 Featured By Owner Edited Feb 22, 2018  Hobbyist General Artist
<sub> Eeek! I love this so much! <33 <sub>
_____________________________

BloodyAlice1576 | 216 | Teddiursa
Reply
:iconneko--sweets:
Neko--Sweets Featured By Owner Feb 20, 2018  Student Digital Artist
<b>Test</b
<b> Test </b
 
Reply
Add a Comment:
 
×

Featured in Collections

Css Boxes by Ludiiicrous




Details

Submitted on
July 10, 2011
File Size
8.8 KB
Submitted with
Sta.sh
Link
Thumb

Stats

Views
267,917 (30 today)
Favourites
16,625 (who?)
Comments
2,994
×