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:
 
:icondusty-tracks:
dusty-tracks Featured By Owner Edited 1 day ago  Hobbyist General Artist
Using this info, thankyou so much!
Reply
:iconewemad420:
eWeMad420 Featured By Owner 4 days ago  Student Traditional Artist
hi how can i add videos in group page , not as link ^^;
Reply
:iconthesketchling:
TheSketchling Featured By Owner Edited 6 days ago  Hobbyist Digital Artist
This was so helpful, thank youuuuuuuuuu 
Reply
:iconlaughingcrusader-09:
LaughingCrusader-09 Featured By Owner Apr 21, 2016  New Deviant
You are a God
Reply
:iconsilvershadowmirror:
SilverShadowMirror Featured By Owner Apr 19, 2016  Hobbyist Artisan Crafter
Thank you so much for this!! Although I have a slight problem... I don't know why but pictures aren't working. Could you help me out please? 
Reply
:iconsimmeh:
Simmeh Featured By Owner Apr 18, 2016
Thanks! Nick Wilde - Icon 
Reply
:iconjeffbrek51:
jeffbrek51 Featured By Owner Apr 16, 2016  Student Filmographer
I took snapshots
Reply
:iconsnowblind-monubone:
Snowblind-Monubone Featured By Owner Apr 16, 2016  Hobbyist Digital Artist
I have a problem with the "including links to pages". The link sends me to Deviantart instead of the actual deviation, and I am typing everything correctly.
I don't know if the issue is because the URL turns into a thumb automatically, and I don't want it to do that. I don't know how to change it either, dA randomly changed it. xD
Can someone help? ;u; Would be very appreciated!
Reply
:iconscarlettedeath:
ScarletteDeath Featured By Owner Apr 17, 2016  Hobbyist Photographer
if you're using firefox, you can try pasting it as plain text. if you're using chrome, paste and match style. if you're using some other browser, good luck. :D try copying the link of the deviation from the "Details/Stats" on the right of each deviation
if this doesn't help, let me know.
Reply
:iconsnowblind-monubone:
Snowblind-Monubone Featured By Owner Edited Apr 17, 2016  Hobbyist Digital Artist
I'm using chrome. haha ;w;
If I only have to match the style and paste the URL link to the deviation (which isn't a URL, it's a thumb haha Deviantart turns the URL into a thumb), then I have no idea what the problem is. That's exactly what I'm doing, but it fails everytime no matter what deviation I use. :c

And I just found out that it works in the comments, but not in the deviation description or the journal entries.
Reply
:iconwoolfxd:
WOOLFXD Featured By Owner Apr 11, 2016  Hobbyist Digital Artist
Thank you so much! That was really helpful.
Reply
:iconsperkel-derg:
Sperkel-Derg Featured By Owner Apr 10, 2016  Hobbyist General Artist
hello this is a test
Reply
:iconcandice1607:
candice1607 Featured By Owner Apr 10, 2016  Hobbyist Digital Artist
 Thank you very much for the tutorial its awesome 
Reply
:iconskyblue2013:
SkyBlue2013 Featured By Owner Apr 9, 2016  Hobbyist General Artist
  I'm trying to put a link in my custom box on my profile to my commission prices. I just want the words Commission Prices to be clickable and take the person to the link but it isn't working...
Reply
:iconjmlv04:
JMLV04 Featured By Owner Apr 7, 2016  Student Digital Artist
Omg!! Thank you!! I have been wondering how for 2 months now! Thank youuuu!! It really helped!!
Reply
:iconscarlettedeath:
ScarletteDeath Featured By Owner Apr 7, 2016  Hobbyist Photographer
:aww: You're welcome!
Reply
:iconjmlv04:
JMLV04 Featured By Owner Apr 8, 2016  Student Digital Artist
^_^
Reply
:iconsketchessence:
SketchEssence Featured By Owner Apr 7, 2016  Hobbyist General Artist
It helped, :heart:
Reply
:iconmlp-starblaze:
MLP-Starblaze Featured By Owner Apr 6, 2016  New Deviant Hobbyist Digital Artist
Testing XD
<img src="orig10.deviantart.net/3d6e/f/2…">
Reply
:iconmlp-starblaze:
MLP-Starblaze Featured By Owner Apr 6, 2016  New Deviant Hobbyist Digital Artist
Nope didn't work
Reply
:iconmlp-starblaze:
MLP-Starblaze Featured By Owner Apr 6, 2016  New Deviant Hobbyist Digital Artist
Reply
:iconasjjohnson:
AsjJohnson Featured By Owner Apr 7, 2016  Hobbyist General Artist
MidnaSkies's OC Starblaze - Fanart by Oddiology

