HTML Basics: Tags, Divisions, Forms & More!

Hey there! Are you interested in creating a website but don't know where to start? Well, look no further! Understanding HTML is the first step toward building a website. In this blog, we'll cover the basic HTML tags that are used in almost every website, from simple paragraphs to stylish headings. Don't worry if you're new to this - we'll explain everything in simple terms that even a beginner can understand. So, let's dive into the world of HTML and get started!

HTML Document Structure

HTML documents are like a recipe that web browsers follow to create web pages. Just like a recipe has different ingredients and steps, an HTML document has different tags and elements that give structure and meaning to web content.

The HTML document structure is made up of different parts such as the <!DOCTYPE> declaration, <html> tag, <head> section, and <body> section. These parts work together to provide information about the web page and to structure the content that is displayed.

Think of the <!DOCTYPE> declaration as the title of the recipe, the <html> tag as the main ingredient, the <head> section as the preparation instructions, and the <body> section as the finished dish. By following this structure, web developers can create web pages that are easy to read, navigate, and understand.

The <!DOCTYPE html> declaration: This is the first line of the HTML document and it informs the browser that the document is an HTML5 document.
The <html> element: This is the root element of the HTML document and it contains all the other elements.
The <head> element: This element contains meta-information about the document, such as the title of the webpage, keywords, and descriptions. It also includes links to external files, such as stylesheets and scripts.
The <body> element: This element contains all the visible content of the webpage, such as text, images, videos, and other media.

Inside the <body> element, you can add various HTML tags like <p>, <h1>, <img>, <ul>, <li>, <div>, <span> etc. to create the desired structure and format for your content.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Paragraph</p>
  </body>
</html>

Basic HTML tags

Basic Tags are fundamental HTML tags that are commonly used in web development. They are the building blocks of any webpage and are essential for creating well-structured and visually appealing content. In this section, we will discuss some of the most common Basic Tags used in HTML.

Headings: Headings are used to adding titles or subtitles to a webpage. They are defined using the <h1> to <h6> tags, with <h1> being the most important and <h6> being the least important. Headings not only help to structure the content but also play a significant role in SEO.
```
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
```
Paragraphs: The <p> tag is used to define a paragraph. It is the most commonly used tag for text content on a webpage. Using this tag helps to structure the content and make it easier to read and understand.
```
  <p>This is a paragraph.</p>
```
Line Breaks: The <br> tag is used to insert a line break in the content. It is used when you want to move the text to the next line without creating a new paragraph. It is commonly used for short phrases or quotes.
```
  <p>This is the first line.<br>
  This is the second line.</p>
```
Horizontal Rules: The <hr> tag is used to create a horizontal line on a webpage. It is commonly used to separate sections or to add visual interest to the page.
```
  <hr>
```
Lists: Lists are used to organize content into ordered or unordered lists. The <ul> tag is used for unordered lists, while the <ol> tag is used for ordered lists. Each item in the list is defined using the <li> tag.
- Unordered List :
```
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
```
- Ordered List :
```
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ol>
```
Anchors: The <a> tag is used to create hyperlinks to other web pages or specific locations on the same page. It is commonly used to create navigation menus or to link to external resources.
```
  <a href="https://www.example.com">Link</a>
```
Images: The <img> tag is used to add images to a webpage. It requires a source attribute that specifies the location of the image file. Images can be used to add visual interest to the page or to provide additional context to the content.
```
  <img src="image.jpg" alt="Description of image">
```
Span: The <span> tag is used to define a small section of text within a larger block of text. It is commonly used to apply a specific style or formatting to a section of text.
```
  <span>Some text here</span>
```

Divisions and Sections

Web pages are typically divided into different sections to organize the content and structure. HTML provides several tags that allow you to create divisions and sections within a web page.

