Using HTML Tags
Training content courtesy of the University of Washington. Additional training is available through W3C Schools online training content.
About HTML Tags
- Web pages are just plain text. You can view or edit the source code using any text editor.
- "Tags" provide web browsers with instructions about the web page, such as where to display images, and how the document is structured.
- Tags are always enclosed in angle brackets: < >.
- Tags are comprised of elements and attributes. An element is an object on a page (such as a heading, paragraph, or image), and attributes are qualities that describe that element (such as width and height).
- Tags usually travel in pairs. An opening tag begins a section of page content, and a closing tag ends it. For example, to markup a section of text as a paragraph, you would open the paragraph with an opening paragraph tag <p> and close it with a closing paragraph tag </p> (closing tags always proceed the element with a /).
- A few tags are called non-container tags, because they don't contain any content - they stand alone. Examples are images and line breaks. Non-container tags end in />. For example, the tag for a line break is <br />.
- All tags must be in lower case.
- White space is ignored by web browsers. So, if you hit the spacebar multiple times within a document, only one of those spaces will actually be displayed by the browser.
- Tags can be nested.
Understanding the following tables
Common HTML tags are presented below, organized into two tables based on their purpose. Container tags (those that contain content) are presented in the first table, and non-container tags (those that stand alone) are presented in the second table.
Content (Container) Tags
|
Opening Tag |
Closing Tag |
Description |
|---|---|---|
|
<h1> to <h6> |
</h1> to </h6> | Headings. H1 is the main heading, H2 is secondary, etc. |
|
<p> |
</p> | Paragraph |
|
<em> |
</em> | Gives the contained text emphasis (usually as italics). |
|
<strong> |
</strong> | Makes the contained text bold. |
|
<a href = "location"> |
</a> | Link |
|
<ol> |
</ol> | Ordered (numbered) list |
|
<ul> |
</ul> | Unordered (bulleted) list |
|
<li> |
</li> | List item, must be nested inside a list element such as a <ol> or <ul> |
Empty (Non-Container) Tags
| Tag | Description |
|---|---|
| <br /> | Line break. |
| <img src ="image location" alt="alternate text" /> | Inserts an image into a web page. |