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:
 
:iconblueinkblot:
blueinkblot Featured By Owner 17 hours ago
So great! Thanks!
Reply
:iconevviepb:
EvviePB Featured By Owner 19 hours ago  New member Hobbyist General Artist
Thankues~
Reply
:iconpandoraartists:
PandoraArtists Featured By Owner Edited 1 day ago  Hobbyist Digital Artist
insert text here
Reply
:iconwidyadk:
Widyadk Featured By Owner Edited 2 days ago  Student Artist

keep calm
and
zoom the page
Reply
:icon0endlessdreamer0:
0EndlessDreamer0 Featured By Owner Edited 2 days ago  Hobbyist General Artist
Was testing
Reply
:iconmilenapazfreitas:
MilenaPazFreitas Featured By Owner 3 days ago  Hobbyist General Artist
thankies ;w;
Reply
:iconlunarosej:
LunaRoseJ Featured By Owner 4 days ago  Student General Artist
thanks a lot!
Reply
:iconshatteringdesire:
ShatteringDesire Featured By Owner 4 days ago  Hobbyist Writer
:iconbrohugplz: omggg <33 thank you!!
Reply
:icontisheii:
tisheii Featured By Owner 4 days ago  New member Hobbyist General Artist
Testinng! ;v;
Reply
:iconrainbowdashrul:
RainbowDashrul Featured By Owner Edited May 18, 2015  Hobbyist Artist
this is so helpful, thank you!
Reply
:iconxxradicalradiantxx:
xxRadicalRadiantxx Featured By Owner Edited May 18, 2015  Student Interface Designer
This video is amazing! 
thanks. sorry just testing this out XD
Reply
:iconchensarts-3008:
ChensArts-3008 Featured By Owner Edited May 18, 2015  Student Digital Artist
 Example text,  insert text here 
Reply
:iconhimawari076:
Himawari076 Featured By Owner May 17, 2015  New member Hobbyist
This is very helpful!
Reply
:iconmudstarcissistic:
Mudstarcissistic Featured By Owner May 17, 2015  Hobbyist Digital Artist
Nice
Reply
:iconkorillakummaa:
Korillakummaa Featured By Owner May 17, 2015  New member Student Traditional Artist
Would any of you happen to know the link that sends a user back to their page? I've tried getting it myself but no luck I only get a link to my own page, and it isn't a link to my page it's a link to Korillakummaa. :iconyuinoplz:
Any help would be appreciated!!!
Reply
:iconchatterboxthepony:
ChatterboxThePony Featured By Owner May 16, 2015  Hobbyist Digital Artist
This will come in great handy!

THANKS!
Reply
:iconsarahhedgehog1:
sarahhedgehog1 Featured By Owner Edited May 16, 2015  Student General Artist
God..Imma have to study this ! xD
Reply
:iconkonatrix:
KonaTrix Featured By Owner May 18, 2015
i found you (☞ ͡° ͜ʖ ͡°)☞
Reply
:iconsarahhedgehog1:
sarahhedgehog1 Featured By Owner 6 days ago  Student General Artist
SHIT
Reply
:iconkonatrix:
KonaTrix Featured By Owner 6 days ago
ima getchu 
Reply
:iconsarahhedgehog1:
sarahhedgehog1 Featured By Owner 6 days ago  Student General Artist
Stalker
Reply
:iconkonatrix:
KonaTrix Featured By Owner 6 days ago
nwn
jkjk im sorry if im creeping you out LOL <3
Reply
:iconsarahhedgehog1:
sarahhedgehog1 Featured By Owner 6 days ago  Student General Artist
Naw,I was just kidding ! xDDD
Reply
:iconkonatrix:
KonaTrix Featured By Owner 6 days ago
 ok good xDD
