Shop Mobile More Submit  Join Login
Formatting text and images on dA (HTML + dA codes) by Synfull Formatting text and images on dA (HTML + dA codes) by Synfull
Throughout my tutorials and news articles on deviantART I use a variety of methods to help format my text and insert images. It’s becoming quite common that people ask me how I have achieved one or more of these effects, so I thought that I would write a quick guide as it allows me to quickly and clearly pass on the information each time.

This tutorial covers basic HTML tags available on deviantART, as well as a number of site specific features. It is mainly designed for those unfamiliar with HTML or those new to the site, as none of it is particularly complicated once you find the necessary code and understand how to use it.

Basic text formatting


The majority of the text formatting on dA is done through HTML tags. A ‘tag’ has angular brackets with some text inside which corresponds with a certain function. Each command has an ‘opening tag’ (e.g <b>) which says when the formatting should start, and a closing tag (e.g. </b>) which states when it should finish.

In some cases there may be multiple tags which do the same formatting. You can find these instances grouped together.

:bulletblue: <b>Bold text</b> -> Bold Text
:bulletblue: <strong>Bold text</strong> -> Bold Text

:bulletblue: <u>Underlined text</u> -> Underlined Text

:bulletblue: <i>Italicized text</i> -> Italicized text
:bulletblue: <em>Italicized text</em> -> Italicized text


:bulletblue: <s>Striked text</s> -> Striked text
:bulletblue: <strike>Striked text</strike> -> Striked text

Text sizes


:bulletblue: <h1>Large (Header 1) Text</h1> ->

Large (Header 1) Text


:bulletblue: <h2>Large (Header 2) Text</h2> ->

Large (Header 2) Text


:bulletblue: <h3>Medium (Header 3) Text</h3> ->

Medium (Header 3) Text


The <h1>, <h2> etc codes only work in certain areas of dA. For example, they cannot be used in normal comments. They can however be used in journals and the artist comments sections of deviations.

:bulletblue: <small>Small text</small> -> Small text
:bulletblue: <sup>Superscript text</sup> -> Superscript text
:bulletblue: <sub>Subscript text</sub> -> Subscript text

The options for small text differ in their positioning within a line of text. Superscript will place it at the top the line of text, where as Subscript will align it with the bottom. Small will keep it in the normal position and simply shrink the text size.

Text positions


HTML also allows you to alter the position of text making it line up with the left, right or centre of the page. In each code the basic code is the same, and you simply swap the word show in bold to achieve the designed alignment.

:bulletblue: <div align="Option">Text to be aligned</div>

The for 'option's are:
:bulletblue: Left aligned - (default option) Text aligns with the left of the text area
<div align="left">Left aligned text</div>

:bulletblue: Center aligned - Text aligns with the centre of the text area
<div align="center">Center aligned text</div>

:bulletblue: Right aligned - Text aligns with the right of the text area
<div align="right">Right aligned text</div>

Notes:
1) This HTML only works in limited places on dA such as journals and custom boxes. It doesn't work in normal comments, the dAmn chatrooms etc.
2) The option to centralise text uses the American spelling of 'Center'. For those that use the British spelling, this is a common mistakes which stops the code working.

Multiple formatting


It is possible to apply multiple formats to a single piece of text. This is achieved by nesting the tags inside each other. For example

:bulletblue: <b><u>Bold and Underlined text</u></b> -> Bold and Underlined text

:bulletblue: <sub><sub>Sup and Sub tags can be nested for even smaller text</sub></sub> -> Sup and Sub tags can be nested for even smaller text

However, when doing so you have to look out for the order you place the closing tags in. If Tag 2 is nested inside Tag 1, closing Tag 1 before Tag 2 (e.g.<t1><t2>Text</t1></t2>) will also result in Tag 2 being closed. For example:

<b><u>Sample</b></u> Text -> Sample Text

The underlined text ends at the same time as the bold, as closing the outer bold tags will also close the inner underlined tags. If you wanted all text to be underlined you would either need to swap the bold and underlined tags over to the order <t2><t1>Sample</t1> Text</t2> or place the remaining text in its own set of underlining tags e.g. <t1><t2>Sample </t2></t1> <t2>Text></t2>.

Further HTML


deviantART supports a number of other HTML tags which can be used to help format text within deviations, comments and journals. However, as these are generally less used I have left them out of this tutorial.

If you wish to find out more then you can find an official FAQ on the subject here

Inserting links


Using a mixture of HTML and deviantART codes it is possible to link to web pages and dA profiles using the following methods. In all cases, the bold text should be replaced with the appropriate link or text you wish to insert.

