HTML Fundamentals – Text Design and Layout
If you've read Getting Started with HTML, then you're familiar with how to build an extremely simple website in HTML. The next step in developing your site is adding a bit of decoration to your text. After all, you won't want to have every page written in the browser's default font!
We've already seen the paragraph tag <p></p>, which puts the text in between the tags into paragraph format. If you design a page with the following code in the body...
<p>This is a paragraph.</p>
<p>This is another paragraph!</p>
...the page will look something like this:
This is a paragraph.
This is another paragraph!
Incidentally, it is possible to have only the opening paragraph tag <p> in HTML and omit the closing </p> tag. However, this will not work in XHTML, which is the new standard for web design, so it's best to get into the habit of including all closing tags.
The <font> tag is the place to start with customizing your text's appearance. This tag can alter the font type (e.g. Arial, Verdana, Times New Roman, etc.), size, color, and more. As you learn more about website development you'll switch to using CSS (cascading style sheets) to format text, but it's important to understand the <font> tag since many older websites still use it. I've listed some examples of how to use the <font> tag below; I'd encourage you to use a text editing program and browser (as described in the Getting Started with HTML article) to see for yourself how they alter the text's appearance.
<p><font face="Verdana">This text is in the Verdana font.</font></p>
<p><font size="3">This text is very large.</font></p>
<p><font color="red">This text is red.</font></p>
<p><font size="+1">This text is larger than the text above it by one size.</font></p>
<p><font face="Arial" color="green" size="1">This text combines several font attributes.</font></p>
Notice how the <p> and <font> tags are nested in the above examples. If you use tags inside tags, you must close the inside tags before closing the outside ones:
<p><font>These tags are correctly nested.</font></p>
<p><font>These tags are not! Never do this!</p></font>
There are several other tags that you can use to modify text appearance. The ones you'll use most often are the bold tags <b></b> and the italic tags<i></i>. Another useful tag is the line break tag, which can be rendered as either <br> or <br />. The former variant is being phased out as web developers gradually shift to XHTML, so you're better off using the latter unless for some reason you're developing pages in strict HTML. The <br /> tag introduces a line break as follows:
<p>I'm on the first line<br />and I'm on the second!</p>
... which will be rendered in your browser as:
I'm on the first line
and I'm on the second!
Now that you know the basic text editing tags, you can use them to create nicely formatted text for your web pages.
We've already seen the paragraph tag <p></p>, which puts the text in between the tags into paragraph format. If you design a page with the following code in the body...
<p>This is a paragraph.</p>
<p>This is another paragraph!</p>
...the page will look something like this:
This is a paragraph.
This is another paragraph!
Incidentally, it is possible to have only the opening paragraph tag <p> in HTML and omit the closing </p> tag. However, this will not work in XHTML, which is the new standard for web design, so it's best to get into the habit of including all closing tags.
The <font> tag is the place to start with customizing your text's appearance. This tag can alter the font type (e.g. Arial, Verdana, Times New Roman, etc.), size, color, and more. As you learn more about website development you'll switch to using CSS (cascading style sheets) to format text, but it's important to understand the <font> tag since many older websites still use it. I've listed some examples of how to use the <font> tag below; I'd encourage you to use a text editing program and browser (as described in the Getting Started with HTML article) to see for yourself how they alter the text's appearance.
<p><font face="Verdana">This text is in the Verdana font.</font></p>
<p><font size="3">This text is very large.</font></p>
<p><font color="red">This text is red.</font></p>
<p><font size="+1">This text is larger than the text above it by one size.</font></p>
<p><font face="Arial" color="green" size="1">This text combines several font attributes.</font></p>
Notice how the <p> and <font> tags are nested in the above examples. If you use tags inside tags, you must close the inside tags before closing the outside ones:
<p><font>These tags are correctly nested.</font></p>
<p><font>These tags are not! Never do this!</p></font>
There are several other tags that you can use to modify text appearance. The ones you'll use most often are the bold tags <b></b> and the italic tags<i></i>. Another useful tag is the line break tag, which can be rendered as either <br> or <br />. The former variant is being phased out as web developers gradually shift to XHTML, so you're better off using the latter unless for some reason you're developing pages in strict HTML. The <br /> tag introduces a line break as follows:
<p>I'm on the first line<br />and I'm on the second!</p>
... which will be rendered in your browser as:
I'm on the first line
and I'm on the second!
Now that you know the basic text editing tags, you can use them to create nicely formatted text for your web pages.
This site needs an editor - click to learn more!
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact
BellaOnline Administration
for details.