You are currently viewing HTML Essentials: Building Blocks of the Web

HTML Essentials: Building Blocks of the Web

HTML-course || HTML Basics

Welcome to the HTML Basics guide! Learn HTML essentials to get started in frontend development. This document will introduce you to the fundamentals of HTML (Hypertext Markup Language), the standard language for creating web pages.

Introduction to HTML

HTML is a markup language used to structure content on the web. It consists of elements represented by tags that define the structure of a web page.

HTML Document Structure

A basic HTML document structure includes the following:

<!DOCTYPE html>
<html>
<head>
    <title>Document Title</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

HTML Elements
Elements are the building blocks of HTML. They are represented by tags.

  1. Paragraph 
<p>This is a paragraph.</p>
  1. Image 
<img src="https://dtechnologys.com/wp-content/uploads/2023/01/cropped-android-chrome-512x512-1.png" alt="Description">

#The image can be fetched from the local server or from a remote server.
  1. Headings
    HTML provides heading tags from h1 to h6 for defining headings.
<h1> Heading one </h1>  
<h2> Heading one </h2>
<h3> Heading one </h3>
<h4> Heading one </h4>
<h5> Heading one </h5>
<h6> Heading one </h6>
#Best SEO practices recommends 1 H1 tag for each page.
#Other heading levels should be distributed as needed.
  1. Lists – Use ul for unordered lists and ol for ordered lists. li represents list items.

Unordered list

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

Ordered List

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
</ol>
  1. Links – Links provide a link/path to another resource. Create hyperlinks using the tag:
<a href="https://dtechnologys.com/">Visit Dynamic Technologies</a>
  1. Forms – HTML forms allow user input into a website. 
<form method="" action="">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <button type="submit">Submit</button>
</form>
  1. Inputs – Website users use input fields to provide information.
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="submit">
<input type="reset">
<input type="file">
<input type="date">
<input type="email">
<input type="url">
<input type="number">
<input type="range">
<input type="color">
  1. Tables – Create tables with the <table>, <tr>, <th>, and <td> tags.
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
</table>
  1. div – Users use the div tag to group related elements, facilitating easier styling.
<div>
<p> some paragraph </p>
<h1> Heading 1 </h1>
<div>
<p> more content and or tags </p>
</div>
</div>
#For styling purposes, all other elements are grouped into divs.

HTML5 tags

Use semantic elements like <header>, <nav>, <article>, <section>, <footer>, etc., to add meaning to the content.

<!-- To enclose header content -->
<header>
</header>
<!-- To enclose navigation bar content -->
<nav>
</nav>
<!-- To enclose general content -->
<section>
</section>
<!-- To enclose the footer content -->
<footer>
</footer>

HTML Comments

Comments are important in any language. They help explain whatever is happening. The rest of the code executes without executing comments.

<!--Single Line comment-->

<!--
This is a multiline
comment in HTML.
-->

Make a donation to support us

Hosting In Kenya
Hosting In Nigeria
Other Countries

For web development services, SEO services, Digital marketing strategies, website set up services, web hosting and domain registration; contact Dynamic Technologies.

Related articles:

Tags: , , ,