Basic HTML Tags
The most important tags in HTML are tags that define
headings, paragraphs and line breaks.
The best way to learn HTML is to work with examples. We
have created a very nice HTML editor for you. With this editor, you can edit the
HTML source code if you like, and click on a test button to view the result.
Try it Yourself - Examples
A very simple HTML document
This example is a very simple HTML document, with only a minimum of HTML tags.
It demonstrates how the text inside a body element is displayed in the
browser.
Simple paragraphs
This example demonstrates how the text inside paragraph elements is displayed
in the browser.
(You can find more examples at the bottom of this page)
Headings
Headings are defined with the <h1> to <h6> tags. <h1>
defines the largest heading. <h6> defines the smallest heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
|
HTML automatically adds
an extra blank line before and after a heading.
Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
|
HTML automatically adds
an extra blank line before and after a paragraph.
Don't Forget the Closing Tag
You might have noticed that paragraphs can be written without end tags </p>:
<p>This is a paragraph
<p>This is another paragraph
|
The example above will work in most browsers, but don't rely on it. Future version of HTML will not allow you to
skip ANY end tags.
Closing all HTML elements with an end tag is a future-proof way of writing
HTML. It also makes the code easier to understand (read and browse) when you
mark both where an element starts and where it ends.
Line Breaks
The <br> tag is used when you want to break a line, but don't want to start a new
paragraph. The <br> tag forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>
|
Try it
yourself
The <br> tag is an empty tag. It has no end tag like </br>, since a closing
tag doesn't make any sense.
<br> or <br />
More and more often you will see the <br> tag written like this: <br />
Because the <br> tag has no end tag (or closing tag), it breaks one of
the rules for future HTML (the XML based XHTML), namely that all elements must
be closed.
Writing it like <br /> is a future proof way of closing (or ending) the tag
inside the opening tag, accepted by both HTML and XML.
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A
comment will be ignored by the browser. You can use comments to explain your
code, which can help you when you edit the source code at a later date.
<!-- This is a comment -->
|
Note that you need an exclamation point after the opening bracket, but not before the closing bracket.
Recap on HTML Elements
- Each HTML element has an element name (body, h1, p, br)
- The start tag is the name surrounded by angle brackets: <h1>
- The end tag is a slash and the name surrounded by angle brackets
</h1>
- The element content occurs between the start tag and the end tag
- Some HTML elements have no content
- Some HTML elements have no end tag
Basic Notes - Useful Tips
When you write HTML text, you can never be sure how the text is displayed in
another browser. Some people have large computer displays, some have small. The
text will be reformatted every time the user resizes his window. Never try to
format the text in your editor by adding empty lines and spaces to the text.
HTML will truncate the spaces in
your text. Any number of spaces count as one. Some extra information:
In HTML a new
line counts as one space.
Using empty paragraphs <p> to insert blank lines is a bad habit. Use
the <br> tag instead. (But don't use the <br> tag to create lists.
Wait until you have learned about HTML lists.)
HTML automatically adds
an extra blank line before and after some elements, like before and after a
paragraph, and before and after a heading.
We use a horizontal rule (the <hr> tag), to separate the sections in our tutorials.
More Examples
More paragraphs
This example demonstrates some of the default behaviors of paragraph elements.
Line breaks
This example demonstrates the use of line breaks in an HTML
document.
Poem problems
This example demonstrates some problems with HTML formatting.
Headings
This example demonstrates the tags that display headings in an HTML document.
Horizontal rule
This example demonstrates how to insert a horizontal rule.
Hidden comments
This example demonstrates how to insert a hidden comment in the HTML source
code.
Basic HTML Tags
If you lookup the basic HTML tags in the reference below, you will see that
the reference contains additional information about tag attributes.
You will learn more about HTML tag attributes in the next chapter of this
tutorial.
| Tag |
Description |
| <html> |
Defines an HTML document |
| <body> |
Defines the document's body |
| <h1> to <h6> |
Defines header 1 to header 6 |
| <p> |
Defines a paragraph |
| <br> |
Inserts a single line break |
| <hr> |
Defines a horizontal rule |
| <!--> |
Defines a comment |
The Ektron Intranet
lets you do everything you need to do on your corporate intranet and everything you want to do... all with just one application.
What can you do with the Ektron Intranet? |
|
Navigate through content, documents, assets, colleagues and workgroups quickly and intuitively with enterprise search |
|
Communicate with friends and colleagues with forums, message boards and corporate blogging using the new Social Networking Platform |
|
Promote collaboration among coworkers in your organization through project workspaces where others can efficiently find information and work together |
|
Personalize your company profile by bookmarking and organizing favorite content, uploading assets, posting photos, blogging, and more |
|
Interact with features like tagging, flagging, wikis and ratings found in the Web 2.0 Toolbox |
 |
Author/edit content, manage navigation, menus, audit trails, workflow and approvals with the best in breed Content Management |
|
|
|
|
See why there are 20,000+ Ektron integrations worldwide.
Request an
INSTANT DEMO or download a
FREE TRIAL today. |
| 
HOME
Printer friendly page
