Learning the HTML Codes for Text

Pin Me

HTML Codes for Text: Easy, Fun, and Practical HTML Tags

written by: SunnyGriffis•edited by: Amy Carson•updated: 2/7/2011

Learning basic HTML codes for text is a breeze with these examples. You'll want to experiment with HTML tags to create just the right look and feel for you text in your HTML coding on your website, blog, or emails.

  • slide 1 of 6

    It’s easy to learn simple HTML coding to modify text on your website or blog. There are HTML codes for text that can change the color, size, and style of your font. Try out several new codes or combine them to create a particular look and feel for your text.

  • slide 2 of 6

    HTML Codes for Font Size

    One of the first aspects of your text you’ll likely want to modify is the size of your font. This is one of the easiest codes to incorporate into your HTML coding because you simply assign the text a numerical number, which the browser then reads and displays as the appropriated size.

    <font size="1">This is size 1 font</font>

    In the above example, you can replace the “1" with any number from 2 to 7. The larger the number, the larger the font will appear. Naturally, you’ll want to replace the phrase “This is size 1 font" with your desired text. HTML text sizes are not the equivalent of standard font sizes, but there is a correlation. For example, an HTML font size 1 creates an 8 point standard font size, and an HTML font size of 7 creates a 36 point standard font size.

  • slide 3 of 6

    HTML Codes for Font Faces

    You can quickly change the font face of your text to any font that you have installed on your computer.

    <font face="Calibri">This is Calibri text</font>

    Simply replace “Calibri" with your chosen font face and replace “This is Calibri text" with your text. It’s important to note that if a user doesn’t have the font face installed on their computer that you used in your HTML code, the browser will likely default to Times New Roman.

  • slide 4 of 6

    HTML Codes for Font Styles

    To change the physical style of your font, simply place desired text tags around your text. Note that your text should replace the words between the tags to properly define your text. Try incorporating these of these basic tags into your HTML codes for text:

    <b>Bold Text</b>

    <i>Italic Text</i>

    <sub>Subscripted Text</sub>

    <sup>Superscripted text</sup>

    <strike>Striked-Out Text</strike>

    <u>Underlined Text</u>

  • slide 5 of 6

    HTML Codes for Font Colors

    W3Schools.com's Color Picker Changing the color of your font is a fun, experimental process. Font colors are creating using a mix of the three primary colors, which forms a hexadecimal code. This provides you with numerous color options. One of the easiest ways to define your text color is to use a free online tool such as W3Schools.com’s color picker to select a color of your choosing.

    To define the color of you font in you HTML codes for text, simply replace the “##330033", which yields below with a color code of your choosing.

    <font color="##330033">Deep purple text</font>

  • slide 6 of 6

    HTML Text Codes: Putting It All Together

    Learning basic HTML codes for text increases your creative options and provides you with the means to create personalized text for your website, blog, or email.

    For example, using various codes learned above, you can create the following code:

    <p><font size="7"><font color="##330033"><font face="Monotype Corsiva"><i>Size 7 deep purple italicized</i></font></font></font></p>

    to yield the following result:HTML Example 

More To Explore