Shop Forum More Submit  Join Login

Basic HTML Formatting Guide

Sat Oct 5, 2013, 8:39 AM

Introduction



HTML is a markup language used to create web pages. It primarily consists of content placed between named tags that define the layout or style of that content.


Is it just me or does trying to explain HTML and what it does always seem to make it sound more complicated than it actually is? Very simply, HTML is the building blocks of the web. With it you can create a web page right from the foundations of the layout to the finishing touches of style. Don't get me wrong, it is a fairly involved topic but it really is quite simple to pick up the basics.

What I'll be helping you with here is the formatting aspect of HTML. These are the things that add colour to your page and make your font fancy.

Below you will find a number of examples of HTML formatting that you can use to style your own web pages, dA profiles and journals. All you need to do is copy/paste the code and replace the sample text with your own content. Along with the quick reference I've also written a brief glossary of terms and provided a list of useful links in case you wish to do some further reading.

As always, if you have any questions or problems just let me know.


Text Formatting



Bold text
<b> sample text </b>

Strong
<strong> sample text </strong>

Emphasized
<em> sample text </em>

Italics
<i> sample text </i>

Small
<small> sample text </small>

Superscript
<sup> sample text </sup>

Subscript
<sub> sample text </sub>

Strikethrough
<strike> sample text </strike>

Strikethrough
<s> sample text </s>

Deleted text
<del> sample text </del>

Inserted text
<ins> sample text </ins>

Underlined
<u> sample text </u>

Code
<code> sample text </code>

| Blockquote
<blockquote> sample text </blockquote>

Header
<h3> sample text </h3>
You can define h3 - h6



Font Formatting



Replace the green text in the examples below with your own values.

Face
<font face="verdana"> sample text </font>

Size
<font size="3"> sample text </font>
You can define sizes from 1-7

Color
<font color="#888888"> sample text </font>
<font color="white"> sample text </font>
<font color="rgb(255,255,255)"> sample text </font>
You can define colour using the colour name, hex code or rgb number. Please note that the font color attribute does not work on deviantART profiles.



Paragraphs & Breaks



Paragraph
<p> sample text </p>
Adds a margin around a block of text

Break
sample text <br> sample text
Moves following text to the line underneath. It has no end tag.

Horizontal rule
sample text <hr> sample text
Creates a line to separate sections of content



Layout & Alignment



Division
<div> sample text </div>
Creates a block within which to display content. Used for creating different sections on a web page.

Span
<span> sample text </span>
Defines an area of text that can be styled in-line. It doesn't do anything by itself but allows the use of attributes to style a certain section of text.

Align
<div align="center">sample text</div>
Aligns content.



Images



Image
<img src="http://website.com/image.png">
Used to display images. Replace the green text with your image URL



Links



Text link
<a href="http://website.com"> sample text </a>
Creates a clickable text link. Replace the green text with your page URL.

Image link
<a href="http://website.com"><img src="http://website.com/image.png"></a>
Creates a clickable image link. Replace the green text with your page URL. Replace the blue text with your image URL.



Glossary



HTML (HyperText Markup Language) is a markup language used to create web pages.

Tags are used to define layout and styles. Tag names are enclosed in angle brackets and usually come in pairs consisting of an opening tag and closing tag. The closing tag includes a forward slash before the tag name.
<tag> </tag>


Element refers to the entire content of a pair of tags, including the text between.
<tag> content </tag>


Attributes can be added to an element to further define them. They come in name/value pairs in the form name="value"
<tag color="red"> sample text </tag>


URL (uniform resource locator) refers to the specific location of an item on the internet. It is also refered to as a web address and is used to identify and link to specific pages and content.
http://www.website.com


Hex codes are a string of six digits and letters preceeded by a hash tag used to define a certain colour.
#ffffff


RGB numbers use a combination of red, green and blue numerical values to define a colour.
255,255,255



Helpful Links



deviantART Customisation FAQ
A list of the most frequently asked questions regarding customising your deviantART account. Answers include information and instructions.

Basic CSS style Guide
A quick guide to styling HTML content with CSS.

w3schools
A comprehensive information resource covering all aspects of HTML.

Hex and RGB values
Get hex and rgb numbers for any colour

Google Fonts
A collection of Open Source fonts you can use on your pages for free.




Add a Comment:
 
:iconglitchdartz:
glitchdartz Featured By Owner Edited 10 hours ago  Hobbyist Digital Artist
Thanks this'll help me alot!
Reply
:iconbeeroxxx:
Beeroxxx Featured By Owner Apr 2, 2019  Hobbyist General Artist
Hi there.  Two questions if you don't mind:

