Introduction of HTML

Introduction of HTML

In this article We'll learn some important tags is html

What is HTML

HTML(Hyper Text Markup Language) is a markup language which is used to create a web page and web applications. with the help of HTML we can structure web page and its content. For example, content of web could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables.

Structure of HTML Files

HTML files are saved with .html or .htm extension for example index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>article</title>
</head>
<body>

<!DOCTYPE html> : it defines that this document is an HTML5 document

< html > : This element wraps all the content on the entire page and is sometimes known as the root element.

< title > : This element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)

< head > : This element contains meta information about the HTML page.

< meta charset="UTF-8" >: This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages.

< meta name="viewport" content="width=device-width, initial-scale=1.0" > : This viewport element ensures the page renders at the width of viewport, preventing mobile browsers from rendering pages wider than the viewport and then shrinking them down.

< body > : This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.

HTML Element

HTML pages have a series of HTML elements. html elements consist of a set of tags and attributes.

There are three main part of HTML element,

1)Opening tag

2)Content

3)Closing tag

image.png

Tag

HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content.

Structure of tag : - < > --- </ >

Example:-

<p> i am paragraph </p>

Important Tags in HTML

Paragraph Tag

Paragraph tag is used to define Paragraphs is web pages. it is denoted by P

Example : -

Heading Tag

Heading tag is used to define heading in web page. There are total 6 levels of heading tag,< h1 > is the highest and < h6 > is the lowest level.

Example : -

Image Tag

Image tag is used to add image inside web page.

Syntax:- < img src=" " alt=" " width=" " height=" " >

Example : -

src : -The src attribute is required, and contains the path to the image you want to embed.

alt : - it is used to specify an alternate text for the image. It tells the user about what the image means and also due to any network issue if the image cannot be displayed then this alternate text will be displayed.

height : - It is used to specify the height of the image.

width : - It is used to specify the width of the image.

Below are some other attribute of image tag

  • crossorigin
  • anonymous
  • fetchpriority
  • loading
  • sizes
  • usemap

Table Tag

Table tag is used to insert table in web page. we can create table using < table > </ table > element.

Element of table tag:-

< th > :- It defines table header in table.

< tr > :- It defines rows in table.

< td > :- It defines cell(data inside table).

boder : - It is used to specify the border in table.

Sometime we need to merge some roes and columns(cells), for this we use colspan and rowspan

colspan :- It is used for make cell span(merge) over multiple columns.

rowspan :- It is used for make cell span(merge) over multiple rows.

Example:-

Anchor Tag

Anchor tag is defined by < a > tag with href attribute. it is used to create a hyperlinks in same web page. This hyperlinks can be a web page links or email links or phone links or locations link.

structure : - < a href = " " > link </ a >

Example:-

Semantic Tag

semantic tags means Tags with some meaning. semantic tags describe meaning for browser as well as developer.

Examples of non-semantic tag: < div > and < span > - Tells nothing about its content.

Examples of semantic tag: < form >, < table >, and < article > - Clearly defines its content.

Benefits of semantic tag:-

  • Search engines will consider its contents as important keywords to influence the page's search rankings(SEO)
  • Screen readers can use it as a signpost to help visually impaired users navigate a page.

Below are some semantic tags:-

  • < article >
  • < aside >
  • < footer >
  • < main >
  • < nav >
  • < section >

Thank You for reading my first blog. please share your thoughts

Did you find this article valuable?

Support Krishnanand Roy's blog by becoming a sponsor. Any amount is appreciated!