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 the content within the body element is displayed by the browser.
- Simple paragraph
- This example demonstrates how the 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 formatting issues in HTML.
- Line Break
- This example demonstrates the use of line breaks in HTML documents.
- Title
- This example demonstrates the tags used to display titles 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 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.
- 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 border between frames, you will find that the border cannot be moved.
- Navigation framework
- This example demonstrates how to create a navigation framework. The navigation framework includes a list of links that target the second frame. The file named "contents.htm" contains three links.
- Inline Frame
- This example demonstrates how to create an inline frame (frame within an HTML page).
- Navigating to a Specific Section Within a Frame
- This example demonstrates two frames. One frame contains links to a specific section in another file. The section 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 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 specified in advance.)
- 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 fields and confirmation button
- This example demonstrates how to add a form to a page. This form contains two input fields 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 the paragraph.
- Adjust image size
- This example demonstrates how to adjust the size of images.
- 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 links
- This example demonstrates how to use an image as a link.
- Create an image map
- This example shows how to create an image map with clickable areas. Each area is a hyperlink.
- Convert an image to an image map
- This example shows how to set a common image as an image map.
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
