Shop Mobile More Submit  Join Login
×

:iconscarlettedeath: More from ScarletteDeath


Featured in Collections

Awesome News by namenotrequired

Journal News by NekoLiliah

journals by missi-alicja


More from DeviantArt



Details

Submitted on
May 13, 2011
Link
Thumb

Stats

Views
234,437 (93 today)
Favourites
8,569 (who?)
Comments
2,122
×

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:
 
:iconvani-cute:
vani-cute Featured By Owner 3 hours ago  Student Interface Designer
- thank you so much!
Reply
:iconloadsofrandomness:
LoadsOfRandomness Featured By Owner 5 days ago  New member Hobbyist
Thank you! Was very useful!
Reply
:iconthescorpion0081:
TheScorpion0081 Featured By Owner Edited 5 days ago  Hobbyist Writer
Reply
:iconsandynguyen07:
SandyNguyen07 Featured By Owner Edited Feb 20, 2015  Student Interface Designer
thank you so much
Reply
:iconsithmaster123:
Sithmaster123 Featured By Owner Feb 19, 2015  Student General Artist
How do you have those coloured bullets?
Reply
:iconhello-its-a-snail:
Hello-Its-A-Snail Featured By Owner Feb 20, 2015  Hobbyist Digital Artist
:bullet<insert color here>:

ex - : bullet blue :
Then enter it with no spaces:
:bulletblue:
Reply
:iconsithmaster123:
Sithmaster123 Featured By Owner Feb 20, 2015  Student General Artist
oh ok thanks alot
Reply
:iconhello-its-a-snail:
Hello-Its-A-Snail Featured By Owner 5 days ago  Hobbyist Digital Artist
No problem.
Reply
:iconkinimihucashi:
KinimiHucashi Featured By Owner Feb 18, 2015
Thank you :D
Reply
:iconlula-sasifrasc:
Lula-Sasifrasc Featured By Owner Feb 17, 2015  New member Hobbyist Artist
THX!
Reply
:iconliliaann:
liliaann Featured By Owner Feb 17, 2015  Hobbyist General Artist
This has been the best info ive found thank u
Reply
:iconxxwandering-fogxx:
XxWandering-FogxX Featured By Owner Feb 16, 2015  New member Hobbyist
testing here, don't mind me
Reply
:iconponyzilla:
ponyzilla Featured By Owner Edited Feb 16, 2015
testing! testing! is this thing on?!?
hey! it worked! XD
 :0
yay ^^
umm... this journal?
Reply
:iconwindwhirl:
Windwhirl Featured By Owner Feb 15, 2015  New member Student Traditional Artist
this is going to be useful, faved.
Reply
:icondracostarhome:
dracostarhome Featured By Owner Feb 15, 2015
another MINOR would be:
& nbsp ;
(minus spaces)

     Not that its REAAAALY needed, but you never know...  I'm not a BIG fan of how my journals alllll align to the left... but then again, I don't sit there and plug in the little space code.  Unnecessary, but still a viable code for those who find that particular oddence a little annoying... :3

    Then again they could just tap the space button a few times... but where's the knowledge in that?  ^3^  I don't even think anyone uses the tab button to put an indentation anymore...
Reply
:iconskylartmichiyo:
SkylartMichiyo Featured By Owner Feb 14, 2015  New member Hobbyist Traditional Artist
Practicing so I won't fail when I use it
Don't mind me
This journal
Reply
:iconpaladiu:
Paladiu Featured By Owner Feb 13, 2015  Student Traditional Artist
Test for code x'D
Reply
:iconbentheghost:
Bentheghost Featured By Owner Feb 11, 2015  Hobbyist Photographer
omg. the only one i knew was the one i'm writing with now,thank you!
Reply
:icontechie8:
Techie8 Featured By Owner Feb 6, 2015  Hobbyist Filmographer
Techie8
Reply
:iconkin14040war:
kin14040war Featured By Owner Feb 4, 2015  Student General Artist
thank!
It's useful so much :D (Big Grin) 
Reply
:iconsitierina96:
sitierina96 Featured By Owner Feb 3, 2015  Student Traditional Artist
testing xD
Reply
:icontirnhael:
Tirnhael Featured By Owner Feb 2, 2015  New member Student General Artist
test times 2
Reply
:icontirnhael:
Tirnhael Featured By Owner Feb 2, 2015  New member Student General Artist
test/small>
Reply
:icontheoneandonlybannana:
TheOneAndOnlyBannana Featured By Owner Edited Feb 1, 2015  Hobbyist Traditional Artist
i love you owo


