Shop Forum 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:
 
:iconbunnysjam200:
Bunnysjam200 Featured By Owner 2 days ago  Hobbyist General Artist
Thanks! I will be using some of these!
Reply
:iconoleolah:
oleolah Featured By Owner 6 days ago  Professional Digital Artist
Thank you. It's been a long time I used this codes.
Reply
:iconpicofthenight:
picofthenight Featured By Owner Oct 26, 2018
Here’s a question - DA won’t let you include an apostrophe in the title of a deviation (e.g., Sophie’s Revenge). I’ve tried every alternative entity I can find but nothing has worked. Any ideas?
Reply
:iconantiwhite:
antiwhite Featured By Owner Nov 1, 2018  Hobbyist Digital Artist
Have you tried ' ?
Reply
:iconpicofthenight:
picofthenight Featured By Owner Nov 2, 2018
How did you generate that character?
Reply
:iconantiwhite:
antiwhite Featured By Owner Nov 2, 2018  Hobbyist Digital Artist
It's on my keyboard, it's just an apostrophe
Reply
:iconpicofthenight:
picofthenight Featured By Owner Nov 3, 2018
On my keyboard (iPad) it comes out like this ‘ which I guess is a ‘smart’ apostrophe. I don’t know how to get a ‘simple’ apostrophe.
Reply
:iconantiwhite:
antiwhite Featured By Owner Nov 3, 2018  Hobbyist Digital Artist
Huh, that's weird. I'm guessing it's because I'm European and has a different keyboard. I'd suggest making it a keyboard shortcut or adding it to suggested words, or perhaps having an extra keyboard (I'd say Eng UK) and just switching over to it temporarily when you need to use the '
Reply
:iconcinderfaire:
CinderFaire Featured By Owner Oct 24, 2018  Hobbyist Digital Artist
Aaah! Thank you so much!!!
Reply
:iconmariiasv:
mariiasv Featured By Owner Oct 23, 2018  New Deviant

Thank you!

Reply
:iconranranartish:
RanRanArtish Featured By Owner Oct 21, 2018  New Deviant Hobbyist Traditional Artist
thank
Reply
:iconpara-keat:
Para-Keat Featured By Owner Oct 7, 2018  Hobbyist General Artist
Thank you this is really helpful!
Reply
:iconkathysia:
Kathysia Featured By Owner Oct 6, 2018  New Deviant Hobbyist
Thank You! 
Reply
:iconsum18mymuffin:
sum18mymuffin Featured By Owner Oct 4, 2018  Hobbyist General Artist
It took me a while, but I finally got it! Thank you!
Reply
:iconxkaymeleon:
xKaymeleon Featured By Owner Sep 22, 2018  Hobbyist Artist
ee i have a question regarding the headings

when i made a journal skin at simplydevio.us and i tried <h1> sjsjjs </h1> the text only came out as a different font and didn’t bolden and become as big. it’s happened to me other times too and i’m wondering why this happens ;o;
Reply
:iconfrenchsiilk:
frenchsiilk Featured By Owner Oct 1, 2018  New Deviant
i dont have a lot of knowledge on html my guess is that its the journal skin itself
Reply
:iconyoku-bo:
Yoku-bo Featured By Owner Edited Sep 3, 2018
testttttttttttt
Reply
:iconpheonix-kid980:
Pheonix-kid980 Featured By Owner Aug 30, 2018
Thank you so much this was very helpful!
Reply
:iconeshisnu:
EshiSnu Featured By Owner Aug 28, 2018  Professional General Artist
I use HTML and I always forget the tags. You have no idea how much this helps. thanks you so much for sharing! 
Reply
:iconpeachyxs:
Peachyxs Featured By Owner Aug 26, 2018  Hobbyist Interface Designer
how to put a link in a image, like the example of thumb?
Reply
:iconkiel-chan:
Kiel-chan Featured By Owner Aug 25, 2018  Hobbyist Digital Artist
:iconkiel-chan:
Reply
:iconkiel-chan:
Kiel-chan Featured By Owner Aug 25, 2018  Hobbyist Digital Artist
<:iconshaplz:>
Reply
:iconkiel-chan:
Kiel-chan Featured By Owner Aug 25, 2018  Hobbyist Digital Artist
:devKiel-chan:
Reply
:iconedahel:
Edahel Featured By Owner Aug 23, 2018  Hobbyist Digital Artist
Reply
:iconedahel:
Edahel Featured By Owner Edited Aug 23, 2018  Hobbyist Digital Artist
For some reason it works here, but when I try doing it on my art's description to link to other works, it just shows the the whole html thing!

