HTML Coding Questions and Answers

Write HTML code to create a simple web page with a heading and a paragraph.

Use the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Page</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a simple paragraph on the page.</p>
</body>
</html>

Write HTML code to create a form with a text input, radio buttons, and a submit button.

Use the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Example</title>
</head>
<body>
    <form action="/submit" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <br>
        <label>Gender:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label>
        <br>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

Write HTML code to create a table with three columns and two rows.

Use the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Example</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
            <td>Row 2, Cell 3</td>
        </tr>
    </table>
</body>
</html>

Write HTML code to create a hyperlink that opens a new tab.

Use the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Link Example</title>
</head>
<body>
    <a href="https://www.example.com" target="_blank">Visit Example.com</a>
</body>
</html>

Write HTML code to create an ordered list with three items.

Use the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ordered List Example</title>
</head>
<body>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
</body>
</html>

Write HTML code to create an unordered list with four items.

Use the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unordered List Example</title>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</body>
</html>

Write HTML code to create a form with a textarea.

Use the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Textarea Example</title>
</head>
<body>
    <form action="/submit" method="post">
        <label for="message">Message:</label>
        <textarea id="message" name="message"></textarea>
        <br>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

Write HTML code to include an image with an alt attribute.

Use the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Example</title>
</head>
<body>
    <img src="image.jpg" alt="A descriptive text for the image">
</body>
</html>

Write HTML code to embed a YouTube video.

Use the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Example</title>
</head>
<body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</body>
</html>

How do you create a table with a header and two rows in HTML?

Use the following HTML code:


    
        
            Header 1
            Header 2
        
    
    
        
            Row 1, Cell 1
            Row 1, Cell 2
        
        
            Row 2, Cell 1
            Row 2, Cell 2

How do you create a form with a text input and a submit button in HTML?
Use the following HTML code:
```
    Name:
    
    

        
```
How do you create a hyperlink that opens in a new tab in HTML?
Use the following HTML code:
```
Visit Example.com
        
```

Header 1	Header 2
Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

How do you create a dropdown menu in HTML?

Use the following HTML code:

How do you create an ordered list with three items in HTML?
Use the following HTML code:
```
    First Item
    Second Item
    Third Item

        
```

Write HTML code to create a div with a class "box" and some text inside it.

Use the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div Example</title>
</head>
<body>
    <div class="box">
        <p>This is a div with a class "box".</p>
    </div>
</body>
</html>

Write HTML code to create a header with a navigation menu.

Use the following code:

                    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Navigation Example</title>
    </head>
    <body>
        <header>
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </header>
    </body>
    </html>

Write HTML code to create a list of links.

Use the following code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Links Example</title>
    </head>
    <body>
        <ul>
            <li><a href="https://www.example1.com">Example 1</a></li>
            <li><a href="https://www.example2.com">Example 2</a></li>
            <li><a href="https://www.example3.com">Example 3</a></li>
        </ul>
    </body>
    </html>

Write HTML code to create a section with a heading and a paragraph.

Use the following code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Section Example</title>
    </head>
    <body>
        <section>
            <h2>Section Heading</h2>
            <p>This is a paragraph within a section.</p>
        </section>
    </body>
    </html>

Write HTML code to create a div with a class and some content.

Use the following code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Div Example</title>
    </head>
    <body>
        <div class="my-class">
            <p>This is a div with a class and some content.</p>
        </div>
    </body>
    </html>

Write HTML code to create an iframe embedding a video.

Use the following code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Iframe Example</title>
    </head>
    <body>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </body>
    </html>