HTML Basics

HTML Basics:

Elements:

In HTML, an element is a designator that defines the structure and content of objects within a web page. Elements can be used to create headings, paragraphs, links, images, and many other types of content.

Elements are identified by the use of angle brackets, < >, surrounding the element name. For example, the <p> element is used to create a paragraph, and the <h1> element is used to create a top-level heading.

Here's an example of how the <p> element can be used to create a simple paragraph:

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

In this example, the opening <p> tag marks the beginning of the paragraph, and the closing </p> tag marks the end of the paragraph. The text "This is a paragraph of text." is the content of the <p> element.

HTML has many other elements, including ones for creating headings, links, images, and lists. Each element has its own purpose and attributes that can be used to modify its behavior and appearance.

Tags:

Tags in HTML are like labels or instructions that tell the web browser how to display content on a web page. They are enclosed in angle brackets and come in pairs: an opening tag and a closing tag. The opening tag tells the browser to start interpreting the content and the closing tag tells it when to stop.

For example, the <p> tag is used to indicate a paragraph of text. The opening tag, <p>, tells the browser to start a new paragraph and the closing tag, </p>, tells it to end the paragraph. Everything between the opening and closing tags is considered to be part of the paragraph.

Here is an example of how tags can be used in HTML:

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

In this example, the <p> tag is used to indicate a new paragraph and the text "This is a paragraph of text." is the content that should be displayed within the paragraph.

Attributes:

In HTML, attributes provide additional information about an element. They are added to the opening tag of an HTML element and contain a name and a value.

For example, let's consider the <img> tag, which is used to display images on a web page. The "src" attribute is used to specify the source of the image, i.e., the URL of the image file. Here's an example:

<img src="image.jpg" alt="A beautiful landscape">

In the example above, "src" is the name of the attribute, and "image.jpg" is the value of the attribute. The "alt" attribute is also used to provide alternative text for the image, which is displayed if the image cannot be loaded for any reason.

Similarly, the <a> tag, which is used to create hyperlinks, has an "href" attribute that specifies the URL of the web page to which the link should navigate. Here's an example:

<a href="https://www.example.com">Click here</a>

In the example above, "href" is the name of the attribute, and "https://www.example.com" is the value of the attribute. When the user clicks on the link, they will be taken to the web page at the specified URL.

Basic Structure:

The basic structure of an HTML file is comprised of three main parts: the doctype declaration, the head section, and the body section. Here's an example:

<!DOCTYPE html>

<html>

<head>

<title>My Page Title</title>

</head>

<body>

<h1>Welcome to My Page</h1>

</body>

</html>

The <!DOCTYPE html> declaration specifies the version of HTML being used, which in this case is HTML5.
The <html> tag indicates the beginning of an HTML document.
The <head> section contains information about the document that isn't displayed on the page itself, such as the page title and any metadata. In this example, we have a <title> element that sets the page title.
The <body> section contains the actual content that will be displayed on the page. In this example, we have an <h1> element that sets the main heading, and a <p> element that sets a paragraph of text.

It's important to note that all HTML tags must be properly nested and closed. In this example, the <title> tag is closed with </title>, while the <h1> and <p> tags are closed with </h1> and </p>, respectively.

Block Vs Inline Elements:

Block-level elements create a block of content, taking up the entire width available and starting a new line after the element.

Examples of block-level elements include div, h1, p, ul, li, etc.

<div>

<h1>This is a heading</h1>

<p>This is a paragraph</p>

</div>

In the example above, the div element is a block-level element, and it contains other block-level elements such as h1, p, and ul. Each of these elements creates a block of content that takes up the full width of the container and starts a new line after the element.

Inline-level elements, on the other hand, only take up the necessary width and do not start a new line. Examples of inline-level elements include a, span, img, em, strong, etc.

<p>Click <a href="#">here</a> to learn more</p>

In the example above, the a element is an inline-level element, and it is used to create a hyperlink within a paragraph. The a element only takes up the necessary width to display the link text and does not create a new line.

Self Closing Elements:

Self-closing elements are HTML tags that do not require a closing tag because they do not contain any content. Instead, they include a forward slash before the closing angle bracket. Self-closing elements are also known as void elements or empty elements.

Here's an example of a self-closing element:

In this example, the img tag is a self-closing element because it doesn't require a closing tag, and it has a forward slash before the closing angle bracket. The src attribute specifies the location of the image file, and the alt attribute provides alternative text that will be displayed if the image cannot be loaded or for accessibility purposes.

What is Root in HTML?

The root element in HTML is the top-level container of all other HTML elements in a web page. It is represented by the <html> tag and serves as the parent element to all other elements in the document. It defines the basic structure of an HTML document and includes metadata such as the document's title, character encoding, and language.