HTML Examples

This page is intended to demonstrate many of the common HTML tags. Open the 'Source Code' for this page so you can inspect the HTML tags that define how the items on this page are individually rendered.

While there are several HTML tags illustrated on this page, there are two things you should do as you have time.

First, search the Internet for lists of HTML tags and skim over a to see what other tags might be useful to you.

Second, on many of the pages you visit, right click on them an select 'Source Code'. That will open a new tag in your browser that shows the HTML code used for that page. Skim over it to get familiar with how tags are used to organize how a page is laid out and organized.


Below and to the right is an image. You will see an image that is defined with the img tag.

In the CSS code when the image is defined, the optional 'style' is included and set with the float command. Float defines how text should float around other objects like text. In this case, the image is displayed to the right while text floats to it's left.

Examples of HTML and CSS

Be sure to view the source
code to see how each opject
is positioned, sized and
defined in adequate detail


Cool Stuff

The purpose of this page is to illustrate many of the sections of HTML and CSS, and their uses.

The following pages/files constitute this example;

Let's first look at the code ('source code') of this page. You can open a text editor and open this .html file to inspect it, or you can press F12 to go into Developer mode, and pressing F12 again will toggle the developer tools off. You can also click anywhere on the page and left click then select the 'view source code' option. Each of these approaches is supported by most browsers.

Note that https://eastmanreference.com/complete-list-of-html-tags contains a nice list of HTML tags with definitions.

Below is an unordered list. This is an unordered (uses dot-points to indicate each item) list of items. the <ul> tag begins the list and it is terminated by the end-tag. In between are the <li> tagged items.

Below is an ordered list. This is an ordered (uses sequential numbers to indicate each item) list of items. the <ol> tag begins the list and it is terminated by the end-tag. In between are the <li> tagged items.

  1. Begin with
  2. Move to
  3. End with

Some Other Cool Things

You can place a span tag inside or along side anything. It is a way of grouping things so you can manage them as a group. The difference between a div and a span is that a div forces the end of a display line while a span does not.


Examples of sectional tags

This sets the document characteristics. This must be the first line in the file and with no blank lines above it

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

HTML - This usually does not have any parameters

HEAD - This usually does not have any parameters

STYLE - This usually does not have any parameters

BODY - This usually does not have any parameters

SCRIPT


Examples of Meta Tags

meta

<meta charset="UTF-8">

title

<title>Examples of HTML</title>

link

<link href="css/examples.css" rel="stylesheet" type="text/css" />

Common Tags

a href - anchor hyper-reference. This tag encapsulates something (text, and image...) that when clicked will jump to the hyperlink defined in the tag.

The syntax is often as shown below. The actual URL to jump to is in quotes, and a common parameter is target which simply means open this new page in a new tab in the browser. Then there is the material that is to be clicked on ('Click Here') followed by the end portion of the tag pair. Note that rather than the text, an 'href' tag can apply to images, and most objects that take up screen space.

<a href='the.url.com' target='_blank'>Click Here</a>

img - Used to place an image on the screen. There is no tag pair, instead the img tag by it's self contains all the information about how to render the image. As you can see, the img tag really just needs to identify which image to display.

<img src='my.pic.png'>

style - The style parameter is not an HTML tag, but rather a way to apply CSS directives to a specific object 'in-line' So in the case of an image, we can add the style parameter and include CSS that will be applied to this one image only.

<img src='my.pic.png' script='width:96px;margin-left:32px'>

hr - Horizontal Rule. This is simply a horizontal line that can be used to separate sections.


Container Tags

ul & ol - Unordered List & Ordered List.

These create bullet points that use either dot-points or numbers. Each is a paired tag set.

li - List Item. In both the ul and ol tags you encapsulate li tags. Each li is a bullet point that can contain any sort of objects

table - A table is a grid structure of some number of rows and columns. Rows are horizontal and columns are vertical. Tables are a way to organize information and position objects.

A table usually has many encapsulated tags. These include tr (table row) and td (table data). When building a table you do it top down a row at a time.


<table>
Begin the table
Begin the first table row (top most)
    <tr>
Add 3 td (the actual cells in the grid)
        <td>Some stuff</td>
        <td>Some more stuff</td>
        <td>Some left-over stuff</td>
Close the first tr.
    </tr>
Begin a new, 2nd row
    <tr>
Include 3 td (cells)
        <td>Stuff that did not make it into the other stuff</td>
        <td>Other stuff, different than the previous stuff</td>
        <td>The last of the available stuff</td>
End the second row
    </tr>
Close the table
</table>

Note that there are the same number of cells in each row. You can actually merge cells either on a row or a column. That is done with the colspan and rowspan parameters.

div - A division is a way to group things so they can be manipulated all at once. It is in effect a square on the screen that contains other things. Divs are used for positioning, displaying or hiding. A div always ends with a carriage return before the next object.

span - Span is the same as a div, except that it does not end with a carriage return.

fieldset - A fieldset is another way to group things. When used with a legend tag-pair the legend is displayed on the border at the top-right of the fieldset.

Legend - A legend is a box that can be used as a label.


Other HTML tags

nobr - NOBRake is a tag pair. Everything enclosed in nobr tag pairs will not allow a carriage return that would otherwise be inserted automatically.

pre - Preformatted. Formatting that is usually adjusted when displayed is not automatically included. This is often used to display quotes and programming code.

b - Bold. Text within b tag pairs is displayed as bold.

i - Italics. Text within i tag pairs is displayed as Italics.

u - Underline. Text within u tag pairs is displayed as underline.