:bulletblue: Is there a code I can use to change the color (background) of my journal?  
:bulletblue: I see people when they give credit, they write "Used here [Link]"  What coding do I use and how do I use it to create a link like that?

Much appreciated.
Bee
Reply
:iconprince-knight:
Prince-Knight Featured By Owner Mar 23, 2019  New Deviant
This was very helpful, thank you!
Reply
:iconyllkes:
YllKES Featured By Owner Mar 14, 2019  Hobbyist Digital Artist
is there anyway you can change the hue of an image by coding? x,)) not sure if thats possible
Reply
:iconjonnymal67:
Jonnymal67 Featured By Owner Mar 4, 2019
HOLY SHIT THIS IS HELPFUL!!! THANKS!!
Reply
:icontianaigbedion:
TianaIgbedion Featured By Owner Feb 26, 2019  Student Filmographer
Tried, didn't work...:(
Reply
:iconhohoeminobakudan:
HohoeminoBakudan Featured By Owner Feb 8, 2019
Thank you so much! This is a massive help! :D
Reply
:iconlisu166:
Lisu166 Featured By Owner Feb 3, 2019  Hobbyist Digital Artist
That's a big help. Thank you Meow-thank You 
Reply
:iconauplause:
AuPlauSe Featured By Owner Edited Jan 15, 2019  Student Artist
Thank you for the helpful tutorial. I'd be happy to put it in good use.
Reply
:iconmariodoesdoodles:
MarioDoesDoodles Featured By Owner Edited Dec 28, 2018  Hobbyist General Artist
sample text
Reply
:iconmarill1:
marill1 Featured By Owner Dec 28, 2018  Student General Artist
sample text
Reply
:iconmarill1:
marill1 Featured By Owner Dec 28, 2018  Student General Artist
test biatch lasanga 
Reply
:iconkingbumble:
KingBumble Featured By Owner Edited Dec 21, 2018  Hobbyist Digital Artist
eyyyyyy
Reply
:iconkingbumble:
KingBumble Featured By Owner Dec 21, 2018  Hobbyist Digital Artist
i dont get it ;n;
Reply
:iconspritesliker007:
Spritesliker007 Featured By Owner Nov 3, 2018  Student Digital Artist
test

Reply
:iconbriarfeather:
Briarfeather Featured By Owner Oct 20, 2018  Hobbyist General Artist
test
Reply
:iconihavesinnedbye:
ihavesinnedbye Featured By Owner Oct 16, 2018
xD
Reply
:iconglimmewglitch:
glimmewglitch Featured By Owner Sep 9, 2018
i thought <font color> didn't work unless u were core, i mean this is an old journal ofc but!!!! p sure that's what the core now implies that u can edit with far more html after paying
Reply
:iconsto-krotka:
sto-krotka Featured By Owner Aug 19, 2018  Hobbyist General Artist
test  
test
Reply
:iconsprinklesbases:
SprinklesBases Featured By Owner Aug 15, 2018  Hobbyist Digital Artist
<fontcolor="blue"> nope, dont get it
Reply
:icongregor-kari:
gregor-kari Featured By Owner Dec 24, 2018  Professional Digital Artist
:/ also doesn't work for me
Reply
:icondigi-h:
DiGi-H Featured By Owner Aug 10, 2018  Hobbyist Filmographer
Thank you for your hard work in making this guide. 
Reply
:iconkiramera:
Kiramera Featured By Owner Edited Jun 8, 2018  Student Digital Artist
Could I get some help?
The coding format for aligning text worked for me before, and I was able to center text on my deviantID.
However while doing some renovations I accidentally deleted all of my description, and now I can no longer center the text.
I've tried every other method mentioned in this comment section, but it still won't work (it still stays to the right).

Reply
:iconlemondropfox:
LemonDropFox Featured By Owner Mar 24, 2018  Hobbyist Digital Artist
Hey, I do have one question though. When I use "sample text
sample text" I understand it makes it move downward, but is there a way to move it upward?
Reply
:icontophat-queen:
TopHat-Queen Featured By Owner Edited Jul 9, 2018   Digital Artist
< sup > instead of < sub >
Reply
:iconsupuhstar:
Supuhstar Featured By Owner May 15, 2018  Hobbyist Digital Artist
w....what? What do you expect the result to look like?
Reply
:iconmayukawaguchi:
MayuKawaguchi Featured By Owner Edited Mar 14, 2018  Hobbyist Digital Artist
I trying to use two of them (for small text and for font size) for the first time one works ("small") and again not works ;-; when I write another one It don't work ;-; what I do wrong?? ;-;
Reply
:iconsupuhstar:
Supuhstar Featured By Owner Edited May 15, 2018  Hobbyist Digital Artist
You have to close the tag. Start the small text with <small> and end the small text with </small>.

