Introduction to HTML

Photo by Andy Holmes on Unsplash

Introduction to HTML

Let's talk about HTML

Html stands for Hyper Text Markup Language. It provides the basic structure for a web page. This is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements. you can also define a custom element.

What is a Hyper Text Markup Language(HTML)?

For better understanding, let's separate them into two parts: "HyperText" and "Markup Language".

  • HyperText- HyperText refers to links that connect web pages with a website or between websites.

  • Markup Language- Markup Language is a language that helps define a web page's structure by including tags.

What is HTML5?

The most recent and comprehensive version of HTML, known as HTML5, added numerous significant updates and brand-new capabilities, including multimedia support, enhanced document markup, APIs, etc.

New elements in HTML5 include <video>, <main>, <article>, etc. Along with the capabilities mentioned above, HTML5's syntax was changed and is now based on Document Type Declaration.

What is Tag?

In essence, an HTML tag allows the browser to differentiate between a document, an element, and regular content. A tag is always enclosed in two angle brackets, like this <>...</> let's take an example of the paragraph tag.

<p>Hi Everyone</p>

What is Element?

Everything between the initial tag and the closing/ending tag is referred to as an HTML element. Below is a fantastic illustration of an HTML element.

<StartingTag> The content to display </EndingTag>

Some elements, such as the <img> tag, lack a closing or ending tag.

What is an Attribute?

In HTML, an attribute is used to specify additional tag-related information. For instance, a style an attribute can be used to add additional content to a <h1> tag if we wish to style that particular tag.

Structure of HTML

Introduction to web and html (1).png

The image above demonstrates the HTML structure, where everything in the <head> tag is displayed to the browser and everything in the <body> tag is displayed to viewers as part of the web page.

Let's take the example:

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

Standard HTML Tags

<!DOCTYPE html>

The DOCTYPE declaration informs the web browser of the HTML version used to create the page. This guarantees that the web page is parsed uniformly across web browsers.

<html>

This is the opening HTML tag, often known as the root or parent tag.

<head>

All of the metadata for the document is contained in this tag. While loading, these details are hidden from end users.

<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 a website.

Essential Tags for Your HTML Document

Paragraph Tag

The <p> tag is used to create a paragraph in an HTML document.

Example:-

<p>Enter Paragraph Here...</p>

Output:-

Enter Paragraph Here...

Heading Tag

For writing a Heading in HTML we use different types of tags ranging from <h1> to <h6>

Example:-

<h1>Enter Main Heading Here...</h1>
<h2>Enter Secondary Heading Here...</h2>

Output:-

Screenshot 2022-11-06 233445.jpg

Anchor Tag

A hyperlink, which is used to connect pages, is defined by the <a> element. Href is basically the URL that the hyperlink points to.

Example:-

<a href="where to navigate">Enter Link Name Here...</a>

Output:-

Screenshot 2022-11-06 233940.jpg

Line Break Tag

A line break in the text is produced by the HTML element <br>. It is helpful when composing a poem or an address where the line breaks matter.

Example:-

<p>I m on line one <br> I m on line two</p>

Output:-

Screenshot 2022-11-06 234941.jpg

Image Tag

The HTML <img> tag is used to show or embed images in web pages.

Attributes:

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

  2. alt: Defines an alternative text description of the image, It is useful if an image is having some issues then this text is displayed.

  3. loading: Indicates how the browser should load the image. There are two types of loading, first eager which loads immediately and second lazy which loads the image when it comes under a particular viewport

So, that concludes our discussion on HTML and web servers. Thank you so much if you made it this far; I'd love to hear your thoughts.