HTML Examples

HTML Basic Tag Examples

A simple HTML file
This example is a very simple HTML file that uses the fewest possible HTML tags. It demonstrates how content within the body element is displayed by the browser.
Simple paragraph
This example demonstrates how text in paragraph elements is displayed by the browser.
More paragraphs
This example demonstrates some default behaviors of paragraph elements.
Poetry issue
This example demonstrates some issues with HTML formatting.
Line Break
This example demonstrates the use of line breaks in HTML documents.
Title
This example demonstrates how to display the title tags in an HTML document.
Centered title
This example demonstrates a centered title.
Horizontal line
This example demonstrates how to insert a horizontal line.
Hidden comments
This example demonstrates how to insert hidden comments in the HTML source code.
Background color
This example demonstrates how to add a background color to an HTML page.

Example Explanation

HTML text formatting example

Text formatting
This example demonstrates how to format text in an HTML file.
Preformatted text
This example demonstrates how to control empty lines and spaces using the pre tag.
"Computer output" tags
This example demonstrates the display effects of different "computer output" tags.
Address
This example demonstrates how to write addresses in an HTML file.
Abbreviations and initials
This example demonstrates how to implement abbreviations or initials.
Text direction
This example demonstrates how to change the direction of text.
Block quote
This example demonstrates how to implement quotes of different lengths.
Deleted text effect and inserted text effect
This example demonstrates how to mark deleted text and inserted text.

Example Explanation

HTML link example

Create hyperlinks
This example demonstrates how to create links in an HTML document.
Use images as links
This example demonstrates how to use images as links.
Open links in a new browser window
This example demonstrates how to open a page in a new window so that visitors do not have to leave your site.
Link to different locations on the same page
This example demonstrates how to use links to jump to another part of the document.
Jump out of the frame
This example demonstrates how to jump out of the frame if your page is fixed within the frame.
Create email link
This example demonstrates how to link to an email. (This example will only work after the email client program is installed.)
Create email link 2
This example demonstrates more complex email links.

Example Explanation

HTML frame example

Vertical frame
This example demonstrates how to create a vertical frame using three different documents.
Horizontal frame
This example demonstrates how to create a horizontal frame using three different documents.
How to use the <noframes> tag
This example demonstrates how to use the <noframes> tag.
Mixed frame structure
This example demonstrates how to create a frame structure containing three documents, and mix them in rows and columns at the same time.
Frame structure with noresize="noresize" attribute
This example demonstrates the noresize attribute. In this example, the frame is not resizable. When you drag the mouse over the frame borders, you will find that the borders cannot be moved.
Navigation frame
This example demonstrates how to create a navigation frame. The navigation frame contains a list of links that target the second frame. The file named "contents.htm" contains three links.
Inline Frames
This example demonstrates how to create inline frames (frames within an HTML page).
Jumping to a Specific Section Within a Frame
This example demonstrates two frames. One frame sets a link to a specified section in another file. The section specified in the 'link.htm' file is identified using <a name="C10">.
Navigating to a Specific Section Using Frames
This example demonstrates two frames. The left navigation frame contains a list of links, which target the second frame. The second frame displays the linked document. The links in the navigation frame point to the sections specified in the target file.

Example Explanation

HTML Table Examples

Table
This example demonstrates how to create tables in an HTML document.
Table Borders
This example demonstrates various types of table borders.
Table Without Borders
This example demonstrates a table without borders.
Table Headers (Heading) in the Table
This example demonstrates how to display table headers.
Empty Cells
This example demonstrates how to handle empty cells with ' '.
Table with Caption
This example demonstrates a table with a caption (caption).
Table Cells Spanning Rows or Columns
This example demonstrates how to define table cells that span rows or columns.
Tags Inside Tables
This example demonstrates how to display elements within different elements.
Cell Padding (Cell padding)
This example demonstrates how to use Cell padding to create space between cell content and its border.
Cell Spacing (Cell spacing)
This example demonstrates how to use Cell spacing to increase the distance between cells.
Adding Background Color or Background Image to the Table
Adding Background to the Table
Adding Background Color or Background Image to Table Cells
Adding Background to One or More Table Cells
Arranging Content in Table Cells
This example demonstrates how to use the 'align' attribute to arrange cell content to create an attractive table.
Frame (frame) Attribute
This example demonstrates how to use the 'frame' attribute to control the border around the table.