<div> tag: This tag is used to define a section of the HTML document. You can use it to group and organize related content. The <div> tag is a container tag that doesn't have any semantic meaning on its own, but you can use CSS to style its content.
```
  <div>
    <h2>Divisions Example</h2>
    <p>This is an example of using the div tag to create a division or section within a web page.</p>
  </div>
```
<section> tag: This tag is used to define a section of a document that groups related content. Unlike the <div> tag, the <section> tag has semantic meaning and should be used to define sections of a document that can stand alone.
```
  <section>
    <h2>Section Example</h2>
    <p>This is an example of using the section tag to create a section within a web page.</p>
  </section>
```
<article> tag: This tag is used to define an independent, self-contained piece of content that can be reused on different web pages. It's typically used for blog posts, news articles, and other similar content.
```
  <article>
    <h2>Article Example</h2>
    <p>This is an example of using the article tag to create an article within a web page.</p>
  </article>
```

<header> tag: This tag is used to define the header of a web page or a section of a web page. The header usually contains the page's logo, navigation links, and other important information.

  <header>
    <h1>Header Example</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

<nav> tag: This tag is used to define a set of navigation links within a web page.

  <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

<footer> tag: This tag is used to define the footer of a web page or a section of a web page. The footer usually contains copyright information, contact information, and other similar content.
```
  <footer>
    <p>Copyright &copy; 2022</p>
  </footer>
```

Overall, these tags help to create a more organized and structured webpage, making it easier for users to navigate and find the content they are looking for.

HTML Forms

HTML Forms are an essential part of the web development process, allowing users to input data and interact with web pages. Form elements like input fields, text areas, and dropdown menus make it easy for users to provide information and submit it to the server.

The <input> tag is one of the most commonly used form elements in HTML. It allows users to enter data in a variety of formats, including text, numbers, and dates. The type attribute specifies the type of input field, such as "text" or "email". You can also use the "placeholder" attribute to provide a hint to the user about what kind of input is expected.

<input type="text" id="username" name="username" required>

The <label> tag is used to provide a label for an input field, making it easier for users to understand what information is required. The "for" attribute links the label to the input field using the "id" attribute.

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

Text areas are used to allow users to input longer amounts of text. The <textarea> tag creates a box in which users can type their input. You can set the rows and columns attributes to control the size of the text area.

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

Dropdown menus allow users to select from a list of options. The <select> tag creates a dropdown menu, while the <option> tag is used to specify the individual options.

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="USA">USA</option>
  <option value="Canada">Canada</option>
  <option value="Mexico">Mexico</option>
</select>

When designing a form, it's important to include attributes like "action" and "method" to specify what happens when the user submits the form. The "action" attribute specifies the URL where the form data is sent, while the "method" attribute specifies whether the data is sent using GET or POST.

HTML5 introduces new form validation attributes like "required" and "pattern". The "required" attribute ensures that the user has entered information into a required field before submitting the form. The "pattern" attribute allows you to specify a regular expression that the input must match, helping to ensure that the input is in the correct format.

<form action="submit.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea>

  <button type="submit">Submit</button>
</form>

In conclusion, HTML forms and form elements are crucial for allowing users to interact with web pages and provide data. By using the appropriate form tags and attributes, you can design forms that are easy to use and ensure that the data submitted by users is accurate and in the correct format.

Conclusion

Well, folks, we have reached the end of our HTML journey! We have explored the basic tags like <p>, <h1>-<h6>, and <img> that you will see on almost every website out there. We've also delved into some fancy-schmancy tags like <section>, <nav>, and <footer> that makes your website look all professional and put-together.

And let's not forget about forms! We've talked about how to make your website interactive by adding forms and form elements like <input>, <label>, and <textarea>. We've even thrown in some HTML5 attributes like "required" and "pattern" to help you validate your user input and make sure no funny business goes on behind the scenes.

So, my dear friends, you now have a basic understanding of HTML tags and how to use them. Whether you're building your first website or just want to impress your friends with your newfound HTML knowledge, I hope this blog has helped you on your journey.

Until next time, keep coding and stay curious!

HTML Basics: From Headings to Forms and Everything in Between

A Layman's Guide to HTML Tags and Elements for Building Your Own Website

Table of contents

HTML Document Structure

Basic HTML tags

Divisions and Sections

HTML Forms

Conclusion