A Beginner's Guide to HTML

A web page is not a singular entity, but rather a collection of many different building blocks that work together to create the user experience. These building blocks are constructed using HTML, and This building blocks known as HTML Elements .

What are HTML elements?

In HTML, an element is a section of an HTML document. Some HTML elements represent visible components on a web page, such as text, images, or buttons, while others denote different sections of the page or provide meta-information about the document.

<p>My first paragraph.</p>

The HTML element is everything from the start tag to the end tag, <tagname>Content goes here... </tagname>

Most HTML elements consist of three parts:

The opening tag (or start tag) marks where the element’s content begins ( in the example above).
The closing tag (or end tag) marks the end of the element’s content ( above). The closing tag is identical to the opening tag with the addition of a forward slash (/) after the first angle bracket.
The content is placed between the element’s opening and closing tags (My first paragraph text. above).

HTML Element

HTML tags are not case-sensitive. You could write  as  and it would still work. However, most developers write lowercase HTML tags because it’s easier and more consistent.

Empty HTML Elements

While most HTML elements are written with an opening and closing tag, some elements consist of a single tag and do not have closing tags or content. These are called empty elements. The   tag defines a line break, and is an empty element without a closing tag.

<p>This is a <br> paragraph with a line break.</p>

Output :

This is a 
paragraph with a line break.

HTML Attributes

HTML elements can also contain attributes. Attributes are extra code placed inside the opening tag of an element that provides additional information about the element. An attribute may be optional or required. The style attribute is used to add styles to an element, such as color, font, size, and more.

<p style="color:red;">This is a red paragraph.</p>

You can learn more about HTML Attribute here

HTML Element Nesting

HTML elements can also be placed inside of other elements — this is called nesting and is key to how HTML documents are assembled.

<p>This is paragraph text. <a href="https://bhavikamaurya.hashnode.dev/">This is a link to the Bhavika's Blog.</a> This is more text.</p>

Output : This is paragraph text. This is a link to the Bhavika's Blog. This is more text.

All HTML documents consist of nested HTML elements.

<html>
<head>
<!-- metadata goes here -->
</head>
<body>

<p>My first paragraph.</p>

</body>
</html>

In every HTML file, all elements are nested inside the <html> tag. This is called the root element because it contains all other elements in the document.

<html> usually contains two direct child elements. These are <head>, which contains information about the document (e.g., its title, keywords, author, and/or any required scripts), and <body>, which contains all visible page elements (e.g., , <img>, etc.).

HTML Tags List

HTML Element	Description
`<html>`	Defines the root of an HTML document
`<head>`	Contains metadata information about the HTML document
`<title>`	Defines the title of the HTML document
`<body>`	Contains the visible content of the HTML document
`<h1>` - `<h6>`	Defines six levels of headings
`<p>`	Defines a paragraph of text
`<a>`	Defines a hyperlink to another web page or file
`<img>`	Displays an image on the web page
`<ul>`	Defines an unordered list of items
`<ol>`	Defines an ordered list of items
`<li>`	Defines a list item
`<table>`	Defines a table
`<tr>`	Defines a table row
`<th>`	Defines a table header cell
`<td>`	Defines a table data cell
`<form>`	Defines a form for user input
`<input>`	Defines an input field for user input
`<button>`	Defines a clickable button
`<select>`	Defines a drop-down list for user selection
`<textarea>`	Defines a multi-line input field for user input
`<div>`	Defines a container for grouping and styling page content
`<span>`	Defines a container for styling inline page content

Note that this is not an exhaustive list, as HTML has many other elements that can be used to create dynamic and engaging web pages.

Learn HTML Elements

It’s really interesting that every website and web page you’ve ever visited is made up of a handful of page elements, along with some creative use of CSS and JavaScript.

There are Number of resources to learn HTML

Mozilla Developer Network (MDN) - https://developer.mozilla.org/en-US/docs/Learn/HTML
W3Schools - https://www.w3schools.com/html/
Codecademy - https://www.codecademy.com/learn/learn-html
FreeCodeCamp - https://www.freecodecamp.org/learn/responsive-web-design/
Udemy - https://www.udemy.com/topic/html/

A Beginner's Guide to HTML Elements

Learn about the most commonly used HTML elements

Table of contents