HTML Basic Examples

0

Here are some basic examples of HTML to help you understand how HTML elements work. These examples cover essential concepts like structure, text formatting, links, images, and lists.

1. Basic HTML Page Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic HTML Page</title>
</head>
<body>
    <h1>Welcome to My Webpage!</h1>
    <p>This is a simple HTML webpage.</p>
</body>
</html>
  • This is the basic structure of an HTML page, with a <head> section for metadata and a <body> section for visible content.
  • <h1> is a header tag, and <p> is used for paragraphs.

2. Text Formatting

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Formatting</title>
</head>
<body>
    <h1>Text Formatting in HTML</h1>
    <p><strong>This text is bold.</strong></p>
    <p><em>This text is italicized.</em></p>
    <p><u>This text is underlined.</u></p>
    <p><del>This text is strikethrough.</del></p>
</body>
</html>
  • <strong> makes text bold.
  • <em> makes text italicized.
  • <u> underlines the text.
  • <del> creates a strikethrough effect.

3. Creating Links

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Links in HTML</title>
</head>
<body>
    <h1>Links</h1>
    <p>Click <a href="https://www.example.com">here</a> to visit Example.com.</p>
    <p>Click <a href="mailto:someone@example.com">here</a> to send an email.</p>
</body>
</html>
  • <a> creates a link. The href attribute defines the destination.
  • mailto: can be used to create a link that opens the default email client.

4. Inserting Images

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Images in HTML</title>
</head>
<body>
    <h1>Image Example</h1>
    <img src="https://via.placeholder.com/150" alt="Placeholder Image">
</body>
</html>
  • <img> is used to insert an image.
  • src attribute defines the image source (URL or file path).
  • alt provides alternative text if the image can’t be displayed.

5. Creating Lists

Unordered List (Bulleted)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unordered List</title>
</head>
<body>
    <h1>Unordered List</h1>
    <ul>
        <li>Apples</li>
        <li>Bananas</li>
        <li>Oranges</li>
    </ul>
</body>
</html>
  • <ul> defines an unordered (bulleted) list.
  • <li> defines each list item.

Ordered List (Numbered)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ordered List</title>
</head>
<body>
    <h1>Ordered List</h1>
    <ol>
        <li>First step</li>
        <li>Second step</li>
        <li>Third step</li>
    </ol>
</body>
</html>
  • <ol> defines an ordered (numbered) list.
  • <li> defines each item in the list.

6. Creating a Table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table</title>
</head>
<body>
    <h1>HTML Table Example</h1>
    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
        </tr>
    </table>
</body>
</html>
  • <table> defines a table.
  • <tr> defines a table row.
  • <th> defines a table header.
  • <td> defines a table data (cell).

7. Forms and Input Fields

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Form</title>
</head>
<body>
    <h1>HTML Form</h1>
    <form action="/submit" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>
        
        <input type="submit" value="Submit">
    </form>
</body>
</html>
  • <form> defines a form.
  • <input> defines an input field, and type defines the kind of input (e.g., text, email, submit).
  • <label> provides a label for the input field.

Conclusion

These are some fundamental HTML examples that demonstrate how to build the basic structure of a webpage, format text, create links, insert images, and use lists and tables. HTML is very versatile and foundational for web development, and once you’re familiar with these basics, you can start combining them to build more complex web pages.