All HTML Text Code With Example

HTML Text provides us with the ability for formatting text just like we do it in MS Word, notepad or any text editing software.  HTML Text is the first element most HTML beginners learn to add to any web page, and this is generally achieved through a classic, “Hello, World!” text formatting tags in html with example.

HTML Text Code:
Below html starting text code “Hello, World!” Example!

<!DOCTYPE html> 
  <head>
    <title>THML text page!</title>
  </head>
  <body>
    Hello World!
  </body>
</html>

html text color
The html color code and CSS color property defines text color:

<!DOCTYPE html>
<html>
<body>
<font color="red">This is some html color text!</font>
<h1 style="color:blue;">This is a css heading</h1>
<p style="color:red;">This is a css paragraph.</p>
</body>
</html>

html text size
The html text and CSS font-size property defines the text size:

<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:50%;">This is a heading</h1>
<p><font size="30">This is some html text!</font></p>
<p style="font-size:20px"> This is html css text</p>
<p style="font-size:30%;">This is a css paragraph.</p>
</body>
</html>

html text input
An HTML input style form with three fields; two text fields and one submit button:

<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>

html font style
Font style is specified using CSS. Font style refers to whether the font is presented in normal or italics. You can use the following HTML text code to specify font style within your HTML code.

<!DOCTYPE html> 
<html> 
<body>
<p style="font-style:normal;">Font style is normal</p>
<p style="font-style:italic;">Font style is italic <span style="font-style:normal"> back to normal</span> back to italics again.</p>
</body> 
</html>

html font family
CSS font-family property defines the font to be used for an HTML  text:

<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a font family heading</h1>
<p style="font-family:courier;">This is a font family paragraph.</p>
</body>
</html>

All Formatting text were designed to display special types of html text:

  1. Paragraph, Line break
    <p> paragraph </p>
    <p align=””> horizontal alignment in a paragraph </p>
    <br> line break </br>
    <nobr> no line break </nobr>
  2. Code, Sample, Variable
    <code> computer code text </code>
    <var> variable </var>
    <samp> sample computer code</samp>
  3. Section, Alignment …
    <div> block-level section (style container)</div>
    <div align=””> horizontal alignment in a section </div>
    <span> inline section (style container) </span>
    <pre> preformatted text </pre>
    <address> contact information </address>
    <center> horizontal centering </center>
  4. Heading, Emphasis, Deleted …
    <h1>-<h6> headings </h6><h1>
    <hn align=””> horizontal alignment of a heading</hn>
    <em><strong> emphasized text and strong text</strong></em>
    <del> deleted text </del>
    <ins> inserted text </ins>
  5. Quotation
    <blockquote> long quotation</blockquote>
    <blockquote cite=””> URI of a source</blockquote>
    <q> short quotation</q>
    <q cite=””> URI of a source</q>
    <cite> citation or reference</cite>
  6. Font size and color, Text decoration …
    <font size=”” color=””> font size and color</font>
    <font face=””> font face</font>
    <basefont size=””> base font</basefont>
    <big><small> big text and small text</small></big>
    <b> bold text</b>
    <i> italic text</i>
    <s><strike> strikethrough text</s></strike>
    <u> underlined text</u>
    <tt> teletype text</tt>
    <sup><sub> superscript and subscript text</sup>
    <ruby><rb><rp><rt> ruby text</ruby></rb></rp></rt>
  7. Other text
    <blink> blinking text </blink>
    <marquee> scrolling text</marquee>
    <!–Comment text –> comment
    &—; &#—; display of special characters

 

 

Leave a Reply