Intoduction:

HTML(Hyper Text Markup Language) is the most basic element that you need while building a website.It defines the layout of the webpage.HTML is not a coding language,it's a scripting language.HTML uses various scripts or tags to define the layout of a webpage.Some of the commonly used tags are

<head>
<title>
<body>
<article>
<section>
<div>
<p> and so on....

HTML Elements

Anatomy of HTML Element:

The main parts of HTML elements are:

The opening tag: This consist of opening and closing angular brackets with elements name within it ,ex:<p>.
The closing tag: This consist of opening and closing angular brackets with the name of the element within it and a forward slash before it .
The content: Here in the above example the content is the text i.e My cat is very grumpy.
The element: The opening tag ,closing tag and the content together comprise the element.

Anatomy of an HTML document

Let's take the example of a simple HTML file

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image" />
  </body>
</html>

Let's break down the above code:

<!DOCTYPE html> - These tags are used at the top of your HTML file just to make sure that your document behaves correctly.
<html></html> - The <html> element wraps all the content on the entire page.It is also known as the root element. The lang attribute in the element sets the primary language of the document.
<head></head> - The content inside the <head> tag does not appear on the web page but it plays a vital role in search engine optimization of the website.The keyword that are added here appear in the search results .We can also add CSS inside our <head>tag.
<meta charset="utf-8"> - This is a meta tag that specifies the character encoding used in the HTML document. The value "utf-8" indicates that the document is encoded using the UTF-8 character encoding standard, which is a widely used standard that supports all characters in the Unicode character set. It's important to include this meta tag in HTML documents to ensure that the correct character encoding is used and that text is displayed correctly in a variety of browsers and devices.
<meta name="viewport" content="width=device-width"> - The code you provided is setting the viewport width to the width of the device's screen. This means that the webpage will adjust its display width automatically to fit the screen size of the device it is being viewed on. This is important for mobile-friendly design, as it allows the website to be easily viewable on a variety of devices with different screen sizes, without requiring excessive zooming or scrolling.
<title></title> - This sets the title of your web page.
<body></body> - This contains all the content that you want to display on the website.

Images

let's get back to <img > element :

<img src="images/firefox-icon.png" alt="My test image" />

<img> tag embeds an image into our page in the position it appears.The alt tag displays the alternative text that will show up in the browser if the image fails to load.

Marking up text

Now we will be discussing some essential HTML elements that are used for marking up the text.

Headings

Heading elements allow you to specify that certain parts of your content are headings - or subheadings.HTML contains 6 heading levels <h1>-<h6>

<!-- 4 heading levels: -->
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

Note: Anything in HTML between  is an HTML comment. The browser ignores comments as it renders the code.

Paragraphs

<p> elements are for containing paragraphs or text.

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

Lists

HTML provides an ordered list and an unordered list. You can use these lists to display information in an organized manner.

Unordered List:

In an unordered list, items are marked with bullet points. You can create an unordered list using the <ul> tag. Each item in the list is marked by the <li> tag. Here is an example:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered List:

In an ordered list, items are numbered. You can create an ordered list using the <ol> tag. Like the unordered list, each item in the list is marked by the <li> tag. Here is an example:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Links

Links in HTML are used to create hyperlinks to other web pages, documents, files, and websites. Here's an example of how to create a basic link in HTML:

<a href="http://www.example.com">Click Here</a>

This will display "Click Here" on the webpage as a clickable link, and when clicked, it will take the user to the URL specified in the href attribute.

You can also create links that point to other pages within your own website or to files on your server. Here's an example:

<a href="about.html">About Us</a>

This will link to a file called "about.html" located in the same directory as the current HTML file.

You can also add additional attributes to the link element, such as the target attribute to open the link in a new window or tab:

<a href="http://www.example.com" target="_blank">Click Here to Open in New Window</a>

Summary

understanding the anatomy of an HTML document and the elements it's composed of is essential for anyone who wants to create web pages. By knowing the structure of an HTML document, you can create well-formed pages that are easy to read, maintain, and modify.Additionally, understanding the anatomy of an HTML element allows you to properly utilize the various elements available to create the desired layout. By using the right combination of HTML elements in a document, you can create semantic and accessible content that is easily understood by users and search engines alike.Overall, mastering the anatomy of an HTML document and its elements will not only help you create better websites but also enhance your web development skills and knowledge.

HTML:Hyper Text Markup Language