i love you owo
Reply
:iconbdtite1919:
BDTite1919 Featured By Owner Jan 31, 2015  Student General Artist
Thanks.
Reply
:iconnyanno:
nyanno Featured By Owner Jan 30, 2015  Student
you got my blessings, good soul 
Reply
:iconjoe-royalblood:
JOE-ROYALBLOOD Featured By Owner Edited Jan 29, 2015  Student Digital Artist
I feel like you wielded me a godly weapon known as "Thee HTML" OuO... I getting chills from empowerment O~O.... thank you ^w^
Reply
:iconhobbyist-leonita:
Hobbyist-Leonita Featured By Owner Edited Jan 26, 2015  Hobbyist Digital Artist
For some reason the links i've put on my profile such as the commission one and the contact section in general just don't send to the desired page
I checked and they are closed with < /a>  but i can't click on them!
Reply
:iconmayabelakova:
MayaBelakova Featured By Owner Jan 25, 2015  Hobbyist Digital Artist
thanks

thecookieisalie
Reply
:icondaydreamotaku:
DaydreamOtaku Featured By Owner Jan 24, 2015  Student General Artist
:iconthanksplz:
Reply
:icondragoncat2000:
DragonCat2000 Featured By Owner Jan 23, 2015  Student General Artist
:iconshaplz:
Reply
:icondragoncat2000:
DragonCat2000 Featured By Owner Jan 23, 2015  Student General Artist
Why doesn't it work?
Reply
:iconscarlettedeath:
ScarletteDeath Featured By Owner Feb 4, 2015  Hobbyist Photographer
if you just copied and pasted it, it won't work because you also copied the html that's already included in the original post. you'll either have to type it yourself or paste it as plain text, i think. :D
Reply
:icondragoncat2000:
DragonCat2000 Featured By Owner Feb 4, 2015  Student General Artist
:iconshaplz: 

Thank you :)
Reply
:iconrabbitsazuki:
rabbitsazuki Featured By Owner Jan 19, 2015  New member Hobbyist Artist
O u O
Reply
:iconleyuen:
leyuen Featured By Owner Edited Jan 18, 2015
how do i make smaller text? I seen people make even smaller text
Reply
:iconxxsuperduckxx:
xXSuperDuckXx Featured By Owner Jan 18, 2015  Hobbyist General Artist
aaah!! This helped soo much!! Thank you!! ;^;
Reply
:iconloosloo:
LoosLoo Featured By Owner Jan 14, 2015  Student Digital Artist
Is it possible to divide the custom box into two sections?
Reply
:iconcherrymint72:
CherryMint72 Featured By Owner Jan 15, 2015  Student Digital Artist
with the <hr*>
remove *

it ads a line in between boxes
Reply
:iconloosloo:
LoosLoo Featured By Owner Jan 16, 2015  Student Digital Artist
thanks!
Reply
:iconcherrymint72:
CherryMint72 Featured By Owner Jan 16, 2015  Student Digital Artist
No ^^ problem 
Reply
:iconlovelyblush:
lovelyblush Featured By Owner Jan 14, 2015
This is so useful! Thanks :3
Reply
:iconmagicbirdie:
MagicBirdie Featured By Owner Jan 9, 2015  Hobbyist General Artist
Hum, do you know how to make a link that goes to the page of whoever clicks on it? I've seen them before, and I've always wanted to know how they're made :P

Thanks!
Reply
:iconscarlettedeath:
ScarletteDeath Featured By Owner Feb 4, 2015  Hobbyist Photographer
there was a code for that, but I can't remember what it was. ^^; 
Reply
:iconmagicbirdie:
MagicBirdie Featured By Owner Feb 4, 2015  Hobbyist General Artist
Alright, thanks anyway
Reply
:iconannacstansfield:
AnnaCStansfield Featured By Owner Jan 8, 2015  Professional General Artist
Hello! This is so useful, thank you! 
I do have one question though. I'm linking to some images offsite, and the images are a bit large. Is there a way I can make them smaller and still link to the page with the larger image? 
Reply
:iconscarlettedeath:
ScarletteDeath Featured By Owner Jan 9, 2015  Hobbyist Photographer
It's explained in the tutorial under "Links and photos" (using big thumbnails). :)
Reply
:iconannacstansfield:
AnnaCStansfield Featured By Owner Jan 9, 2015  Professional General Artist
Oh geeze. Silly me, I should have looked more closely. Thank you! 
Reply
:iconlindseystyles:
LindseyStyles Featured By Owner Jan 7, 2015  Student Digital Artist
<h6>Example text</h6>
Reply
:iconrandsanity:
Randsanity Featured By Owner Jan 6, 2015  Student Digital Artist
this is really helpful and I could fully understand hwo it works, i could add cool HTML on my literature
thank you :)
Reply
Add a Comment: