HTML Codes for Text

From LoveToKnow Web-Design

While using HTML codes for text has begun to fall out of favor with designers who are enamored with the flexibility of CSS, they can still be useful tools for making quick changes to your websites.

HTML Codes for Text

The Do's and Dont's of using HTML Codes for Text

Hyper Text Markup Language (HTML) is a direct descendant of the "markup" tags that newspaper and magazine editors would use when planning the layout of magazines. In fact, it is designed specifically for text, and comes right out of typographic language. It is a way for the body of prose to be marked in a way that will convey what will be done to the lettering in the final product without actually doing it.

In a way, it's a series of pointers: "THIS word will be bold, and in capitals; this over here will be larger and colored red; this paragraph will be in Helvetica font" It should be no surprise, then, that pointers are exactly what are used in creating HTML codes for text: namely, the "<" and ">" or carat symbols around each tag. This <html> sets the markup text apart from the body of the work, as most articles don't use those particular symbols – unless, of course, it's an article like this one.

Tag Syntax

There are a couple of rules and conventions to remember about using HTML:

  1. It will make your code easier to read if you make the tags inside the carats all caps: <font> is harder to read than <FONT>.
  2. Every tag must have an opening and closing tag, with the closing one indicated by a backslash ("/") before the closing carat. The one exception is the "break" tag, which is either <BR> or </BR>. Both will work to break a line.
  3. If multiple tags are used, they need to be "nested" and not fall out of scope. For example, if you are going to use both Bold and Italic tags on the word "Help!", it would look like this: <STRONG><EM>Help!</EM></STRONG>, not <STRONG><EM>Help!</STRONG></EM>. In the latter, the final </EM> falls out of scope of the tags, because it is not "nested" inside the <STRONG> tag.

It is rules such as these that make designers grow tired of editing every little part of their coding and move to more efficient ways of formatting content such as Cascading Style Sheets.

So You Still Want the Code?

However, if you really want to use the HTML tags to markup your text, here are some of the most common ways to do this:

Bold

 In the early days of HTML, this was indicated by the same word <BOLD><pre>. However, with styles changing, it has been replaced by the word <pre><STRONG>.

Italics

 Like "bold", italics used to be indicated by a simple <I>. However, since italicizing is used to indicate emphasis, and not everyone emphasizes in the same way, the tag <EM> is now more common. Note that both <BOLD> and <I> will work in HTML; it will simply be out-dated usage.

Font

The font tag contains several properties that can be changed as needed:

  • Face: you can type in "FACE = "arial, Helvetica, sans-serif" " and the web browser will first show the font in Arial, then (in the absence of Arial) in Helvetica, and in the absence of either in whatever the closest sans-serif font on the computer is available. This is just an example; you can put whatever fonts you want in the tag, or even embed one in your web page.
  • Color: By adding "color = " and then a value (either RGB or a word) you can control the color of the fonts. RGB values are either three or six hexadecimal digits indicating color and preceded by a hash tag: #FFFFFF is white, for example. However, as HTML has progressed over the years, you can now simply use the word "white" to indicate the change you want to make to the font.
  • Size: This can be in pixels, in "ems" (not to be confused with "emphasis", an em is a unit of measurement used in typography) or simply by using the words "big," "bigger", etc.

Putting it all together, the font tag could look like this:

<FONT = "ARIAL, HELVETICA, SANS-SERIF" COLOR="WHITE" SIZE="BIGGER">

More HTML tags for text formatting can be found on the W3C website.

Retrieved from "http://web-design.lovetoknow.com/HTML_Codes_for_Text"

 


Comment on HTML Codes for Text



(Displayed with your comment)                        (Will not be displayed)
Verification Code:   
    

Web Design Categories
LoveToKnow Tools