Shop Mobile More Submit  Join Login

Hello!



Hello and welcome to my little html tutorial. I've been working with html codes for a couple of years and I'm going to teach you what I know about using some basic html on deviantART. This won't make you a html expert or something and I'm not an expert myself but it will give just enough knowledge to make your journals, comments, news articles and other neat and lovely looking. :)

deviantART actually has FAQs about html but I still wanted to do this because they look a bit unorganized, in my opinion. Also, why would you want to look for those FAQs when you can just open this news article where you have everything in one place? :dummy:

You may already know some of these, but I hope you'll find at least something helpful in this news article.

Some basic html



:bulletorange:Bold text: <b>insert text here</b>

:pointr: Result: Example text
:pointr:This html code will work in: journal entries, group blogs, comments, artist's comments, news articles, notes and probably everywhere.

:bulletyellow:Italic text: <i>insert text here</i>

:pointr: Result: Example text
:pointr:This html code will work in: journal entries, group blogs, comments, artist's comments, news articles, notes and probably everywhere.

:bulletorange:Underlined text: <u>insert text here</u>

:pointr: Result: Example text
:pointr:This html code will work in: journal entries, group blogs, comments, artist's comments, news articles, notes and probably everywhere.

:bulletyellow:Strike: <strike>insert text here</strike>

:pointr: Result: Example text
:pointr:This html code will work in: journal entries, group blogs, comments, artist's comments, news articles, notes and probably everywhere.

:bulletorange:Subscript: <sub>insert text here</sub>

:pointr: Result: Example text
:pointr:This html code will work in: journal entries, group blogs, comments, artist's comments, news articles, notes and probably everywhere.

:bulletyellow:Superscript: <sup>insert text here</sup>

:pointr: Result: Example text
:pointr:This html code will work in: journal entries, group blogs, comments, artist's comments, news articles, notes and probably everywhere.

:pointr:Also, it's good to know: You can use <sup> and <sub> as many times you want to make your text even smaller. <sub><sub><sub><sub>insert text here</sub></sub></sub></sub>
:pointr:Result: Tiny text

:bulletorange:Small text: <small>insert text here</small>

:pointr:This html code will work in: journal entries, group blogs, comments, artist's comments and notes.

:bulletyellow:Blockquote: <blockquote>insert text here</blockquote>

:pointr: Result:
Example text

:pointr:This html code will work in: journal entries, group blogs, comments, artist's comments, news articles, notes and probably everywhere.

:bulletorange:Centering text: <div align="center">insert text here


:pointr:Result:
Example text

:pointr:This html code will work in: journal entries, group blogs and news articles. It won't work in notes, comments and artist's comments. It used to work in artist's comments, but for some reason, it doesn't any more.
:pointr:Also, it's good to know: you can replace "center" with "right" ("left" would be useless since it's default.)

:pointr:Result:
Example text

:pointr:This html code will work in: journal entries, group blogs, comments, artist's comments, news articles.

:bulletyellow:Horizontal line: <hr>

:pointr:Result:

:pointr:This html code will work in: journal entries, group blogs, comments, artist's comments, news articles and notes.

Font size - headings



:bulletorange:Headings:Since you can't actually change the font size with normal font size html codes, you'll need to use headings. There are 6 headings types:
<h1>Example text</h1>
<h2>Example text</h2>
<h3>Example text</h3>
<h4>Example text</h4>
<h5>Example text</h5>
<h6>Example text</h6>

:pointr:Result:

Example text


Example text


Example text


Example text


Example text

Example text



:new::pointr: This code will work in (premium) journals, news articles, artist's comments and special boxes on user's profile. It will not work in comments.


:bulletyellow:Code: Used for defining computer code, but deviants just use it to change their font. <code>Insert text here</code>

:pointr:Result: Example text
:pointr:This html code will work pretty much everywhere, I think. I don't use it that often so I'm not sure, but considering the popularity of it, I think it works everywhere.




Links and photos



:bulletorange:Including links to pages: <a href="insert url here">text that will be clickable</a>

:pointr: Result: Here's a link to deviantART
:pointr:This html code will work in: journal entries, group blogs, comments, artist's comments, news articles, but will not work in group notes.

