HTML elements describe the structure and content of a web page. Tags are used to indicate the beginning and end of elements. The syntax is as follows:
Tags often have attributes for further defining the element. Attributes usually come in name-value pairs.
Note that attributes only appear in the open tag, like so:
<tagname att1="value" att2="value">Element content</tagname>
There are some attributes that do not need to take a value. You can think of them as being "on" when the attribute is present and "off" when it is not. For example:
<tagname att>Element content</tagname>
The order of attributes is not important.
Empty vs. Container Tags
The tags shown above are called container tags because they have both an open and close tag with content contained between them.
Tags that do not contain content are called empty tags. The syntax is as follows:
<tagname att1="value" att2="value">
Empty tags may also be written as follows:
<tagname att1="value" att2="value" />
The forward slash (
/) at the end, just before the close angle bracket (
>), explicitly indicates that this tag is closed. It also makes the tag XML compliant. In general, it is not necessary to use this shortcut close, but it also doesn't cause any harm. Our only recommendation is that if you use it, use it consistently.
Blocks and Inline Elements
Block elements are elements that separate a block of content. For example, a paragraph (
<p>) element is a block element.
Other block elements include:
- Lists (
- Tables (
- Forms (
- Divs (
Inline elements are elements that affect only snippets of content and do not block off a section of a page. Examples of inline elements include:
- Links (
- Images (
- Form elements (
- Phrase elements (
- Spans (
Comments are generally used for one of three purposes.
- To write helpful notes about the code, for example, why something is written in a specific way.
- To comment out some code that is not currently needed, but may be used sometime in the future.
- To debug a page.
HTML comments are enclosed in
-->. For example:
<!-- This is an HTML comment -->