HTML Basics: A Beginner’s Guide HTML (HyperText Markup Language) is the standard language used to create web pages. It provides the structure for web content, allowing you to define elements like head

by


HTML Basics: A Beginner’s Guide

HTML (HyperText Markup Language) is the standard language used to create web pages. It provides the structure for web content, allowing you to define elements like headings, paragraphs, links, images, and more. Here’s a concise guide to help you get started with HTML.

1. Structure of an HTML Document

An HTML document has a specific structure, starting with the <!DOCTYPE html> declaration. Below is a simple example of a basic HTML document:

html

Copy code

<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>My First HTML Page</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is my first HTML page!</p> </body> </html>

  • <!DOCTYPE html>: Declares the document type.
  • <html>: Root element of the HTML document.
  • <head>: Contains meta-information, including the title and character set.
  • <title>: Sets the title of the page (appears in the browser tab).
  • <body>: Contains the visible content of the webpage.

2. Common HTML Elements

Here are some of the most commonly used HTML elements:

  • Headings: HTML provides six levels of headings, from <h1> (most important) to <h6> (least important).

    html

    Copy code

    <h1>This is a Heading 1</h1> <h2>This is a Heading 2</h2>

  • Paragraphs: Use the <p> tag to create paragraphs.

    html

    Copy code

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

  • Links: Use the <a> tag to create hyperlinks. The href attribute specifies the URL.

    html

    Copy code

    <a href=”https://www.example.com”>Visit Example</a>

  • Images: Use the <img> tag to embed images. The src attribute specifies the image URL, and alt provides alternative text.

    html

    Copy code

    <img src=”https://studydaddy.com/question/image.jpg” alt=”Description of the image”>

  • Lists: HTML supports ordered (<ol>) and unordered lists (<ul>).

    html

    Copy code

    <ul> <li>Item 1</li> <li>Item 2</li> </ul> <ol> <li>First item</li> <li>Second item</li> </ol>

3. Attributes

HTML elements can have attributes that provide additional information. Attributes are specified within the opening tag:

html

Copy code

<a href=”https://www.example.com” target=”_blank”>Open in a new tab</a>

In this example, the target=”_blank” attribute opens the link in a new tab.

4. HTML Forms

Forms are used to collect user input. The <form> tag encapsulates form elements like text fields, radio buttons, checkboxes, and submit buttons.

html

Copy code

<form action=”/submit” method=”POST”> <label for=”name”>Name:</label> <input type=”text” id=”name” name=”name”> <input type=”submit” value=”Submit”> </form>

  • action: The URL where the form data will be sent.
  • method: The HTTP method to use (GET or POST).

5. Semantic HTML

Using semantic HTML elements improves accessibility and SEO. Examples include:

  • <header>: Defines a header for a document or section.
  • <footer>: Defines a footer for a document or section.
  • <article>: Represents a self-contained piece of content.
  • <section>: Represents a thematic grouping of content.

html

Copy code

<header> <h1>My Website Header</h1> </header> <section> <h2>About Us</h2> <p>Information about the website.</p> </section> <footer> <p>© 2024 My Website</p> </footer>

Conclusion

HTML is the foundation of web development. By mastering the basics, you can create structured and meaningful web pages. As you become more comfortable, consider exploring CSS for styling and JavaScript for interactivity. With practice, you’ll be able to build more complex and engaging websites. Happy coding!