<da:thumb id="599398071" format="200H">
(or, just click 'Add Media' and find it there)
Reply
:iconashleyledork:
AshleyLeDork Featured By Owner Edited Apr 5, 2016
Awesome
Reply
:icont0-ky0:
T0-KY0 Featured By Owner Apr 4, 2016  New Deviant
I can't find some codes on here, there is no small vertical line like the hr ? 
and can non-premium align texts in like a column? we can do it with pictures (i dont know how though haha!)
so can we do it with text instead?
Reply
:iconscarlettedeath:
ScarletteDeath Featured By Owner Apr 6, 2016  Hobbyist Photographer
hr worked back in 2011 when i posted this :D later they removed the option to customize a lot of stuff because hey, how would they make money out of these 2 plus features included in premium membership if they were free. 
sorry i can't really help you ^^;
Reply
:icont0-ky0:
T0-KY0 Featured By Owner Apr 9, 2016  New Deviant
hr works fine : ) I was just wondering if there was one like that, but line going up and down instead. 
ahhh, I see ~ and OK! thank you anyway (´・ω・)b
Reply
:iconmiss-delusional:
miss-delusional Featured By Owner Edited Apr 4, 2016  New Deviant
Reply
:iconchoaskawaiigirl:
ChoasKawaiiGirl Featured By Owner Apr 3, 2016  Hobbyist General Artist
acronym title=(link)><a href=choaskawaiigirl.deviantart.com…>(link)</acronym>

Test???
Reply
:iconlightningclawedsky:
LightningClawedSky Featured By Owner Mar 31, 2016  Hobbyist General Artist
:thumb600198044:

Test?
Reply
:iconfallenchronicle:
fallenChronicle Featured By Owner Mar 30, 2016  New Deviant
I know how to embed an image, but how do you align the image on one side of the text while the text goes to the side??

Example- joking-jester.deviantart.com/
Reply
:iconsssahuo:
Sssahuo Featured By Owner Mar 30, 2016  Hobbyist Digital Artist
:iconshaplz:
Reply
:iconlienniexo:
lienniexo Featured By Owner Mar 28, 2016  Hobbyist Artist
Reply
:iconbrownpen0:
BrownPen0 Featured By Owner Mar 28, 2016  New Deviant Hobbyist
But how can I copy a picture from my computer? :(
Reply
:iconrascalthefox:
RascalTheFox Featured By Owner Edited Mar 26, 2016  Student Digital Artist








Visit My Page!



By Clicking Here



Reply
:iconkinqlame:
kinqlame Featured By Owner Edited Mar 26, 2016  Hobbyist Digital Artist
is there a way to make the linked black instead of blue? i wont mind if the arrow ends up next to it
nevermind i got it lmao
Reply
:icontaali-s:
Taali-s Featured By Owner Mar 31, 2016  Student General Artist
hey 

just curious how u changed the link color?
Reply
:iconkinqlame:
kinqlame Featured By Owner Edited Mar 31, 2016  Hobbyist Digital Artist
instead of copying and pasting it from the original text in the journal, i copied and pasted it from a text that i had already edited (sorry if this doesn't make sense, im not too good at explaining things). it'll come out black with the little arrow next to it, but i just really didn't like the blue. also im not sure if it'll work for you, but it worked out for me
Reply
:icontaali-s:
Taali-s Featured By Owner Apr 1, 2016  Student General Artist
OHHHH okay thanks sm`
Reply
:iconkinqlame:
kinqlame Featured By Owner Apr 1, 2016  Hobbyist Digital Artist
np!
Reply
:iconmountanddewme:
MountAndDewMe Featured By Owner Mar 23, 2016  Hobbyist Digital Artist
how can i embed a video
Reply
:iconpicancia:
Picancia Featured By Owner Mar 30, 2016  Hobbyist Digital Artist
Mini Youtube Player embeddable code by CypherVisor  This journal should help you ^^
Reply
:iconmountanddewme:
MountAndDewMe Featured By Owner Apr 9, 2016  Hobbyist Digital Artist
thanks
Reply
Add a Comment:
 
×

:iconscarlettedeath: More from ScarletteDeath



Featured in Collections

Good to read by DianaGrigore

Awesome News by namenotrequired

journals by missi-alicja




Details

Submitted on
May 13, 2011
Link
Thumb

Stats

Views
372,424 (159 today)
Favourites
12,133 (who?)
Comments
2,751
×