:bulletyellow:Including photos: <a href="Insert link to the page where the photo is originally coming from"><img src="Insert link to photo"></a>
:pointr:This html code will work in: Premium journal entries, Super group blogs, custom boxes.

:bulletorange:Using big thumbs: <a href="Insert link address here"><img src="Insert Image URL here" width="Insert the desired width of the photo"></a>
:pointr:This html code will work in: journal entries (for premium members only), Super group blogs and custom boxes.

:pointr:To copy a link address, you need to go to the page of the photo you want to link and copy the address in the address bar of your browser. To copy image URL, you need to right click on the photo itself and select Copy image location if you use Firefox or something that implies that you're copying the location of the photo if you're using other browsers. The maximum size of a dA thumbnail is 150×150 which is rather small. Using 300 or 400 or even 500 pixels won't ruin your profile page if you're planning to use this in a journal, but bigger sizes will. The photos might even be cropped, depending on the size of your monitor and the size of the thumb.

:bulletyellow:Description pop-up:You can also include little pop-up text to your links by using this code:
<acronym title="popup text"><a href="insert url here">text that will be clickable</a></acronym>

:pointr:Result: deviantART




Combining codes



:bulletorange:You can also combine as many codes as you want. Let's say that the letter A is a start code and /A is the end code, and B is a different code that ends with /B, the same thing goes for C - /C and D - /D. The correct closing order goes like this: A B C D insert text here /D/C/B/A.
For example; here's a subscripted text that's bold, underlined, strike, italic, centerd and contains a link:
This won't be easy to read, but you get the point. Here's a link to dA again.


My code for this was:
<div align="center"><sub><b><i><u><strike>This won't be easy to read, but you get the point. <a href="www.deviantart.com/">Here's a link to dA again.</a></strike></u></i></b></sub></div>

I just wanted to show you all how ridiculously long and confusing this looks but it's really, really easy so don't be afraid of it. :nod:




Special characters



Here is the link to the special characters that you will probably use rarely. On the other hand, if you're ever planing to create a plz account or if you need to demonstrate html, these are the most common ones that you'll use:

:bulletyellow:Less-than sign: &lt;
:pointr:Result: <

:bulletorange:More-than sign: &gt;
:pointr:Result: >

:bulletyellow:Colon &#58;
:pointr:Result: :

Thumbs and username and icon tags



This isn't really html, but you'd be surprised how many people doesn't know how this works.

:bulletorange:Usernames: :devusername:, e.g. :devshaplz:
:pointr:Result: Shaplz