:bulletblue: :devsynfull: -> `Synfull

:bulletblue: :iconsynfull: -> :iconsynfull: (Shows the user’s icon, but also links to their profile)

:bulletblue: <a href="http://www.facebook.com">Text link should be attached to</a> -> Text link should be attached to

This method can be used to link to a dA profiles, but should only really be used if you want custom text to appear instead of the deviant’s username. If just the username is required then you should use the :devusername: version shown above.

:bulletblue: <a href="http://synfull.deviantart.com">My profile</a> -> My profile.

Inserting images


The majority of methods including The Emote Legend, Thumb Codes and Plz Accounts are explained in the tutorial below. Whilst it focuses mainly on emotes, the latter 2 methods can be applied to normal images as well.



In addition, if you wish to link to an image off dA, or display dA images at in a large size, then you can use the following code:

:bulletblue: <img src="DirectLinkToImage" />

The ’DirectLinkToImage’ part should be replaced with the URL (web page address) of the image. However, you need to use the direct link to the image. The direct links will lead to a web page where the image is shown on a plain background. These links can be acquired by right clicking on the image and selecting 'copy image URL/Location/Address'. (Dependant on web browser).

:bulletblue: <img src="http://i971.photobucket.com/albums/ae198/syns-stuff/Avatars/63.png" />

Unfortunately the end result of this piece of code cannot be shown here as the code can’t be used in the artist comments or regular comments. However, you can see examples in this journal.

Displaying code


From time to time it is useful to display the actual code that you are typing and prevent deviantART from formatting. For example, each time I have explained how a code works above I have given a sample piece of code which normally would produce specified effects. This is much better than adding in spaces at it allows people to see exactly how something should look.

To stop a piece of code from formatting, simply place a complete set of HTML tags (e.g. <b></b>) somewhere inside the formatting. From a coding point of view, it breaks the code/tags up so dA does not register that one has actually been used. For example:

:bulletblue: <<u></u>b>Sample Text<<u></u>/b> -> <b>Sample Text</b>

:bulletblue: :<b></b>devsynfull: -> :devsynfull:

:bulletblue: :<b></b>iconsynfull: -> :iconsynfull:

Alternatively, in the cases where a colon is used (i.e. :dev: and :icon: links) you can replace one of the colons with the ASCII code for a colon &#58; When posted in a comment or journal it will appear as a colon, but won't cause the dev or icon links to be created.

:bulletblue: &#58;devsynfull: -> `Synfull
Add a Comment:
 
:icongasser55:
gasser55 Featured By Owner Jun 28, 2015  New Deviant Hobbyist General Artist
I have been looking for a no nonsense  Tutorial to explain all this stuff to me forever. Thank You so much
Reply
:iconsynfull:
Synfull Featured By Owner 3 days ago
No problem. Glad you found it useful :)
Reply
:icongasser55:
gasser55 Featured By Owner 1 day ago  New Deviant Hobbyist General Artist
XD
Reply
:icongriggs305:
Griggs305 Featured By Owner Jun 24, 2015  Student Filmographer
Where's the one where the text can get out of the comment box? 
Reply
:iconsynfull:
Synfull Featured By Owner Jun 25, 2015
I'm not sure I know what you mean
Reply
:icongriggs305:
Griggs305 Featured By Owner Jun 25, 2015  Student Filmographer
You've never seen people write comments and post it and the text just ascends out of the box?
Reply
:iconsynfull:
Synfull Featured By Owner Jun 25, 2015
Nope
Reply
:icongriggs305:
Griggs305 Featured By Owner Jun 25, 2015  Student Filmographer
k
Reply
:iconlaurenpunny:
Laurenpunny Featured By Owner Jun 22, 2015  Hobbyist General Artist
How do I insert links in images? I can't find it in the tutorial.
Reply
:iconsynfull:
Synfull Featured By Owner Jun 25, 2015
Links in images? You mean so when you click an image it takes you to another page?
Reply
:iconlaurenpunny:
Laurenpunny Featured By Owner Jun 25, 2015  Hobbyist General Artist
yeah, but I already found out how. ^^;
Reply
:iconbig-egg-roll:
Big-Egg-Roll Featured By Owner 4 days ago  Student Digital Artist
fff I have been dying to know how this comment is my only hope please tell me? ;w;
Reply
:iconlaurenpunny:
Laurenpunny Featured By Owner 3 days ago  Hobbyist General Artist
Reply
:iconbig-egg-roll:
Big-Egg-Roll Featured By Owner 3 days ago  Student Digital Artist
I owe magnificent thanks to thee, Hagrid

Even though thee has given me possession of simply the 'Browse Art' section
Reply
:iconskullzart:
SkullzArt Featured By Owner Edited Jun 20, 2015  Hobbyist General Artist
Y U NO LIKE ME CODE?
Reply
:iconskullzart:
SkullzArt Featured By Owner Jun 20, 2015  Hobbyist General Artist
I tried to use the striked text in a journal and it didnt work. can someone help me?
Reply
:iconaphnyo-japan:
APHNyo-Japan Featured By Owner Jun 17, 2015  Hobbyist General Artist
(this is very helpful, thank you)
Reply
:iconsynfull:
Synfull Featured By Owner Jun 20, 2015
Glad you found it useful :)
Reply
:iconaphnyo-japan:
APHNyo-Japan Featured By Owner Jun 20, 2015  Hobbyist General Artist
(yup)
Reply
:iconcherryp0p:
CherryP0p Featured By Owner Jun 15, 2015
Do you know how to do links in custom boxes that aren't http:// thisandthat
but are more like one word like Commissions or Help or things like that??
Reply
:iconsynfull:
Synfull Featured By Owner Jun 27, 2015
You mean change the text which is displayed?

