Deviation Actions

Synfull's avatar

Formatting text and images on dA (HTML + dA codes)

Published:
By
1K Comments
136K Views
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. ) 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.


    <b>Bold text</b> ➜ Bold Text
    <strong>Bold text</strong> ➜ Bold Text

    <u>Underlined text</u> ➜ Underlined Text

    <i>Italicized text</i> ➜ Italicized text
    <em>Italicized text</em> ➜ Italicized text

    <s>Striked text</s> ➜ Striked text
    <strike>Striked text</strike> ➜ Striked text




Text sizes


The following codes can be used to make the text larger. These codes can 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.


    <h1>Large (Header 1) Text</h1> ➜
   

Large (Header 1) Text



    <h2>Large (Header 2) Text</h2> ➜
   

Large (Header 2) Text



    <h3>Medium (Header 3) Text</h3> ➜
   

Medium (Header 3) Text




There are also a few options to make the text smaller. All change the text to the same size, but 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.


    <small>Small text</small> ➜ Small text
    <sup>Superscript text</sup> ➜ Superscript text
    <sub>Subscript text</sub> ➜ Subscript text


If you want even smaller text, you can add next multiple tags inside one of another. For example:


    <sub><sub><sub>This text is even smaller</sub></sub></sub> ➜ This text is even smaller




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 case the basic code is the same, and you simply swap the word show in bold to achieve the designed alignment.

<div align="Option">Text to be aligned

The for 'option's are:
       
  • left
  •    
  • center
  •    
  • right


For example:

Right aligned text

Center aligned text

Left aligned text


Notes:
       
  • 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.
  •    
  • 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

    <b><u>Bold and Underlined text</u></b> ➜ Bold and Underlined text

The two sets of formatting don't have to start at the same time. For example, you can have all the text in bold, and only the end text underlined.

    <b>Bold and <u>Underlined text</u></b> ➜ Bold and Underlined text

When using multiple tags you have to look out for the order you place the closing tags in. Closing an outer tag, will also end any open tags which are nested inside of it. This may close the tag prematurely.  For example, you can't have all of the text below underlined. By closing the bold tag, the underlined tage is also stopped.

<b><u>Sample</b> text</u> ➜ Sample text

To prevent this issue, you may need to re-order the tags. For example:

<u><b>Sample</b> text</u> ➜ Sample text




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: help.deviantart.com/104/



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.


    :devsynfull: ➜ Synfull

    :iconsynfull: ➜ :iconsynfull:

    <a href="http://www.facebook.com">Text link should be attached to ➜ 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.

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




Inserting images


There a a number of methods which can be used to insert images into comments, journals and other sections of dA. For information on using thumbcodes, the emote legend etc, please see this tutorial:

How do I use emotes on dA? by Synfull


However, one of the most useful html codes allows you to display any image. This could be one that is on dA, or hosted elsewhere (e.g. photobucket). Note: This cannot be used to insert pictures into artist comments, but will work in journals and on your profile page.


    <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). For example:

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

This code can’t actually be used within 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. ) 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:


    <<u></u>b>Sample Text<<u></u>/b> ➜ <b>Sample Text</b>

    :<b></b>devsynfull: ➜ :devsynfull:

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

&#58;devsynfull: ➜ :devsynfull:






Other Tutorials



Placing text + an image side-by-side on dA by Synfull    How do I use emotes on dA? by Synfull    Using custom emotes in comments (Stash Sidebar) by Synfull    
Image details
Image size
120x120px 6.65 KB
© 2013 - 2021 Synfull
Comments1251
Join the community to add your comment. Already a deviant? Log In
AleshaM's avatar

I think this needs updating a little.

Synfull's avatar

Yeah, it's now 8 years out of date and most of it probably doesn't work on Eclipse.

https://www.deviantart.com/synfull

Interesting, Sir, but nowhere is found what I need:

To display a picture (https://ibb.co/JxC1Hvb) in my text, as, when typing this out, the wholy bloody format is messed up, and impossible to get right.


How, please, do I do this?


Thank you.

Ben

Synfull's avatar

Where are you trying to post the image? As in, a comment, a deviation description, a journal?

In a description, Sir.


Now, it will auto-show (thus not a link which appears, but the picture) if i go premium.


Sadly, I cannot afford that ... :(


I will see how to fix this.

I am thinking of adding dots, or underscores between the parts where normally spaces are ...

Synfull's avatar

Sadly that's a paid feature and there's no way to do it otherwise

UNSC-spartan112's avatar

I want to upload an image in the description part of one of my submissions, but I don't know how to do it. When I paste a link, it remains as a link and leads to the source of the image. But when I do that in a journal, the link turns into an image (only if the link is from Deviantart). Can you please help me.

Synfull's avatar

I think that feature is restricted to people who pay for CORE membership

LordofFantasy666's avatar

How do i make a picture show at full size on my comment thing at my profile???

I have tried to upload from my computer by press the (+) button on the comment thing at my profile but the picture appears small.

I want use some picture only in comments at my profile,

but not submit a deviation.

I have see people upload pictures instead for use words to

thank me for watching and so on and their picture appears properly or in full size

the comment thing at my profile.

Synfull's avatar

Sorry, I'm not really sure now in Eclipse.

Whixy's avatar

Hello! I was wondering if the img src tag worked on deviations as well? And with gifs? I'm having trouble with it, it just shows the textual code and not the image :(


I've tried these three options but is still the same result:

<img src="https://ibb.co/VHn28M8" />

<img src="https://ibb.co/VHn28M8"/>

<img src="https://ibb.co/VHn28M8"></img>

Synfull's avatar

I'm not sure if you can use HTML code on Eclipse. However, if you can, the link to the image would need to be the direct link, such as https://i.ibb.co/4svPx4x/Jackalope-small-2.gif

Whixy's avatar

Oh, ok! It still didn't work, though, so I'm guessing Eclips is the problem. But thanks anyway!

wotawota's avatar
Yep, good old coding! I will miss it in new DA - it is not implemented in "My Bio"... (or do you know some trick?)
Synfull's avatar

I don't think dA supports HMTL anymore :(

X-Tibro's avatar

Thanks a lot for this tutorial, dear Karen. I found out, what I was looking for.

Hugs from Germany :sun: Jeanne

Synfull's avatar
Glad it was useful :)
LaurieLauriense's avatar
Thank you very much for this tutorial. 
Synfull's avatar
HorribleInsect's avatar

Is it true that, with new deviantart, its no longer possible to add images, stamps and the like to your bio anymore? I can't seem to find any way to get them to show up.

Synfull's avatar
I can't say I have explorer Eclipse much, but I know a lot of the formatting isn't going to work on that version of the site so it wouldn't surprise me
muppet--man's avatar
Thanks! I'll be sure to use this! :D
Join the community to add your comment. Already a deviant? Log In