Html Formatting Text

To be able to format text elements it's good to be familiar with the options available for setting the textformat in HTML and XHTML.
The formatting elements are designed and used to display various types of text:


HTML Formatting Options

There are various available options to format text in HTML.
<b> Bold text
<i> Italic text
<u> Underlined text
<strike> Strike text
<tt> Monospaced Font
<em> Emphasized text
<strong> Important text
<mark> Marked text
<small> Small text
<big> Large text
<del> Deleted text
<ins> Inserted text
<sub> Subscript text
<sup> Superscript text

HTML Bold Text

Text that is appearing within the <b>...</b> element will be displayed in bold.
Take a look at the following example.

HTML - HTML Bold Text

<!DOCTYPE html>
 
<html>
     
    <head>
    <title>Text formatted with Bold</title>
    </head>
     
    <body>
     <p>This is how a word looks like when it's formatted with the <b>bold</b> typeface.</p>
    </body>
     
</html>

HTML Italic Text

Text that is appearing within the <i>...</i> element will be displayed in an italicized way.
Take a look at the following example.

HTML - HTML Italic Text

<!DOCTYPE html>
 
    <html>
     
    <head>
    <title>Text formatted with Italic</title>
    </head>
     
    <body>
        <p>This is how a word looks like when it's formatted with the <i>italic</i> typeface.</p>
    </body>
     
</html>

HTML Underlined Text

Text that is appearing within the <u>...</u> element will be displayed as underlined.
Take a look at the following example.

HTML - HTML Underlined Text

<!DOCTYPE html>
 
    <html>
     
    <head>
    <title>Text formatted with Underlined</title>
    </head>
     
    <body>
        <p>This is how a word looks like when it's formatted with the <u>underlined</u> typeface.</p>
    </body>
     
</html>

HTML Strike Text

Text that is appearing within <strike>...</strike> will be written with a very thin line through the text that is called a strikethrough.
Take a look at the following example.

HTML - HTML Strike Text

<!DOCTYPE html>
 
    <html>
     
    <head>
    <title>Text formatted with Strike</title>
    </head>
     
    <body>
    <p>This is how a word looks like when it's formatted with <strike>strike</strike></p>
    </body>
     
</html>

HTML Monospaced Font

Text that is appearing within <tt>...</tt> is written in a monospced font. That means that each letter has the same width.
Take a look at the following example.

HTML - HTML Monospaced Font

<!DOCTYPE html>
 
<html>
     
    <head>
    <title>Text formatted with Monospaced Font</title>
    </head>
     
    <body>
        <p>This is how a word looks like when <tt>Monospaced Font</tt> is used.</p>
    </body>
     
</html>

HTML Emphasized Text

Text that is appearing within <em>...</em> is emphasized text and that means that it's with added semantic importance.
Have a look at the following example.

HTML - HTML Emphasized Text

<!DOCTYPE html>
 
<html>
 
    <head>
    <title>Text formatted with Emphasized</title>
    </head>
 
    <body>
        <p>This is how a word looks like when it's <em>emphasized</em></p>
    </body>
 
</html>

Learn more about Html Semantics

HTML Strong Text

Text that is appearing within the <strong>...</strong> element is having the semantics strong importance.
Take a look at the following example.

HTML - HTML Strong Text

<!DOCTYPE html>
 
<html>
 
    <head>
    <title>Text formatted with Strong</title>
    </head>
     
    <body>
        <p>This is how a word looks like when <strong>strong</strong>is used.</p>
    </body>
     
</html>

Learn more about Html Semantics

HTML Small Text

Text that is appearing within the <small>...</small> element is showed with one font size smaller than the rest of the text.
Have a look at the following example.

HTML - HTML Small Text

<!DOCTYPE html>
 
<html>
 
    <head>
    <title>Text formatted with Small</title>
    </head>
     
    <body>
        <p>This is how a word looks like when <small>small</small> is used.</p>
    </body>
     
</html>

HTML Larger Text

Text that is appearing within the <big>...</big> element is displayed larger than the surrounding text.
Have a look at the following example.

HTML - HTML Larger Text

<!DOCTYPE html>
 
<html>
     
    <head>
    <title>Text formatted with Big</title>
    </head>
     
    <body>
        <p>This is how a word looks like when <big>big</big> is used.</p>
    </body>
     
</html>

HTML Marked Text

Text that is appearing within the <mark>...</mark> element is highlighted.
Take a look at the following example.

HTML - HTML Marked Text

<!DOCTYPE html>
 
<html>
 
    <head>
    <title>Text formatted with Mark</title>
    </head>
     
    <body>
        <p>This is how a word looks like when <mark>mark</mark> is used.</p>
    </body>
     
</html>

HTML Inserted Text

All text that is placed within <ins>...</ins> element will be displayed as inserted text.
Have a look at the following example.

HTML - HTML Inserted Text

<!DOCTYPE html>
 
<html>
 
    <head>
    <title>Text formatted with Inserted</title>
    </head>
     
    <body>
        <p>This is how a word looks like when <ins>inserted</ins> is used.</p>
    </body>
     
</html>

HTML Subscript Text

Text placed in the <sub>...</sub> element is written in the subscript format. A subscript use the font size which is the same as the characters surrounding it but it will be displayed a little bit beneath the other characters.
Have a look at the following example.

HTML - HTML Subscript Text

