Basic HTML Formatting Guide
|6 min read
Gasara's avatar
By Gasara   |   Watch
2K 260 70K (6 Today)
Published: October 5, 2013

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.




Comments260
anonymous's avatar
Join the community to add your comment. Already a deviant? Sign In
PlusMann's avatar
PlusMannHobbyist Digital Artist
Finally got it to work
TheFlagandAnthemGuy's avatar
Really, REALLY useful. Thank you!
winacti's avatar
The strategies you discussed in the article is beneficial to me. I will apply your experience for my website post Windows Toolkit.


Thank you very much for sharing such tips.
glitchdartz's avatar
glitchdartzHobbyist Digital Artist
Thanks this'll help me alot!
Beeroxxx's avatar
BeeroxxxHobbyist 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
Prince-Knight's avatar
This was very helpful, thank you!
YllKES's avatar
YllKESHobbyist Digital Artist
is there anyway you can change the hue of an image by coding? x,)) not sure if thats possible
Jonnymal67's avatar
Jonnymal67Hobbyist Filmographer
HOLY SHIT THIS IS HELPFUL!!! THANKS!!
TianaIgbedion's avatar
TianaIgbedionStudent Filmographer
Tried, didn't work...:(
HohoeminoBakudan's avatar
Thank you so much! This is a massive help! :D
Lisu166's avatar
Lisu166Hobbyist Digital Artist
That's a big help. Thank you Meow-thank You 
AuPlauSe's avatar
AuPlauSeStudent Artist
Thank you for the helpful tutorial. I'd be happy to put it in good use.
MarioDoesDoodles's avatar
MarioDoesDoodlesHobbyist General Artist
sample text
marill1's avatar
marill1Student General Artist
sample text
marill1's avatar
marill1Student General Artist
test biatch lasanga 
KingBumble's avatar
KingBumbleHobbyist Digital Artist
eyyyyyy
KingBumble's avatar
KingBumbleHobbyist Digital Artist
i dont get it ;n;
Spritesliker007's avatar
Spritesliker007Student Digital Artist
test

Briarfeather's avatar
BriarfeatherHobbyist General Artist
test
dustglitch's avatar
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
sto-krotka's avatar
sto-krotkaHobbyist General Artist
test  
test
SprinklesBases's avatar
SprinklesBasesHobbyist General Artist
<fontcolor="blue"> nope, dont get it
anonymous's avatar
Join the community to add your comment. Already a deviant? Sign In