- Headings
- Paragraph
- Bold
- Center
- Italics
- Line Breaks
- Horizontal Rule
- Unordered (un-numbered) List
- Ordered (numbered) List
- HTML Attributes
- HTML Font Code
- Useful Tips
Headings
The "h" tag specifies headers in HTML.
There are 6 levels of headings in HTML ranging from h1 for highest level, to h6 for the lowest.
Typing this code:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Results in this:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph
The "p" tag specifies a paragraph in HTML.
<p>This is the first paragraph.</p>
<p>And this is the second one.</p>
Results in this:
This is the first paragraph.
And this is the second one.
Strong
The "strong" tag turns text into bold in HTML.
<p>In a paragraph, <strong>part of the text</strong> could be turned into bold.</p>
Results in this:
In a paragraph, part of the text could be turned into bold.
Center
The "center" tag centers text in HTML.
<center>CENTERED TEXT</center>
Results in this:
CENTERED TEXT
Emphasis
The "em" tag turn the text into italics in HTML.
<em>This text is italicized.</em>
Results in this:
This text is italicized.Line Breaks
The "br" tag breaks a line in HTML.
<p>Here is a...<br>line break.</p>
Results in this:
Here is a
line break.
Horizontal Rule
The "hr" tag generates a horizontal rule in HTML.
Here's a horizontal rule...
<hr />
<p>...that was a horizontal rule :-)
Results in this:
Here's a horizontal rule......that was a horizontal rule :-)
Unordered (un-numbered) List
The "ul" tag generates an unordered list in HTML.
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
Results in this:
- List item 1
- List item 2
- List item 3
Ordered (numbered) List
The "ol" tag generates an ordered list in HTML.
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
Results in this:
- List item 1
- List item 2
- List item 3
HTML Attributes
Attributes can be added to a tag providing more information about how the tag should appear or behave.
Attributes consist of a name and a value separated by an equals (=) sign.
Here are some examples
Width
Defines the width of the HTML element
<hr color="blue" style="margin: 10px;" width="80%" size="3" />
This results in:
Alignment
Aligns HTML elements to the left, right, or center:
<h3 align="left">Aligned left</h3>
<h3 align="center">Aligned center</h3>
<h3 align="right">Aligned right</h3>
This results in:
Aligned left
Aligned center
Aligned right
Common Attributes
Some attributes are common across most tags, others can only be used on certain tags.
More common attributes:
| Attribute | Description | Possible Values |
|---|---|---|
| width | Specifies the width of an element | (Numeric value) |
| height | Specifies the height of an element | (Numeric value) |
| align | Specifies the horizontal alignment of an element | left, center, or right |
| class | Used with Cascading Style Sheets (CSS) | (the name of a class) |
| style | Used with Cascading Style Sheets (CSS) | (style information) |
| title | Can be used to display a "tool tip" for your elements. | (You supply the text) |
Attributes are optional, and generally have a default value.
HTML Font Code
Quick Example
The following font code sets common properties such as font size, line height, font family, and font color.
<p style="font: 14pt/20pt Garamond, Georgia, serif;color:#228B22;">
This font is 14pt, the line height is 20pt, it's color is ForestGreen, and the
font family will be 'Garamond'. If the user's computer doesn't have 'Garamond',
it will use 'Georgia'. Failing that it will use the default 'serif' font on the
user's computer (this is often 'Times' or 'Times Roman' - just leave it as 'serif').
You can also specify <span style="font-weight:bold;">bold text</span>
and <span style="font-style:italic">italics</span> if you wish!</p>
This results in:
This font is 14pt, the line height is 20pt, it's color is ForestGreen, and the font family will be 'Garamond'. If the user's computer doesn't have 'Garamond', it will use 'Georgia'. Failing that it will use the default 'serif' font on the user's computer (this is often 'Times' or 'Times Roman' - just leave it as 'serif'). You can also specify bold text and italics if you wish!
Font Family
If you only want to specify the font family, you can use the 'font-family' property:
<p style="font-family:Garamond, Georgia, serif;">
HTML font code is just specifying the font family.</p>
This results in:
HTML font code is just specifying the font family.
Font Size
If you only want to specify the font size, you can use the 'font-size' property:
<p style="font-size:20pt;">
HTML font code is just specifying the font size.</p>
This results in:
HTML font code is just specifying the font size.
Color
If you only want to specify the font color, you can use the 'color' property:
<p style="color:orange;">
HTML font code is just specifying the font color.</p>
The above code results in this:
HTML font code is just specifying the font color.
Bold
You can make your font bold by using the 'font-weight' property:
<p style="font-weight:bold;">
HTML font code is just specifying the font weight.</p>
This results in:
HTML font code is just specifying the font weight.
If you only want to bold some of the text inline, you can use the HTML 'span' tag:
<p>You can bold <span style="font-weight:bold">parts</span>
of your text using the HTML 'span' tag.</p>
This results in:
You can bold parts of your text using the HTML 'span' tag.
Italic Text
You can make your text italic by using the 'font-style' property:
<p style="font-style:italic;">
HTML font code is just specifying the font as italics.</p>
This results in:
HTML font code is just specifying the font as italics.
If you only want to make some of the text italic, you can use the HTML 'span' tag:
<p>You can make <span style="font-style:italic">some</span>
of your text italic using the HTML 'span' tag.</p>
This results in:
You can make some of your text italic using the HTML 'span' tag.
Useful Tips
Don't Forget the End Tag
Even if you forget the end tag, most browsers will format the HTML correctly:
<p>This is a paragraph
<p>This is a paragraph
The above code will work fine in most browsers
But forgetting the end tag can produce unexpected results or errors.
Warning: Last HTML versions (XHTML) doesn't allow you to skip end tags.
Empty HTML Elements
"Empty HTML Elements" are HTML elements without content.
Empty elements can be closed in the start tag.
<br> for instance, is an empty element without a closing tag (it defines a line break).
Adding a slash to the start tag, like <br />, is the proper way of closing empty elements.
That is the only way it will be accepted by future versions of XHTML and XML.
HTML5 supports both formats with or without the final slash.
Use Lowercase Tags
HTML tags are not case sensitive, so: <P> means the same as <p>.
Many web sites and software generated pages, use uppercase HTML tags in their pages.
But the World Wide Web Consortium (W3C) recommends lowercase since HTML 4
and demands it in future versions of (X)HTML.
So, do it more future proof, make your HTML pages using lower case tags.