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:
 
:icondrawingattentions:
DrawingAttentions Featured By Owner 3 days ago  New Deviant Hobbyist General Artist
Omaigoodness! This has been so helpful and I just started out today!

You're a gem for sharing this! :happybounce: Clap 

//Hands you a cookie Araceli and Scorpy gif XD  
Reply
:iconrewdius:
Rewdius Featured By Owner May 7, 2018
Some additional HTML code you should include ..........
(NOTE: It's crucial to place HTML code within the correct location of the text to get a nice looking output.)
An unordered list (with bullets)
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk

An ordered (numbered) list
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
  1. Coffee
  2. Tea
  3. Milk

Paragraph Breaks
<p>This is<br>a paragraph<br>with line breaks</p>

This is
a paragraph
with line breaks


Abbreviations with floating text
(NOTE: Hover the mouse over the "WHO".  Also, the bold and italic tags were added to visually enhance the abbreviation but are not required.)
The <abbr title="World Health Organization"><b><i>WHO</i></b></abbr> was founded in 1948.
The WHO was founded in 1948.

All references from www.w3schools.com/html/html_ex…

Faved
Reply
:iconalyx-skat:
Alyx-SKat Featured By Owner Apr 30, 2018  New Deviant Hobbyist Digital Artist
That's cool!!
Reply
:iconanoymousisheretoask:
AnoymousIsHereToAsk Featured By Owner Apr 30, 2018  Student Digital Artist
trdfgc
Reply
:iconthenickcreator:
TheNickCreator Featured By Owner Apr 7, 2018  Hobbyist General Artist
bold
italic
underline
strikethrough
link
Reply
:icondjcinnccing:
DjCinnccing Featured By Owner Apr 1, 2018  Student Artist
Just practicing
Reply
:icondjcinnccing:
DjCinnccing Featured By Owner Apr 1, 2018  Student Artist
(cool)
Reply
:icondjcinnccing:
DjCinnccing Featured By Owner Apr 1, 2018  Student Artist
wow
Reply
:iconarcticsnowy21:
ArcticSnowy21 Featured By Owner Mar 23, 2018
Thank You for add this tutorial. I found this very helpfull!
Reply
:iconamateurart1st:
AmateurArt1st Featured By Owner Mar 22, 2018  Hobbyist Digital Artist
HOW SMALL CAN THIS BE
Reply
:iconseastarofearthclan:
SeastarofEarthclan Featured By Owner Mar 14, 2018  Student Digital Artist
I would just like to thank you for this, I use this journal almost every day on here <3


It's super helpful! 
Reply
:iconleodazodiac:
LeoDaZodiac Featured By Owner Mar 12, 2018  Student Digital Artist
Thank you thank you thank you so much! T^T I've been searching how to do some of these things forever ugh. Bless you ^^
Reply
:iconthaauthor:
ThaAuthor Featured By Owner Mar 6, 2018  Hobbyist Traditional Artist
Great work
Reply
:iconbeyondtheblock:
beyondtheblock Featured By Owner Feb 28, 2018
bless your beautiful soul
Reply
:iconmarinaplo:
Marinaplo Featured By Owner Edited Feb 25, 2018  Student General Artist
This works, I just have a few minor problems with it when working on descriptions or Journals

Like if I use <h1> the whole thing becomes bold

NVM, I figured it out ^_^;
Reply
:icondoolhoofd:
doolhoofd Featured By Owner Feb 24, 2018
Wonderful tutorial, helped me a lot, so I faved it.
But you forgot the div align="justify" code to turn text into blocks.
I discovered that today in a tutorial by CypherVisor.
Reply
:iconmichaelsboost:
michaelsboost Featured By Owner Edited Feb 20, 2018  Hobbyist General Artist
You should also add how the user can show code.

I'll use the below snippet of mine as an example

Thanks for the :+fav: :happybounce: :hug:

Thanks For The Fav 2 by michaelsboost

Thanks for the :+fav: :happybounce: :hug:

https://michaelsboost.deviantart.com/art/Thanks-For-The-Fav-2-731874692


Here's how I did it.....

Thanks for the :<span>+fav</span>: :<span>happybounce</span>: :<span>hug</span>:

htt<span></span>ps://michaelsboost.deviantart.com/art/Thanks-For-The-Fav-2-731874692

Reply
:iconjue-arts:
Jue-Arts Featured By Owner Feb 5, 2018  Hobbyist Digital Artist
Thanks a lot!! :heart:
Reply
:iconalicemakessmilesams:
AliceMakesSmilesAMS Featured By Owner Jan 31, 2018
Test 
Reply
:iconcamillachan02:
CamillaChan02 Featured By Owner Jan 31, 2018  Student Digital Artist
I DID IT!!!!!!!!!!!!!!!
YAY!!!!!!!
Reply
:icontaintedjade:
TaintedJade Featured By Owner Jan 17, 2018  Hobbyist Writer
I'm sorry but I'm still a little confused. I'm trying to make a link on my story's 1st chapter that'll take you to the next one along with one to the cover for the story (When I finally get it up that is) for those who want to use them, but I still have no idea how to make the link that'll do it. If you could explain in another way how you can do it or even another example on how to, I'd be very grateful. Thank you for your time.
Reply
:iconwonderlandrevenge:
WonderlandRevenge Featured By Owner Jan 20, 2018  Hobbyist Digital Artist
Since you don't have premium/core, you won't be able to do the image or thumb of the cover unless you just simply link it with the link "a href" one.

But to do that for linking the chapter (or the cover), you can do this:
Hmtl by WonderlandRevenge

For the cover, just replace the words Chapter 2 with Cover or whatever you'd like to call it and replace the chapter link with the link to the cover. Though, I've found that using the link or thumb options on the bottom right of a posted submission of art to link to the image as well as show it in comments, journals, etc. just fine without core.
Reply
:icontaintedjade:
TaintedJade Featured By Owner Jan 21, 2018  Hobbyist Writer
Thanks. I'll go try it right now. =D
Reply
:iconlovatorywow:
Lovatorywow Featured By Owner Jan 14, 2018  Student Digital Artist
yay
Reply
:iconladyseshiiria:
LadySeshiiria Featured By Owner Jan 9, 2018  Hobbyist General Artist
Things like this help a lot to create a page to draw people in, Thank you!
Reply
:iconhellixn:
Hellixn Featured By Owner Jan 8, 2018  Hobbyist Digital Artist
Im having a kind of hard time which link goes where; can someone give me an example?, that would be very helpful ^.^ 

down arrow pixel  

Bullet; YellowIncluding photos: <img src="Insert link to photo">
Point RightThis html code will work in: Premium journal entries, Super group blogs, custom boxes.
Reply
:icon4sparkles:
4sparkles Featured By Owner Jan 15, 2018  Hobbyist Digital Artist
I added spaces so you can see.
Reply
:icon4sparkles:
4sparkles Featured By Owner Edited Jan 15, 2018  Hobbyist Digital Artist
for example, go to my page. click the commissions button. it takes you to my commissions page. here's the code I used:


<  a href="4sparkles.deviantart.com/journ…"  > <  img src="orig00.deviantart.net/943e/f/2…"  > <  /a  >
Reply
:icon4sparkles:
4sparkles Featured By Owner Jan 15, 2018  Hobbyist Digital Artist
the first link: when you click the image, where do you want it to take them?
the second link: right click on the image and click "open image in new tab." use that link

does this help?
Reply
:iconhellixn:
Hellixn Featured By Owner Jan 15, 2018  Hobbyist Digital Artist
Oh! Now I understand ^.^ // Thank you so much for your help Clap 
Reply
:icon4sparkles:
4sparkles Featured By Owner Jan 15, 2018  Hobbyist Digital Artist
No problem! I'm glad I could be useful
Reply
:iconlazelleart:
lazelleart Featured By Owner Jan 3, 2018  Student Traditional Artist
Thank you!
Reply
:iconshining-char:
shining-char Featured By Owner Edited Jan 2, 2018  Hobbyist Digital Artist
thank you so much!!
this really helps a lot for me since this is literally my first time using it lol--
I'm just gonna test some things if u don't mind <3
hope this works owo;;


thank you again and I hope if you ever read this, that your day's great!
Reply
:iconooonoko:
ooonoko Featured By Owner Jan 1, 2018  Student Digital Artist
testing again <3
Reply
:iconwddoodles:
WDdoodles Featured By Owner Dec 31, 2017
Thank you for the guide, this helped me a lot! :D
Reply
:iconfurrygirlsylvy45:
FurryGirlSylvy45 Featured By Owner Dec 29, 2017  Hobbyist Writer
Maybe..


It does work?
Reply
:iconfurrygirlsylvy45:
FurryGirlSylvy45 Featured By Owner Dec 29, 2017  Hobbyist Writer
Wow, using these things will be FUN ! ^^
Reply
:iconlassie29:
Lassie29 Featured By Owner Dec 26, 2017  Hobbyist General Artist
Thank you so much for this, I can finally do something with my profile^w^
Reply
:iconooonoko:
ooonoko Featured By Owner Dec 22, 2017  Student Digital Artist
test
Reply
:iconpartybug98:
partybug98 Featured By Owner Dec 20, 2017  Student Digital Artist
why do these not want to work for me TnT
Reply
:icongrudgeholderr:
Grudgeholderr Featured By Owner Dec 19, 2017  Hobbyist Writer
Do you know if there is any way to get div style to work?
Reply
:icondoubravka-chlanova:
Doubravka-Chlanova Featured By Owner Dec 19, 2017
thank you
Reply
:iconcathy-ppg:
Cathy-PPG Featured By Owner Dec 18, 2017  Hobbyist Artist
thanks
Reply
:icontsl-misokofukumoto:
TSL-MisokoFukumoto Featured By Owner Dec 12, 2017  Hobbyist General Artist
Reply
:iconvolatile-rain:
Volatile-Rain Featured By Owner Dec 12, 2017  Hobbyist Traditional Artist
Thanks bruh ^_^Heart 
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
583,928 (172 today)
Favourites
17,237 (who?)
Comments
3,406
×