Welcome to My Website

Purpose of this website

To demonstrate and explain HTML elements and tags for the sole purpose of training and learning.

Who Am I?

My name is Timothy Chan

"This is my quotation and start in becoming a great systems engineer."

HTML Elements and Tags Explained

In this webpage, we will cover some basic and important HTML elements and tags, explaining their purpose and usage with examples.

1. <html> Element

The <html> tag is the root element of an HTML document. It wraps all other content on the page.

<html>...</html>

2. <head> Element

The <head> element contains meta-information about the webpage, such as the title, character set, and linked resources like stylesheets or scripts.

<head>...</head>

3. <title> Element

The <title> tag defines the title of the webpage, which appears in the browser tab. It is placed inside the <head> element.

<title>Page Title</title>

4. <body> Element

The <body> tag represents the main content of the webpage that is visible to the user. It wraps all visible elements like headings, paragraphs, images, etc.

<body>...</body>

5. <h1> to <h6> Elements

HTML headings are defined with the <h1> to <h6> tags, where <h1> is the highest level (largest) heading, and <h6> is the lowest level (smallest).

<h1>Main Heading</h1>

6. <p> Element

The <p> element defines a paragraph of text. It automatically adds some space before and after the paragraph for readability.

<p>This is a paragraph.</p>

7. <a> (Anchor) Element

The <a> tag defines a hyperlink, which links to another webpage or a location within the same page. The href attribute specifies the link’s destination.

<a href="https://example.com">Click here</a>

8. <img> Element

The <img> tag is used to embed images in a webpage. It requires the src attribute to specify the path to the image file and the alt attribute for accessibility.

<img src="image.jpg" alt="Description of the image">

9. <ul> and <ol> Elements

The <ul> element defines an unordered (bulleted) list, and the <ol> element defines an ordered (numbered) list. Each list item is placed inside the <li> (list item) tag.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

10. <table> Element

The <table> tag defines a table. Inside a table, we use <tr> for table rows, <th> for header cells, and <td> for regular cells.

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
</table>

11. <div> Element

The <div> tag defines a block-level container for grouping HTML elements together. It is often used to style sections of a webpage using CSS.

<div>This is a container</div>

12. <span> Element

The <span> tag is an inline container used to group text or elements for styling purposes. Unlike <div>, <span> does not break the flow of the document.

<span>Styled text</span>

13. <br> Element

The <br> tag inserts a line break, which moves content to the next line.

<br>

14. <form> Element

The <form> tag is used to create an HTML form for collecting user input. It can contain form elements like <input>, <textarea>, and <button>.

<form action="/submit" method="post">
    <input type="text" name="username">
    <button type="submit">Submit</button>
</form>

15. <input> Element

The <input> tag is used to create interactive elements in forms. It can be of various types like text, password, email, checkbox, etc.

<input type="text" placeholder="Enter your name">