<!DOCTYPE html>
 
    <html>
     
    <head>
    <title>Text formatted with Sub</title>
    </head>
     
    <body>
        <p>This is how a word looks like when <sub>subcript</sub> is used.</p>
    </body>
     
</html>

HTML Superscript Text

Text placed in the <sup>...</sup> element is written in the superscript format. The superscript tag is using the font size which is the same as the characters surrounding it but it will be displayed a little bit above the other characters.
Have a look at the following example.

HTML - HTML Superscript Text

<!DOCTYPE html>
 
<html>
 
    <head>
    <title>Text formatted with Sup</title>
    </head>
     
    <body>
        <p>This is how a word looks like when <sup>superscript</sup> is used.</p>
    </body>
     
</html>

BACK TO TOP






Check this out

HTML: Entities

A bit of text (a string) that begins with an ampersand (&) and ends with a semicolon (;) is called an HTML entity. These are mostly used to display reserved characters. These bits of text would otherwise be interpreted as HTML code and invisible characters. This is also useful if you wish to ....

HTML: Headings

The HTML <h1><h6> elements are representing six separate levels of section headings. The highest section is level <h1> and the lowest section is <h6>. You co....

HTML: Media Audio

HTML provides ways to enrich a web page with media in the form of images, audio tracks, and videos. The ability to add audio tracks to a website has been around for years but the process has been fairly cumbersome.


An <audio> element represents a sound or an audio st....

HTML: Id

The HTML <id> attribute defines a unique id for an HTML element. The id must be unique within the HTML document.

You can use the <id> to select the HTML element, then you can read or manipulate the element with CSS and JavaScript.


BACK TO TOP
HTML is a markup language used to make web pages. HTML5 is the latest version of Hypertext Markup Language. The cornerstone technologies for a webpage are HTML, which provides the structure. Cascading Style Sheets (CSS), which take care of presentation. And JavaScript, which makes things happen.

Thanks to HTML5, web pages can now store data locally on the users browser, then you dont need to use HTTP cookies. Now content can be delivered faster and more securely. HTML5 has also made it easier to ensure consistency across all browsers. Since browsers have traditionally relied upon different plugins to play multimedia files, native support of video and audio allows developers to avoid compatibility issues. New attributes also allow for video controls including play, pause, and volume options.

HTML4 was the standard for about 15 years and many still use it, all browsers will continue to support it for a very long time. Likewise, older browsers can 'overlook' new HTML5 code while rendering content. Virtually all modern browsers support HTML5 specifications fairly well.

You can use HTML5test to run a test with your current browser to see what it scores in terms of HTML5 support.

BACK TO TOP

Need more Honney

NDC Conferences

The NDC Conferences (Norwegian Developers Conference) are one of the world`s largest independent software conferences for .NET & Agile development. The conference covers everything you need to know within software development. The conferences are held each year in many places such as Oslo, Copenhagen, London, Sydney and Minnesota.

Update Conference Prague

Update Conference Prague is the biggest developer conference in the Czech Republic. The conference is offering sessions delivered by the top experts from all around the world. Their goal is to inspire the attendees and enrich their knowledge.

Troy Hunt

Learn about Web Security from Troy Hunt. He is a really engaged speaker that frequently give talks on conferences around the world. Troy is a Microsoft MVP and you can even learn from him on some great courses on Pluralsight.

W3Schools

W3Schools.com is a great education Web Site for learning web technologies. On W3Schools you may find well organized basic to advanced tutorials and references.

Scott Hanselman

Learn about Web Technologies and new trends from Scott Hanselman. Scott Hanselman is an author of developer books and he is an engaged speaker that usually talks about the Microsoft stack. You may meet Scott on conferences around the world.

Developer Week

DeveloperWeek is one of the world’s largest developer conferences. Developer Week focus on new dev technologies, the conference have talks and workshops for newbies and experienced audience. You can attend on a Developer Week conference different places in Nothern America.


BACK TO TOP

Honneybag blog



Learn JavaScript Debugging

Searching for bugs and fixing them is called code debugging. The bugs might be difficult to diagnose and therefore it is important to have a good approach to find and fix the bugs effectively. Bugs in the code might be syntax errors or logical errors. Sometimes nothing happens when the code contains bugs and there is few indications where to search. Modern web browser includes a powerful suite of developer tools. The tools do a range of things...

Explore JavaScript Arrays

Arrays are frequently used by developers. Programming languages can have slightly different implementation of arrays. An array is an object that can store a collection of items. You may say it`s a special variable that can have more than one value. The array holds many values under a single name, and you may access the values by referring to an index number. The easiest way to create....

Ultimate Guide to HTML Colors

It is essential to give the user a good user experience. There are many things you should focus on, one of them is how you use colors on your website. We don't have to struggle with black and white TVs anymore. Users expect more and more and we can apply colors to everything we want. Texts, borders, backgrounds, shadows – in HTML they all can have whatever color you decide....

Wanna be a sheep? Check out the most popular subjects
HONNEYBAG BLOG
JAVASCRIPT ESSENTIALS
HTML FORMATTING
HONNEYBAGBLOG INSPIRE-AND-BE-INSPIRED
HONNEYBAGBLOG EXPLORE-JAVASCRIPT-ARRAYS
Wanna be a little different? Check out the less popular subjects
HTML ESSENTIALS
JAVASCRIPT BREAKER
HTML COMMENTS
HTML BUILDING-BLOCKS
HTML COMPUTER-CODE
BACK TO TOP