Here's a link to the page that has the problem, if someone could see what's the problem: MoonClan - TulipPetal

And I just tested it on another artwork of mine, it works! It looks like the problem comes from this page specifically. I checked, the code is supposed to be ok.

I finally solved the problem:

I had to type the code myself! At first I copied/pasted it, and it didn't work, but by typing it manually it's ok. 
Reply
:iconfanaticfandom:
FanaticFandom Featured By Owner Sep 11, 2018  Professional Artisan Crafter
THANK YOU SO MUCH - I was having the same issue and could not figure out what I was doing wrong!
Reply
:iconturquoiis:
turquoiis Featured By Owner Aug 19, 2018  Hobbyist Digital Artist
test, sorry for the test spam
Reply
:iconturquoiis:
turquoiis Featured By Owner Aug 19, 2018  Hobbyist Digital Artist
test
Reply
:iconturquoiis:
turquoiis Featured By Owner Edited Aug 19, 2018  Hobbyist Digital Artist
test test
Reply
:iconturquoiis:
turquoiis Featured By Owner Aug 19, 2018  Hobbyist Digital Artist
Can I change the color of the horizontal line, or can it only be gray?
Reply
:iconwhitecrystal1st:
WhiteCrystal1st Featured By Owner Aug 3, 2018  Hobbyist Digital Artist
:iconwhitecrystal1st: woah xD
Reply
:iconlu-silveira:
Lu-Silveira Featured By Owner Jul 30, 2018  Hobbyist Writer
Alright, just a quick something. How do I stop aligning to the center? Like if I just want part of the text aligned to the center.
Reply
:iconidy-llic:
idy-llic Featured By Owner Aug 1, 2018  Hobbyist General Artist
<Idiv align="IcenterI"> and then your text here and then </Idiv>

get rid of the capital "I"s and your set!
Reply
:iconlu-silveira:
Lu-Silveira Featured By Owner Aug 1, 2018  Hobbyist Writer
Thanks!
Reply
:iconidy-llic:
idy-llic Featured By Owner Aug 1, 2018  Hobbyist General Artist
of course! glad i could help
Reply
:iconlu-silveira:
Lu-Silveira Featured By Owner Aug 1, 2018  Hobbyist Writer
I’m glad too! XD
Reply
:iconsadreamer01:
sadreamer01 Featured By Owner Edited Jul 28, 2018  Hobbyist Digital Artist
 The only noise now was the rain, pattering softly with the magnificent indifference of nature for the tangled passions of humans
 
Reply
:iconkarenshirotori:
KarenShirotori Featured By Owner Edited Jul 23, 2018  Hobbyist Interface Designer
:iconKarenShirotori:
Reply
:iconlovelyteathyme:
lovelyteathyme Featured By Owner Jul 22, 2018  Hobbyist Digital Artist
example
Reply
:iconthatskindofit:
thatskindofit Featured By Owner Jul 20, 2018  Hobbyist General Artist
This is SUPER useful!!!
Thanks a billion!
Reply
:iconblazingflre:
BlazingFlre Featured By Owner Jul 13, 2018  Hobbyist Digital Artist
:iconblazingflre: Oooh Magic
Reply
:iconhazard-king:
hazard-king Featured By Owner Jul 7, 2018  Hobbyist Digital Artist
bold?
Reply
:icon0rganic-trash:
0rganic-Trash Featured By Owner Jul 2, 2018  Student General Artist
insert text here
 
Reply
Add a Comment:
 
×

:iconscarlettedeath: More from ScarletteDeath


Featured in Collections

Awesome News by namenotrequired

Journals by Ariamay123

News Contests by Missvirginia




Details

Submitted on
May 13, 2011
Link
Thumb

Stats

Views
610,919 (83 today)
Favourites
17,654 (who?)
Comments
3,477