HTML - (Structure Your Website)

Hypertext Markup Language

HTML is a markup language used for making websites and describing web page layout. It consists nested structure of html elements that can be visualized as a tree (DOM tree).

Hello World program in html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    Hello World
</body>
</html>

Elements:

All of the elements or tags in HTML posses their semantic meaning. There are various elements in HTML such as html, head, title, meta, header, section, h1, h2, h3, p, a, pre, img, audio, video, button etc.

Each element has a separate task and meaning to it.

For example :

p can be used for simple text or paragraph and h1, h2 can be used for different headings. To show media we have tag like img and audio where img stands for image and audio does not need any explanation.

We also have the support of inputs and form in html. Some of the things are automated for us like form submission while clicking on button that has type attribute to submit.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elements in HTML</title>
</head>

<body>
    <!-- Comment in HTML -->
    <!-- Multiline comment in HTML
    Multiline comment in HTML -->
    <h1>
        Elements
    </h1>
    <p>
        This is a paragraph
    </p>
    <a href="https://www.google.com">
        Go To Google - Link
    </a>
    <img src="./img.jpg" alt="image alternative text">
    <!-- List -->
    <ul>
        <li>
            list item
        </li>
    </ul>
</body>
</html>

Attributes:

Each element in html supports its own set of attributes and some attributes are common in all the html elements. There are many attributes like style, align, width, height, id, class, onclick, ondrag, hidden, draggable etc. Each attribute performs a different task.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attributes</title>
</head>
<body>
    <p hidden>This will not be shown up</p>
    <p style="color: green;">This will be green</p>
    <p class="para" id="mypara">
        This element has custom class and id
    </p>
</body>
</html>

Styling

For custom styling in html elements, we can either use the style attribute as shown above in the example. Or we can assign an id or class attribute to html element and then use css (another topic).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attributes</title>
</head>
<body>
    <style>
        #para{
            color: red;
            font-size: 20px;
            font-family: sans-serif;
        }
    </style>
    <p id="para">Styled Element by Id</p>
</body>
</html>

What is HTML in 100 seconds by Fireship (YouTube)

Resources

W3Schools

Learn HTML ORG

Free Code Camp (Video)

I hope this write up will help you learn about html.

Thanks for reading 📖

HTML - (Structure Your Website)

Grepper

Documentation

Social

Legal

Contact