HTML Markup Tags

The most important tags in HTML are tags that define headings, paragraphs and line breaks.

---

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.

Code:

<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.

Code:

<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>:

Code:

<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 to 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.

Code:

<p>This <br> is a para<br>graph with line breaks</p>

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.

Code:

<!-- 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.

---