If so,

<a href="Link to page">Text you want to display e.g. Help</a>

For example: Help!
Reply
:iconcherryp0p:
CherryP0p Featured By Owner Jun 27, 2015
Thanks!
Reply
:iconwild-adopt:
Wild-adopt Featured By Owner Jun 14, 2015
Nevermind, I got it :)
Reply
:iconwild-adopt:
Wild-adopt Featured By Owner Jun 14, 2015
When I use strike i strikes everything I've typed after the first time I did , it doesn't stop the second time I type it. How can I fix it?
Reply
:iconvirsuz:
virsuz Featured By Owner Jun 8, 2015  Professional Digital Artist
Thankyou very much
Reply
:iconsynfull:
Synfull Featured By Owner Jun 11, 2015
No problem :)
Reply
:iconbutterlatias:
ButterLatias Featured By Owner Edited May 29, 2015  Hobbyist General Artist
test

yey it works
Reply
:iconda-icebreaker:
Da-Icebreaker Featured By Owner May 29, 2015  Hobbyist General Artist
    lel    
Reply
:iconsynfull:
Synfull Featured By Owner May 30, 2015
:P
Reply
:iconda-icebreaker:
Da-Icebreaker Featured By Owner May 29, 2015  Hobbyist General Artist
thank you
Reply
:iconda-icebreaker:
Da-Icebreaker Featured By Owner May 29, 2015  Hobbyist General Artist
does this work?
Reply
:iconda-icebreaker:
Da-Icebreaker Featured By Owner May 29, 2015  Hobbyist General Artist
it does.
Reply
:iconsteave1425:
steave1425 Featured By Owner May 23, 2015  New Deviant Hobbyist General Artist
thank you so much. That is what I needed. Hug 
Reply
:iconsynfull:
Synfull Featured By Owner May 27, 2015
No problem :)
Reply
:iconcrownedfloaa:
CrownedFloaa Featured By Owner May 15, 2015
Is it working?
Reply
:iconsynfull:
Synfull Featured By Owner May 16, 2015
:nod:
Reply
:iconcrownedfloaa:
CrownedFloaa Featured By Owner May 16, 2015
Thanks for help ! :3
Reply
:iconcrownedfloaa:
CrownedFloaa Featured By Owner May 15, 2015
<small>Nice! ;D</small
Reply
:iconteamumbreon:
TeamUmbreon Featured By Owner May 14, 2015  Hobbyist Artist
Is there any way to color text?

Sorry I'm bombing you with questions! XD
Reply
:iconsynfull:
Synfull Featured By Owner May 14, 2015
Not in comments, artist comments etc. You can in a journal through CSS (but i think that is only available for premium members)
Reply
:iconteamumbreon:
TeamUmbreon Featured By Owner May 14, 2015  Hobbyist Artist
Oh, okay! Thanks anyway!^^
Reply
:iconjagveress:
Jagveress Featured By Owner May 7, 2015
Hi, not sure this is the best place but can anyone help me with a problem I am having with these codes on my journal? I am trying to make my commission journal abit easier to read, but everytime I try to use these style tags they (not sure how best to describe this) stop in random places and when I go back into the journal to fix it, the coding is duplicated?

So I will for example try to underline and bold the opening line and it will bold/underline the first word and not the rest, and when I go into edit this there are multiple bold and underline tags that I didn't even enter.. I have no idea why it is doing this and am a little confused x.x
Reply
:icondevilxkitten:
devilxkitten Featured By Owner May 6, 2015  Student General Artist
Hi! Uhm the '<*div align="center">' code doesn't work when I try to customize my profile, do u know why this happen?
Reply
:iconsynfull:
Synfull Featured By Owner May 14, 2015
What sort of box were you placing it in? I can see if it happens on my end too
Reply
:icon99squad:
99squad Featured By Owner May 16, 2015  New Deviant Hobbyist
devID
Reply
:iconsynfull:
Synfull Featured By Owner May 16, 2015
The Dev ID is a bit funny from what I hear. It should work if you use something else like a custom box.
Reply
Add a Comment:
 
×




Details

Submitted on
January 23, 2013
Image Size
6.7 KB
Resolution
120×120
Submitted with
Sta.sh
Link
Thumb
Embed

Stats

Views
47,622 (59 today)
Favourites
1,695 (who?)
Comments
623
×