Onjsdev

Share


HTML Tutorial

Beginner's Guide to HTML


By onjsdev

Dec 27th, 2023

HTML, or hypertext markup language, was introduced in 1989 for creating web pages. Now, it is fundamental tool to build structure of any website.

This guide will focus on the basics of HTML to help you understand its structure and features with ease.

So, let's get started with what HTML is?

What is HTML

To put it simply, HTML instructs web browsers on what to display on a page, such as text, images, or links, using elements written in angle brackets and defined by opening and closing tags.

HTML has a rich history dating back to Tim Berners-Lee's vision in the 1980s. From humble beginnings with 18 core elements in 1991, it evolved through versions such as the widely used 2.0 and the ill-fated 3.0, before finally stabilizing with the popular 4.01 in 1999. A stricter cousin, XHTML, emerged and faded, while HTML 5 quickly came to market. Multimedia, canvas and accessibility come to the fore on the 2008 stage

HTML Main Structure

A HTML document is composed of a root <html>, and two sections, <head> and <body> tag.

The <html> tag defines the document as a HTML file, while the <head> tag contains information related to the current page, such as the document's title, and the <body> tag contains the elements that will be displayed on the page.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Web Page</title>
</head>
<body>
    <!-- Elements... -->
</body>
</html>

HTML Elements

A browser understand what to display on page through elements which is defined a open and close tag. HTML offers a wide variety of elements that can be used to create a website, but some of the most commonly used elements in a page are links, images, text, form, and container elements.

An element can also have certain attributes that control its behavior. For example, a <a> link tag can have an href attribute, which tells the browser where to go when the link is clicked.

Now let's see what HTML elements are.

Heading

Heading elements is defined as h1, h2... h6 according to the importance of its content. For example, the <h1> tag can be used for title while <h2> and <h3> tags can be used for subtitles.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Headings</title>
</head>
<body>
    <h1>Main Title</h1>
    
    <h2>Subheading 1</h2>
    <h2>Subheading 2</h2>
    
    <h3>Sub-subheading 1</h3>
    <!-- and so on... -->

</body>
</html>

Paragraph

A paragraph element is defined as <p> tag. As its name says, it is used for text content to display on page.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Paragraph</title>
</head>
<body>
   <p>My Paragraph</p>
</body>
</html>

Image

The <img> tag defines an image element, which is used to display images on a page. Unlike most elements, which are defined using both an opening and closing tag, an image tag can be defined using only one tag, as shown below.

As for its attributes, the two most commonly used attributes for an image tag are src and alt. The src attribute specifies the source of the image, while the alt attribute provides alternative text for the image.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Images</title>
</head>
<body>
  <p>My Image</p>
 <img src="image.jpg" alt="Description of the image">
</body>
</html>

Link

The <a> tag, which stands for link, is used to create a hyperlink to either an internal or external page. The <a> tag, used with its href attribute, specifies the URL or route of the link.

A hyperlink, defined using the <a> tag, can include text or an image, which when clicked by a user, redirects them to another page.

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

<a href="https://www.example.com">
    <img src="example.jpg" alt="Example Image">
</a>

Div

The <div> element is a container that is used for grouping elements together. With the help of <div> element, using CSS and JavaScript, the appearance or behavior of grouped elements can be specifically altered.

<div>
    <h2>Section 1</h2>
    <p>This is the content of section 1.</p>
</div>

<div>
    <h2>Section 2</h2>
    <p>This is the content of section 2.</p>
</div>

Styling The HTML Web Page With CSS

Each element in a HTML document has a default appearance, including size, color, placement, etc. This visual appearance of elements can be modified using CSS (Cascading Style Sheets).

To style elements in an HTML document, a style element must be included, which can be done in three ways: as an external stylesheet, an internal stylesheet, or inline styles.

External styling:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document Title</title>
</head>
<body>
    <!-- Content of the HTML document -->
</body>
</html>

Internal styling:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* CSS rules go here */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
        }
    </style>
    <title>Document Title</title>
</head>
<body>
    <!-- Content of the HTML document -->
</body>
</html>

In-line Styling:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
</head>
<body>
    <p style="color: blue; font-size: 18px;">This is a blue and larger text.</p>
</body>
</html>

Adding Functionality To The HTML Web Page With JavaScript

In addition to modifying the appearance of elements, functionality can also be added to them using JavaScript, a programming language.

To achieve that, you need to also include a javascript code to your HTML file which can also can be done in two ways: as an external script and internal script.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
        <!-- External Scripts -->
    <script src="script.js"></script>
</head>
<body>

        <!-- Internal Scripts -->
    <script>
        // JavaScript code goes here
        function greet() {
            alert('Hello, World!');
        }
    </script>
</body>
</html>

Conclusion

In conclusion, HTML, which stands for Hypertext Markup Language, is the foundation of every webpage you see on the internet. It's a coding language that provides the basic structure and content for webpages, telling web browsers how to display text, images, videos, and other elements. Think of it as the skeleton of a webpage, holding everything together and giving it shape.

This guide has discussed the basics of HTML for beginners.

Thank you for reading.