Full stack web development

HTML Tags and Elements

Syed Aquib Ali's photo
Syed Aquib Ali
·

3 min read

Table of contents

Elements

Elements always has a starting and ending tags. ex:

<startingTag>Your Content</endingTag>

The code written up there is just for an example. There are various ways to write our html.

Element types -

To start with the html lets first understand the html's boiler code -

<html></html> -

  • An HTML element is a basic building block of HTML (HyperText Markup Language) used to create and structure sections of a webpage.

<head></head> -

The <head> element is an HTML element that contains metadata and information about the document that isn't displayed directly on the webpage. This information typically includes:

  • Title: Defined using the <title> tag, it sets the title of the webpage, which appears in the browser's title bar or tab.

  • Meta tags: Provide metadata such as the character set, author, description, and keywords for search engines.

  • Links to external resources: Such as stylesheets (<link>), scripts (<script>), and icons (<link rel="icon">).

For example:

<head>
  <title>My Webpage</title>
  <meta charset="UTF-8">
  <meta name="description" content="A brief description of the webpage">
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>

<body></body> -

The <body> element is an HTML element that contains all the content of an HTML document that is displayed in the web browser. This includes:

  • Text: Such as headings, paragraphs, and lists.

  • Media: Like images, videos, and audio elements.

  • Interactive elements: Such as forms, buttons, and links.

  • Other HTML elements: Including tables, divs, spans, and more.

For example:

<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.</p>
  <img src="image.jpg" alt="An example image">
  <a href="page2.html">Go to page 2</a>
</body>

HTML Tags -

HTML tags are the building blocks of HTML that define the structure and content of a webpage. Each tag is enclosed in angle brackets (< >) and typically comes in pairs: an opening tag and a closing tag. The closing tag has a forward slash (/) before the tag name. Tags can also have attributes that provide additional information about the element.

For example:

<p>This is a paragraph.</p>

In this case:

  • <p> is the opening tag.

  • </p> is the closing tag.

  • The text "This is a paragraph." is the content.

Some tags are self-closing and don't require a closing tag, such as:

<img src="image.jpg" alt="Example image">
<p>A paragraph</P>
<!-- br is another self closing tag -->
<br/>
<!-- This simply just give a line break in our webpage -->

HTML tags are used to create elements like headings, paragraphs, links, images, lists, and more, helping to structure and present content on the web.

Short brief reminder what you have learnt today :D -

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Title of the document</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
HTML5HTML tags HTML Element