HTML Basics

HTML Basics

HTML

HTML stands for Hyper Text Markup Language, it is not a programming language but it provides a skeleton for websites. With the help of HTML, we can structure our website that what is our heading where images should show, and most importantly with the writing of better HTML code we can help Google to rank our website.

Tag

A tag is an element that helps to put content on the web page, It is also used to differentiate between different types of content. A tag is always enclosed in two angle brackets, like this <>...</> Let's take the example of the h1 tag.

<h1> Hello World </h1>

Element

Everything between the initial tag and the closing/ending tag is referred to as an HTML element.

<h1> Hello World </h1>

Some elements, such as the <img> are the self-closing tag.

Attribute

It provides extra features to tag.

Example: <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Here <img> is tag and src, alt, width, and height gives extra features by with the help of we can manage the look and feel of an image.

Structure of HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1> Hello World </h1>
</body>
</html>
  • <!DOCTYPE HTML>

    The DOCTYPE declaration informs the web browser of the types of document in this scenario it is an HTML document and then the browser can parse the document accordingly.

  • <HTML>

    This is the opening HTML tag and is also known as the root or parent tag.

  • <head>

    Inside the head tag it stores metadata (information about information), while loading the web page this information is hidden from the end user.

  • <title>

    An HTML document's title is specified by this tag.

  • <body>

    This tag basically defines the body structure of an HTML document and contains all the main content of the website.

Basic and Essential Tags for Your HTML Document

  • Paragraph Tag

    <p> ... </p> tag is used to create a paragraph in an HTML Document.

  • Heading Tag

    For writing Headings in HTML Documents we use different types of tags ranging from <h1> to <h6>, <h1> is the biggest, and <h6> is the smallest in terms of fonts and priorities.

  • Image Tag

    <img> tag is used to embed Images in HTML Documents.

       <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
    

    src: This attribute is required, and it also contains the URL or path of the image to display.

    alt: Defines an alternative text description of the image, it is useful when an image is not loaded then the text is displayed.

    width: It provides width to an image.

    height: It provides height to an image.

  • Anchor Tag

       <a href="https://www.google.com">Visit Google!</a>
    

    The <a> HTML element, with its href attribute, creates a hyperlink to web pages, files, emails, addresses, locations on the same page, or anything else a URL can address.