Bookmark and Share

HTML - Text

Text is the backbone of any web page. It plays an double role; it provides content for web surfers to enjoy as they skim through articles and articles of information, but it also gives Search Engines and Spiders keywords and meta data. It is because of text on web pages that we have a network of seemingly endless information available at our fingers.

Advertise on Tizag.com

HTML Text is probably the first element most HTML beginners learn to add to any web page, and this is generally achieved through a classic, "Hello, World!" example.

HTML Text Code:

<html> 
  <head>
    <title>My Web Page!</title>
  </head>
  <body>
    Hello World!
  </body>
</html>

HTML - Paragraph Text

Any text containing more than a few lines (or sometimes even more) should exist inside of a paragraph tag <p>. This tag is reserved specifically for blocks of text, such as those you would expect to find inside your favorite novel.

HTML <p> Tag Code:

<html> 
  <head>
    <title>My Web Page!</title>
  </head>
  <body>
    <p>Avoid losing floppy disks with important school...</p>
    <p>For instance, let's say you had a HUGE school...</p>
  </body>
</html>

HTML Paragraph Text:

Well written HTML documents can gain popularity through Search Engine Optimization and careful coding of your HTML elements.

Precision is important when writing your code. Web spiders are a little forgiving when it comes to malformed HTML elements. For best results, do your best to ensure your code is complete and accurately constructed.

HTML - Headings 1:6

HTML has heading tags which can be used as headers or subheaders. By placing text inside of an <h1> heading tag, for example, the text displays bold and the size of the text increases to a 24pt font size. Heading tags are numbered 1 through 6, and they change size depending on which tag you choose, with 1 being the largest font size at 24pt, and 6 being the smallest font size at 8pt.

HTML Heading Element:

<body>
  <h1>Headings</h1>
  <h2>are</h2>
  <h3>great</h3>
  <h4>for</h4>
  <h5>titles</h5>
  <h6>and subtitles</h6>
</body>

Place these lines into your HTML file and you should see results similar to what you see below.

HTML Heading Tags:

Headings

are

great

for

titles
and subtitles

Notice that each heading has a line break (a blank line) rendered before and after it. This is a built-in attribute associated with the heading tag. Each time you place a heading tag, your web browser automatically places a line break in front of your beginning tag and after your ending tag, just like it does with <p> tags. This is expected behavior, and as a designer you need to take these line breaks into consideration when designing a layout. Later on, CSS code can be used to remove these extra line breaks or manipulate the amount of spacing, if needed.

Bookmark and Share




Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!

Advertise Here

More Tutorials!
Microsoft Office Tutorials Artist Tutorials