For example:

Normal text <small> small text </small> normal text again <small> small text again </small> normal text once again


Normal text small text normal text again small text again normal text once again
Reply
:iconmayukawaguchi:
MayuKawaguchi Featured By Owner Edited Mar 14, 2018  Hobbyist Digital Artist
just a test
Reply
:iconughpuppy:
ughpuppy Featured By Owner Edited Mar 9, 2018
test OH LIT it works. Thanks!!
Reply
:iconpuglordseba:
puglordseba Featured By Owner Edited Feb 15, 2018  Hobbyist Digital Artist
sample text
Reply
:iconladyseshiiria:
LadySeshiiria Featured By Owner Edited Feb 6, 2018  Student General Artist
So I have a question for you. I want to use a darker image for my custom box devid but I can't seem to get colored text to work with the background I am using. Which is weird because I can get it to work anywhere else. Are certain colors prohibited from usage for backgrounds?

EDIT: 
  • The standard font color property, an easy HTML method of changing font colour, does not work on deviantART profiles. Instead we have to use a workaround utilising some deviantART-specific code.
? Curious as to what that means. I'm guessing it mean standard code doesn't work so you have to use their proprietary code?

Reply
:iconleadlight-waterfall:
Leadlight-Waterfall Featured By Owner Jan 27, 2018  Student General Artist
sample text
Reply
:iconleadlight-waterfall:
Leadlight-Waterfall Featured By Owner Jan 27, 2018  Student General Artist
cool
Reply
:iconfvckkinqq:
Fvckkinqq Featured By Owner Jan 23, 2018  Hobbyist Digital Artist
oh, this is really cool
Reply
:iconfvckkinqq:
Fvckkinqq Featured By Owner Jan 23, 2018  Hobbyist Digital Artist
just me testing, sorry about that XD
Reply
:iconxx-twilight-plush-xx:
xx-twilight-plush-xx Featured By Owner Jan 23, 2018  Hobbyist Photographer
Testing.
Reply
:iconqeorqia:
qeorqia Featured By Owner Jan 3, 2018
Hey is there any way I can change the color of a link from blue to white?
Reply
:icongasara:
Gasara Featured By Owner Jan 3, 2018  Professional General Artist
Hi. If you mean on your profile page then no. You can only change the text (and only to specific colours) but it won't change the links.

FAQ13 - How do I change the font colour?

If you mean in a journal / profile skin then yes. You'll need to use CSS for that. Something like this:

a {
color: #ffffff;
}
Reply
:iconqeorqia:
qeorqia Featured By Owner Jan 3, 2018
hey I actually figured it out early this morning! Thanks so much for helping me out though!
Reply
:icongasara:
Gasara Featured By Owner Jan 3, 2018  Professional General Artist
No problem at all. I'm glad you're all sorted!
Reply
:iconbootleggreely:
BootlegGreely Featured By Owner Edited Jan 2, 2018  Hobbyist Digital Artist
colored text didnt work for me, so i used this instead :0 here it is for anyone who needs it

Colored Text (Custom box) - More colors by CypherVisor
Reply
:icongasara:
Gasara Featured By Owner Jan 2, 2018  Professional General Artist
Hi. It does say in the guide that the font colour property won't work on profile pages. The article instead links to my Customisation FAQ which explains how to do this.

FAQ13 - How do I change the font colour?
Reply
:iconwilliamwhitelow316:
williamwhitelow316 Featured By Owner Edited Jan 1, 2018  Professional Interface Designer
sample text?
sample text?
does not work again about 2 times, :(
Reply
:icongasara:
Gasara Featured By Owner Jan 1, 2018  Professional General Artist
Hi. I'm not sure what code you were trying to use but it does work. Some code isn't supported by deviantART though, especially in comment boxes, even though it will work elsewhere. If you let me know what you were trying to do I can help.
Reply
Add a Comment:
 
×

:icongasara: More from Gasara


Featured in Collections

Journals + dA related by wnarya

Resource Journals by reafu-fu




Details

Submitted on
October 5, 2013
Link
Thumb

Stats

Views
66,320 (11 today)
Favourites
2,244 (who?)
Comments
266