:bulletyellow:User icons: :iconusername: (that's how the plz accounts work), e.g. :iconshaplz:
:pointr:Result: :iconshaplz:

:pointr:You can also use these for linking groups.

:bulletorange:Thumbnails:Including thumbnails is very easy because all you need to do is copy the code located on the right side of each deviation. It's under "Share" part of the deviations, below groups and above "Details" and "Statistics".
There is a "Thumb" box with the code that usually looks something like this :thumb208669995:
:pointr:Result: Example by ScarletteDeath

Remember


:bulletyellow: It's very important to close your tags with "</>" because the rest of the text will have the same effect like the one you wanted to point out.

:bulletorange: Also, always hit "preview" button before you post a comment/journal entry/etc. no matter how sure you are you got it right.

:bulletyellow: If a deviant gets carried away with <sub> or <sup> tags, remember to


keep calm
and
zoom the page



:bulletorange: Remember that nobody knows all the tags by heart so don't be afraid to fave this article and visit whenever you need. ;)

:bulletyellow: If you ever need some help with html, remember that Google is your friend.

:bulletorange: If you know some other html codes that can be used on dA, feel free to share them. I never said I knew everything about this, I'm just here to share my knowledge. :aww:

I hope this helped! :wave:

Add a Comment:
 
:iconaviles101:
Aviles101 Featured By Owner 12 hours ago  New Deviant Student General Artist
Cool! I didn't know dA accepted HTML coding! o0o)/
Wow, this site can confuse one at first... XD

Mwehehehehe
Reply
:iconohrian:
ohrian Featured By Owner Edited 1 day ago  Hobbyist Digital Artist
so do i just type the code in the comment or in a note?

<h1>example</h1>

______________

why does it not work?
Reply
:icongrooviedalton:
GroovieDalton Featured By Owner 1 day ago
Because the <h1>/<h2/<h3> etc. doesn't work on comments.
Reply
:iconohrian:
ohrian Featured By Owner 9 hours ago  Hobbyist Digital Artist
i like to put a picture in a note, how can you do it?
:?
Reply
:icongrooviedalton:
GroovieDalton Featured By Owner 7 hours ago
A picture in a note? You can use the Thumb Code. You can also use the "Preview" button to see if it works.
Reply
:iconohrian:
ohrian Featured By Owner 1 day ago  Hobbyist Digital Artist
so do i just tyme this code in a comment for example?

<h1>Example text</h1>
Reply
:icongreenbumblebee:
GreenBumbleBee Featured By Owner 1 day ago  Hobbyist Traditional Artist
I'm so sad the aligning doesn't work anymore v_v
Reply
:iconteenagetrashx:
teenagetrashx Featured By Owner Edited 3 days ago  Student Interface Designer
Nothing, found it out! ;v;
Reply
:iconswanji:
Swanji Featured By Owner 3 days ago  New Deviant
Thanks!:happybounce:   I was wondering how everyone did that. Hahaha
Reply
:iconwilliam-gfx:
William-GFX Featured By Owner 3 days ago  Hobbyist Digital Artist
is their any html for those ?
Rainbow Dot Bullet - F2U! Turquoise Bullet - F2U! Rose Red Bullet - F2U! Yellow-Green Bullet - F2U! Sea Green Bullet - F2U! Light Purple Bullet - F2U! Dark Blue Bullet - F2U! 
Reply
:iconscarlettedeath:
ScarletteDeath Featured By Owner 2 days ago  Hobbyist Photographer
They're part of the dA's emoticon system. To use them just click on Add Media button, search for "bullet" and use the one you want, or just type in the comment area :bulletred: or another color you want. They have green, red, blue, purple, black, white, yellow, orange and pink.
Reply
:iconwilliam-gfx:
William-GFX Featured By Owner 2 days ago  Hobbyist Digital Artist
Ok thx!
Reply
:icontheflawedone:
TheFlawedOne Featured By Owner 4 days ago  Hobbyist Writer
I've been trying to figure this out!  Thanks.
Reply
:iconinsyncinsanity:
inSYNCinSANITY Featured By Owner Edited Aug 25, 2015  Hobbyist General Artist
How do you do the coloured dot points
Nevermind
Reply
:icon1999317:
1999317 Featured By Owner Aug 24, 2015
This was a major help, thank you so much for putting all this information together in such a clear and concise tutorial.
Reply
:iconscarlettedeath:
ScarletteDeath Featured By Owner Aug 25, 2015  Hobbyist Photographer
:hug:
Reply
:iconblu-milk:
blu-milk Featured By Owner Aug 24, 2015  New Deviant Hobbyist Traditional Artist
Just testing but this is hella great thank you for making it
Reply
:iconmademoisellemadoka:
MademoiselleMadoka Featured By Owner Aug 23, 2015
test
Reply
:iconryuugirl01:
RyuuGirl01 Featured By Owner Aug 22, 2015  Hobbyist Traditional Artist
You are god right now.Our God is an Awesome God 
Reply
:iconsomeordinaryartist:
SomeOrdinaryArtist Featured By Owner Aug 21, 2015  Hobbyist General Artist
lineeeee


Reply
:iconask-aph-mexico:
ask-APH-Mexico Featured By Owner Aug 19, 2015
outofmask; Do you have the code to align text next to a picture or put it at the same level?
Reply
:iconchocobikki:
Chocobikki Featured By Owner Aug 19, 2015  New Deviant Hobbyist Traditional Artist
Thanks! Time to use some useless strikes!
Reply
:iconvizzixi:
Vizzixi Featured By Owner Aug 18, 2015  Student General Artist
I still dont understand how to use thumbs. :(
Reply
:iconscarlettedeath:
ScarletteDeath Featured By Owner Aug 19, 2015  Hobbyist Photographer
copy and paste them. they won't work everywhere, tho.
Reply
:iconmikichihiro:
mikichihiro Featured By Owner Aug 16, 2015  Hobbyist General Artist
Thank You Hearts Sign Thank You Hearts Sign Thank You Hearts Sign Thank You Hearts Sign 
Reply
:icongarry-guertena:
Garry-Guertena Featured By Owner Aug 15, 2015  Student Digital Artist
Thank you so much for this info~ >3<
Reply
:iconsickenedd:
Sickenedd Featured By Owner Edited Aug 13, 2015  Hobbyist General Artist
test

how do i not have the little square with the arrow in it after the text?
Reply
:iconscarlettedeath:
ScarletteDeath Featured By Owner Aug 19, 2015  Hobbyist Photographer
by using a code for including a link from this tutorial
Reply
:iconsickenedd:
Sickenedd Featured By Owner Aug 19, 2015  Hobbyist General Artist
oh ok
Reply
:iconwildciaw:
WildcIaw Featured By Owner Aug 12, 2015  Hobbyist General Artist
This was really helpful thanks!
Reply
:iconpenbloke:
Penbloke Featured By Owner Aug 12, 2015  Hobbyist Digital Artist
w00t
Reply
:iconthefiremousebogiwis:
TheFireMouseBogiwis Featured By Owner Aug 9, 2015
Thanks! o/
Reply
:icongeneralgibby:
GeneralGibby Featured By Owner Aug 8, 2015  Hobbyist Digital Artist
Do you now how to prevent hyperlinking?
Reply
:iconscarlettedeath:
ScarletteDeath Featured By Owner Aug 19, 2015  Hobbyist Photographer
use the code for including links from this tutorial :)
Reply
:iconmaxtron9000:
Maxtron9000 Featured By Owner Aug 8, 2015  Hobbyist Digital Artist
Super helpful :)
Reply
:iconsupersoidiers:
SuperSoIdiers Featured By Owner Aug 7, 2015  New Deviant
I hope it worked
Reply
:iconravenseclipse22305:
RavensEclipse22305 Featured By Owner Aug 7, 2015  Student Digital Artist
I dont get it.
Reply
:iconleafmeadow:
LeafMeadow Featured By Owner Aug 3, 2015  Hobbyist General Artist
I tried doing the <h1></h1> thing but it doesn't work!!
Reply
:iconscarlettedeath:
ScarletteDeath Featured By Owner Aug 19, 2015  Hobbyist Photographer
nope, only in journals and forums, i think
Reply
:iconpantherpl:
PantherPL Featured By Owner Aug 6, 2015  Hobbyist General Artist
It don't work in comments. x)
Reply
:iconleafmeadow:
LeafMeadow Featured By Owner Aug 6, 2015  Hobbyist General Artist
xD lol I already worked it out, but thanks! cx
Reply
:iconpantherpl:
PantherPL Featured By Owner Aug 6, 2015  Hobbyist General Artist
:lol:
Reply
:iconleafmeadow:
LeafMeadow Featured By Owner Aug 6, 2015  Hobbyist General Artist
:XD:
Reply
:iconmidorimushig:
midorimushiG Featured By Owner Aug 1, 2015
Thank you.
It's so useful!
Reply
:iconilittlekawaii:
iLittleKawaii Featured By Owner Edited Jul 30, 2015  New Deviant Hobbyist Writer
Thanks.
Reply
:iconjuliajm15:
juliajm15 Featured By Owner Jul 29, 2015  Student General Artist
thank you!
Reply
:iconemberthekat:
EmberTheKat Featured By Owner Jul 29, 2015  Hobbyist Digital Artist
thank you miss or sir whatever
Reply
:iconobsessionfodder:
obsessionfodder Featured By Owner Jul 29, 2015  Hobbyist Traditional Artist
thumbnail didnt seem to work for me. help?
Reply
:iconshashaatirupati:
shashaatirupati Featured By Owner Jul 29, 2015  New Deviant

Brilliant post. Very useful. Thanks a lot.

Shashaa

HTML5 Training in T Nagar
Reply
Add a Comment:
 
×

:iconscarlettedeath: More from ScarletteDeath


Featured in Collections

Awesome News by namenotrequired

journals by missi-alicja

News + Journals + Anouncements by JZLobo


More from DeviantArt



Details

Submitted on
May 13, 2011
Link
Thumb

Stats

Views
294,089 (178 today)
Favourites
10,325 (who?)
Comments
2,420
×