HTML for Copywriters

Copywriters are strange and mysterious personalities that live their lives on the web. Imagine that we are living in the XVIII-th century or even earlier, how would they call copywriters? Scriber? Nègre littéraire? Or just the Slaves of the Pen?

For someone copywriting is a hobby, for others a must, anyways today copywriting is everywhere: in advertisements, TV commercials, brochures. Whenever any company needs to promote itself (through press releases, leaflets, newsletters or anyhow else), it needs copywriters.

Web needs copywriters to write promotional emails and fill web pages with content. Copywriting is purely everywhere – on big posters, newspaper ads and in every slogan, “Just do it!” that’s copywriters. Today this is the most creative and most demanding branch of writing.

When it comes to write something for the web copywriter needs to know basic HTML, in order to understand how things work. He needs to know basic markup of the web page, that’s really important for blog’s copywriters. That’s why today we would like to give you most essential HTML tags that every copywriter should know.


HTML Text Formatting Tags

Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text

 
HTML “Computer Output” Tags

Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<var> Defines a variable
<pre> Defines preformatted text

 
HTML Citations, Quotations, and Definition Tags

Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<q> Defines an inline (short) quotation
<cite> Defines the title of a work
<dfn> Defines a definition term

***

Header tags

Copywriters are armed with 6 header tags including:

Unordered (bulleted) lists

Unordered lists begin with the < ul > tag and end with the < /ul > tag. Each individual list item is enclosed by a < li > and a < /li > tag.
< ul >
< li > list item 1< /li >
< li > list item 2< /li >
< li > list item 3< /li >
< /ul >

This is how it will be displayed:

  • ● list item 1
  • ● list item 2
  • ● list item 3

Ordered (numbered) lists

< ol >
< li > list item 1< /li >
< li > list item 2< /li >
< li > list item 3< /li >
< /ol >

This is how it will be displayed:

1. list item 1
2. list item 2
3. list item 3

Nested lists

< ul >
< li >list item 1< /li >
< ul >
< li > nested item 1< /li >
< li > nested item 2< /li >
< /ul >
< li > list item 2< /li >
< ul >
< li > nested item 1< /li >
< li > nested item 2< /li >
< /ul >
< li > list item 3< /li >
< ul >
< li > nested item 1< /li >
< li > nested item 2< /li >
< /ul >
< /ul >

This is how it will be displayed:

In case you need some special characters here is a huge table with hundreds of symbols.

***

Font tags

When working with fonts there may come out the necessity to change either color or size, in case you have no WYSIWYG editor use following tags:

< font size="number" >< /font >

< font color="number or color name" >< /font >

***

By the way you can turn your browser’s blank page into the notepad just copy-paste this code into the address bar and hit Enter:

data:text/html, < html contenteditable >

***

In case you know some interesting tags use the comments section.

This entry was posted in HTML5, Tutorials, Usability. Bookmark the permalink.