Example Explanation

HTML List Examples

Unordered Lists
This example demonstrates unordered lists.
Ordered Lists
This example demonstrates ordered lists.
Different Types of Unordered Lists
This example demonstrates an unordered list.
Different Types of Ordered Lists
This example demonstrates different types of ordered lists.
Nested List
This example demonstrates how to nest lists.
Nested List 2
This example demonstrates more complex nested lists.
Definition List
This example demonstrates a definition list.

Example Explanation

HTML Form and Input Examples

Text field (Text fields)
This example demonstrates how to create a text field in an HTML page. Users can write text in the text field.
Password field
This example demonstrates how to create a password field in HTML.
Checkboxes
This example demonstrates how to create checkboxes in HTML. Users can select or deselect checkboxes.
Radio buttons
This example demonstrates how to create radio buttons in HTML.
Simple dropdown list
This example demonstrates how to create a simple dropdown list box in an HTML page. The dropdown list box is an optional list.
Another dropdown list
This example demonstrates how to create a simple dropdown list with a pre-selected value. (Translator's note: A pre-selected value refers to a preferred option that is pre-set.)
Text area (Textarea)
This example demonstrates how to create a text area (a multi-line text input control). Users can write text in the text area. The number of characters that can be written in the text area is unlimited.
Create button
This example demonstrates how to create buttons. You can customize the text on the button.
Fieldset around data
This example demonstrates how to draw a titled box around data.

Form example

Form with input boxes and confirmation button
This example demonstrates how to add a form to a page. This form contains two input boxes and a confirmation button.
Form with checkboxes
This form contains two checkboxes and a confirmation button.
Form with radio buttons
This form contains two radio buttons and a confirmation button.
Send email from form
This example demonstrates how to send an email from a form.

Example Explanation

HTML image example

Insert image
This example demonstrates how to display images on a web page.
Insert images from different locations
This example demonstrates how to display images from different folders or servers on a web page.
Background image
This example demonstrates how to add a background image to an HTML page.
Align images
This example demonstrates how to align images in text.
Float image
This example demonstrates how to float an image to the left or right of a paragraph.
Adjust image size
This example demonstrates how to adjust the size of an image to different dimensions.
Display alternative text for images
This example demonstrates how to display alternative text for images. When the browser cannot load the image, the alternative text attribute tells readers what information is lost. It is a good habit to add alternative text attributes to all images on the page.
Make image link
This example demonstrates how to use an image as a link.
Create image map
This example shows how to create an image map with clickable areas. Each area is a hyperlink.
Convert image to image map
This example shows how to set a common image as a image map.

Example Explanation

HTML background example

Well-matched background and colors
An example of a well-matched background and text color, making the text on the page easy to read.
Poorly matched background and colors
An example where a bad combination of background color and text color makes the text on the page difficult to read.
Highly Usable Background Image
Examples where background images and text colors make the page text easy to read.
Highly Usable Background Image 2
Another example where background images and text colors make the page text easy to read.
Poorly Usable Background Images
Examples where background images and text colors make the page text difficult to read.

Example Explanation

HTML Style (style) Example

Styles in HTML
This example demonstrates how to format HTML using style information added to the <head> section.
Links Without Underlines
This example demonstrates how to create a link without an underline using the style attribute.
Link to an External Stylesheet
This example demonstrates how to link to an external stylesheet using the <link> tag.

Example Explanation

HTML Header (head) Example

Document Title
The title information inside the header element will not be displayed in the browser window.
One target, all links
This example shows how to use the base tag to open all tags in a new window using the page.

Example Explanation

HTML Meta Information (meta) Example

Document Description
Information in the Meta element can describe the HTML document.
Document Keywords
Information in the Meta element can describe the keywords of the document.
Redirect
This example demonstrates: Redirecting users to another address when the URL has changed.

Example Explanation

HTML Script (Script) Example

Insert a Script
This example demonstrates how to insert a script into an HTML document.
Running on Browsers That Do Not Support Scripts
This example demonstrates how to deal with browsers that do not support scripts.

Example Explanation