Beginner HTML - Types of Tags

In the last article, we introduced HTML.

Now that you understand what HTML tags are, let's explore some of the most commonly used tags.

These tags will help you structure and format your content effectively.

Headings

Headings are used to define titles and subtitles on your webpage. There are six levels of headings, from <h1> (most important) to <h6> (least important).

<h1>This is an h1 heading</h1>
<h2>This is an h2 heading</h2>
<h3>This is an h3 heading</h3>
<h4>This is an h4 heading</h4>
<h5>This is an h5 heading</h5>
<h6>This is an h6 heading</h6>

Each heading tag creates a different size and boldness of text, helping to organize content hierarchically.

Here's what they look like in a list:

Paragraphs

Paragraphs are used to group blocks of text together. Each paragraph is wrapped in a <p> tag.

<p>This is a paragraph of text in HTML. It is wrapped inside a paragraph tag.</p>
<p>Here is another paragraph with more text to illustrate how paragraphs are separated.</p>

Paragraphs help in making the text more readable by visually separating blocks of content.

Here's the output:

Links

Links, or anchor tags, are used to link to other webpages or resources. The <a> tag is used for this purpose.

<a href="https://www.codu.co">Visit Codú</a>
<a href="https://www.w3schools.com/">w3 Schools</a>

The href attribute specifies the URL of the page the link goes to.

Here's it in action:

Content Division Element

The <div> tag is a generic container for grouping elements. It doesn't change the content by itself but is useful for applying styles or organizing content.

<div style="background-color: lightblue; padding: 10px;">
  This is a div container with a light blue background.
</div>

Divs are often used in combination with CSS for layout and styling.

Here's the output of the above code:

Spans

The <span> tag is used to group inline elements. It's similar to <div>, but it doesn't start a new line.

<p>This is a <span style="color: red;">red</span> word in a sentence.</p>

Spans are useful for styling specific parts of a text within a paragraph.

Lists

There are two types of lists in HTML: unordered lists (<ul>) and ordered lists (<ol>). Each item in the list is wrapped in a <li> tag.

<ul>
  <li>Item one in an unordered list</li>
  <li>Item two in an unordered list</li>
</ul>

<ol>
  <li>First item in an ordered list</li>
  <li>Second item in an ordered list</li>
</ol>

Unordered lists display bullet points, while ordered lists display numbered items.

Here's the above code in action:

Buttons

The <button> tag creates a clickable button. Buttons are often used in forms and interactive elements.

<button>Click me!</button>
<button>Submit</button>

Buttons can be styled and programmed to perform actions using JavaScript. You'll see how it works when you start your JavaScript journey. But for now, you can treat it as a clickable element:

Images

The <img> tag is used to embed images in a webpage. It is a self-closing tag and requires the src attribute to specify the image source and the alt attribute for alternative text.

<img src="https://cdn.pixabay.com/photo/2017/08/10/00/40/stars-2616537_1280.jpg" alt="A starry night sky">

Alt text helps with accessibility and provides a description of the image for search engines.

Inputs

Input elements are used in forms to collect user data. The <input> tag can create various types of input fields, such as text boxes, radio buttons, and checkboxes.

<input type="text" placeholder="Enter text">
<input type="checkbox"> Check this box
<input type="radio" name="option" value="1"> Option 1

Inputs are self-closing tags and have different types based on the type attribute.

Textareas

The <textarea> tag is used for multi-line text input. Unlike <input>, it is not self-closing.

<textarea placeholder="Type your message here">Hello world!</textarea>

Textareas are useful for collecting long-form text from users.

Select and Option

The <select> tag creates a dropdown list, and the <option> tag defines the items in the list.

<select>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Dropdown lists are useful for limiting user input to predefined options.

Forms

The <form> tag is used to group input elements that will be submitted together.

<form>
  <input type="text" placeholder="First Name">
  <input type="text" placeholder="Last Name">
  <button type="submit">Submit</button>
</form>

Forms are essential for collecting user data and submitting it to a server.

Tables

The <table> tag is used to create tables. Inside a table, rows are defined with <tr> and cells with <td>.

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

Tables are useful for displaying structured data in a tabular format.

These are some of the most frequently used HTML tags. Understanding these basics will help you create and structure web content effectively.

As you continue learning, you'll discover more tags and how to use them to build complex web pages.

In the next article we will dive into HTML attributes and how they can help you alter your HTML elements.