What is Html?

HTML, or HyperText Markup Language, is the standard language used to create web pages. It provides the structure of a webpage, allowing you to define elements such as headings, paragraphs, links, images, and more. HTML is a fundamental technology that, along with CSS and JavaScript, forms the backbone of the web.

Basic Structure of an HTML Document

An HTML document is structured with a series of nested elements. Here is a basic example of an HTML document:

<!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 a paragraph of text on my first HTML page.</p>
  </body>
</html>

Explanation of the Basic Structure

<!DOCTYPE html>: This declaration defines the document type and version of HTML.
<html>: The root element that contains all other HTML elements.
<head>: Contains meta-information about the document, such as the character set, viewport settings, and the title.
<title>: Sets the title of the webpage, which appears in the browser tab.
<body>: Contains the content of the webpage, such as text, images, and links.

Common HTML Tags

Headings

Headings are used to define the titles and subtitles on a webpage. HTML provides six levels of headings, from <h1> to <h6>, with <h1> being the highest level.

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>

Paragraphs

Paragraphs are defined using the <p> tag. They are used to group blocks of text.

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

Links

Links are created using the <a> tag. The href attribute specifies the URL of the page the link goes to.

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

Images

Images are embedded using the <img> tag. The src attribute specifies the path to the image file, and the alt attribute provides alternative text for the image.

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

Lists

HTML supports ordered (numbered) and unordered (bulleted) lists.

Unordered List

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

Ordered List

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Advanced HTML Elements

Tables

Tables are used to display data in a tabular format. They are created using the <table> tag, along with <tr> for table rows, <th> for table headers, and <td> for table data cells.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Forms

Forms are used to collect user input. They are created using the <form> tag, along with various input elements such as <input>, <textarea>, and <button>.

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <button type="submit">Submit</button>
</form>

Conclusion

HTML is the foundation of web development. By understanding and using HTML tags, you can create structured and well-formatted web pages. As you become more familiar with HTML, you can explore additional tags and attributes to enhance your web pages further.