Lavesh Sharma's Blog

Getting Started with HTML ! Part-1

Getting Started with HTML ! Part-1

Lavesh Sharma's photo
Lavesh Sharma
·

4 min read

Table of contents

HTML

HTML, often known as Hyper Text Markup Language, is a Markup Language used for creating Web pages, Web applications or Websites. A web application's skeleton is built using HTML to build a structure for web documents.

HTML consists of a series of elements, which is used to tell the browser how to display the content. Elements label the pieces of content such as "This is a heading", "This is a paragraph", "This is a link", etc.

An HTML file is saved using .html extensions.

What is HTML5?

HTML5 is the latest comprehensive version of HTML adding 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 aforementioned capabilities, HTML5's syntax was changed and is now based on Document Type Declaration.

What is Tag?

A Tag is one that lets the browser understand the difference between an HTML document or webpage and normal content. A tag always comes between the angular brackets i.e, <>...</>.

HTML has different types of tags to do different things. There are 2 different types of tags:-

  1. One's that hold some content

This type of tag has an opening and a closing tag, <tag> content </tag>.

for example: <p> paragraph tag</p>.

  1. One's Which doesn't hold any content

This tag is also called a self-closing tag, means they don't contain any closing tag.

for example: <br> Break tag, <hr> horizontal line tag etc.

What is Element?

Anything from the opening tag to the closing tag is known as an HTML element.

A perfect example of an HTML element is given below.

What is an Attribute?

The attribute is a way to provide additional information about HTML tags/elements.

Attributes are always specified in the opening tag.

Attributes always come in pairs like name = "value"

Structure of HTML

The image shows the structure of an HTML document, where everything that comes into the head is for the browser and other purposes and the body contains the viewers or end-user part of the web page.

Let's take an example:

<!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>Document</title>
</head>
<body>
    <p>This is paragraph</p>
</body>
</html>

<!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 defines the body structure of an HTML document and contains all the main content of a website.

<meta>

The meta tag is simply to hold some metadata or additional information about the web page. A meta tag is a self-closing tag.

Basic HTML tags

Heading

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

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

Output:

Paragraph

This tag is a paragraph tag that represents the paragraph text in an HTML document.

<p>This tag is used to create a paragraph</p>

Output:

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.

The URL that you can specify can be of two types:

  1. Absolute URLs:- Links that are hosted on another website.

  2. Relative URL's(Without the "www" part):- Links that are hosted within the website.


<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

Image

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 image is having some issues than this text is displayed.

for example:


<img src="https://media.istockphoto.com/id/938742222/photo/cheesy-pepperoni-pizza.jpg?s=612x612&w=0&k=20&c=D1z4xPCs-qQIZyUqRcHrnsJSJy_YbUD9udOrXpilNpI=" alt="Pizza image">

Output:

Line Break

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

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

output:

Screenshot 2022-11-06 234941.jpg

Horizontal Line

This is used to create a line between content


<p>This is paragraph 1 </p>
<hr>
<p>This is paragraph 1 </p>

Output:

Reference it for more detail about the tag:

w3school.com or search the tag name for more detail.

So, that concludes our discussion on HTML. Thank you so much if you read the whole article; I'd love to hear your thoughts.

We will explore a bit more HTML in part-2.

Virtual Tech School