The essential HTML elements and how to use them to build your websites.

Introduction

When it comes to building websites, HTML, CSS and Js are the foundation upon which all other frameworks and technologies rest and build. HTML, CSS, and JavaScript all have elements but in this article, we shall discuss HTML elements. Elements are the building blocks of websites.

What are elements and why are they important?

HTML elements are used to create the structure and layout of web pages. They are used to define the different components of a web page, such as headings, paragraphs, images, and links. Each element has its own specific purpose and behavior and can be used in combination with other elements to create more complex and dynamic web pages.

As a web developer, it is essential to have a solid understanding of the various HTML elements and how they can be used to build websites. In this article, we will take a look at the most essential HTML elements and how you can use them to build your websites.

The elements with code examples

Meta Element: The meta element, <meta>, is used to provide metadata about the web page. It is used to specify information such as the page's description, keywords, and character set. It is important for SEO and for providing accurate information about the page to search engines and other web crawlers.

<meta name="description" content="This is a sample web page">
<meta name="keywords" content="sample, web page, example">
<meta charset="UTF-8">

Heading Element: The heading element, which ranges from <h1> through <h6>, is used to create the headings and subheadings on a web page. <h1> is the most important heading and largest heading and thus should be used for the main heading of the page, while <h6> is the least important and smallest heading. It should be used for subheadings. Don't be confused by the numbering system to think <H6> is larger than <H1>

<h1>This is a main heading</h1>
<h2>This is a subheading</h2>

Paragraph Element: The paragraph element, <p>, is used to create paragraphs of text on a web page. It is one of the most commonly used elements on a web page and is essential for creating readable and well-structured content, especially when writing a blog or long-format text. You can break it into paragraphs using this element.

<p>This is a paragraph of text. It can contain multiple sentences and be used to provide more information about the topic at hand.</p>

Anchor Element: The anchor element, <a>, is used to create links between web pages and connections to resources. It is an essential element for navigation and creating a seamless user experience within a website, when linking resources, it is commonly placed and can be used in the head section of the web page.

// This links to a web page called home.html
<a href="home.html">Home</a>

// This links to a stylesheet called style.css
<a href="assets/css/style.css" rel="stylesheet"/>

Image Element: The image element, <img>, is used to embed images on a web page from a remote location. It has a "src" attribute, which is used to specify the image's source. The "alt" attribute is also used to provide alternative text for the image, which is important for accessibility and improves the SEO ranking of the website.

<img src="image.png" alt="A beautiful landscape">

List Element: The list element, <ul> stands for unordered list while <ol> stands for ordered list meaning it's chronological and there's a deliberate ranking of items using numbers or roman numerals. Both <ul> and <ol> are used to create lists. Both elements have <li> which stands for "list" as children, and they are used to create the individual list items.

// 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>

Form Element: The form element, <form>, is used to create forms on a web page. It is used together with input elements, such as text fields and buttons, and organized appropriately to collect user information and input which is then sent to the back end

<form action="submit-form.php">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>

Input Element: The input element, <input>, is used to create various types of form fields, such as text fields, checkboxes, and buttons. It has a "type" attribute that is used to specify the type of input field, and "name and "id" attributes that are used to identify the input field and its value in the form data.

<input type="text" id="name" name="name">
<input type="checkbox" id="newsletter" name="newsletter">
<input type="submit" value="Submit">

Table Element: The table element, <table>, is used to create tables. It is often used to display data in a structured and organized manner. It contains various other elements, such as <tr> for table rows, <th> for table headers, and <td> for table data.

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

Select Element: The select element, <select>, is used to create drop-down menus on a web page. It is often used in conjunction with the option element, <option>, to create a list of options for the user to choose from.

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

Textarea Element: The textarea element, <textarea>, is used to create multi-line text fields on a web page. It is often used for longer-form inputs, such as comments or feedback. It has "rows" and "cols" attributes that can be used to specify the number of rows and columns in the textarea.

<textarea rows="5" cols="50">Enter your comments here...</textarea>

Label Element: The label element, <label>, is used to provide a text description for form elements. It has a "for" attribute that is used to associate the label with a specific form element. This improves accessibility and makes it easier for users to understand the purpose of the form element.

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

Conclusion

These essential elements can greatly enhance the functionality and user experience of the website. When these elements are used appropriately you could whip up one hell of a protein milkshake for a website. After understanding how and when to use these elements, and the basics of HTML, CSS, and Js you can build more advanced and dynamic websites with the aid of JavaScript frameworks like React.js

Happy Coding 🚀