Reply
(1 Reply)
:iconxxmr-linkxx:
xXMr-LinkXx Featured By Owner May 14, 2015
might be useful. (that's what i tag on tumblr when i see a post that might be useful) :3
Reply
:iconzuyoxovi4:
zuyoxovi4 Featured By Owner May 12, 2015
I want like to thank the moderators of deviantart to make it html-friendly. Now we can easily put link, image and video.

make dick bigger
Reply
:iconflandre495:
flandre495 Featured By Owner May 16, 2015  Professional General Artist
That link you posted is absolutely disrespectful.

On an unrelated note, meet the best person ever to have depression and an anxiety disorder.
Reply
:iconthatangelgotart:
ThatAngelGotArt Featured By Owner May 12, 2015  Hobbyist Traditional Artist
This is a lot of help for me. Thank you!
Reply
:iconmitsuboshi3stars:
Mitsuboshi3Stars Featured By Owner May 9, 2015  Student Digital Artist
texting
Reply
:icontwilightanddashie:
TwilightAndDashie Featured By Owner Edited May 9, 2015  Hobbyist Digital Artist
Testing
Reply
:iconsnklover55:
Snklover55 Featured By Owner May 8, 2015  Hobbyist Traditional Artist
Testing :3
welcome to
Reply
:iconaerite:
Aerite Featured By Owner May 7, 2015  New member Hobbyist Digital Artist
Thank you so much!
Reply
:iconidlethe:
Idlethe Featured By Owner May 5, 2015
yo u is a life saver
Reply
:iconkitheartanime:
KitHeartAnime Featured By Owner May 5, 2015  Hobbyist General Artist
thanks for this!
Reply
:iconcrazyedzia:
CrazyEdzia Featured By Owner May 3, 2015  Student Traditional Artist
Reply
:iconstillawannabe:
StillAWannabe Featured By Owner May 2, 2015
It helped alot! thank you Heart 
Reply
:iconlamberlight-star:
Lamberlight-Star Featured By Owner Apr 28, 2015  Student Digital Artist
Thx!!
Reply
:iconschizoidtomii:
SchizoidTomii Featured By Owner Apr 27, 2015  Hobbyist Traditional Artist
Thanks sweetheart <3
Reply
:iconaccaliathefox:
AccaliaTheFox Featured By Owner Apr 26, 2015  New member
IT HEEEEEELLPED
Reply
:iconnovclow:
Novclow Featured By Owner Apr 25, 2015  Hobbyist Digital Artist
thank you for making this journal >___<
Reply
:iconyellowbreeze2:
yellowbreeze2 Featured By Owner Apr 24, 2015  Student
tnx
Reply
:iconicedragon3001:
IceDragon3001 Featured By Owner Apr 20, 2015  New member Professional Digital Artist
:iconshaplz:
Reply
:iconfreexheart657:
FreeXheart657 Featured By Owner Apr 20, 2015  Student Artist
Now I can finally do it, thank you, my dear
Reply
:iconlol-extended:
LOL-EXTENDED Featured By Owner Apr 19, 2015  Hobbyist Digital Artist
or for bold italics and underline, just do ctrl+ b, ctrl+ I, and ctrl+ u
lol keyboard shortcuts
Reply
:iconscarlettedeath:
ScarletteDeath Featured By Owner Apr 20, 2015  Hobbyist Photographer
lol
Reply
:iconlol-extended:
LOL-EXTENDED Featured By Owner Apr 20, 2015  Hobbyist Digital Artist
Hi!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
:D

Helpfulness thanks. :D
testing testing 1 2 3
Reply
:iconjust-call-me-j:
Just-Call-Me-J Featured By Owner Apr 19, 2015  Hobbyist
How do you remove formatting? Like if I wanted to explain how to format without it happening.
Reply
:iconscarlettedeath:
ScarletteDeath Featured By Owner Apr 20, 2015  Hobbyist Photographer
the easiest way to avoid it you can include a simple code that's easy to remember such as <i></i> in between the code, for example: <<i></i>b>text</b>
just put it after the first less than sign you're using and maybe even in the closing tag, just to be sure :)
i suggest you write the whole code and then just paste it wherever you need it to avoid confusion (you should see what my code for what i've shown you looks like haha, it's a mess)
Reply
:iconjust-call-me-j:
Just-Call-Me-J Featured By Owner Apr 20, 2015  Hobbyist
:facepalm: I probably could have thought of that. Oh well. At least I know it now :)

And lol I'll bet it's quite the mess.
Reply
:iconarodotethefox:
ArodoteTheFox Featured By Owner Apr 19, 2015  Hobbyist General Artist
no 
Reply
Add a Comment:
 
×

:iconscarlettedeath: More from ScarletteDeath


Featured in Collections

Awesome News by namenotrequired

journals by missi-alicja

articles by nominee84




Details

Submitted on
May 13, 2011
Link
Thumb

Stats

Views
259,708 (23 today)
Favourites
9,325 (who?)
Comments
2,256
×