HTML elements: Head and Body
In our previous article, we pushed our first HTML project to GitHub. Continuing from there, I have now added some more text elements to the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello, this is my first project.</h1>
<p>This is a paragraph of text.</p>
<p>This is <strong>important</strong> information.</p>
<p>This is <em>emphasized.</em></p>
<p>This is some regular text. <small>This is smaller text.</small></p>
</body>
</html>
So let's break down its elements to gain a better understanding of each component.
<!DOCTYPE html>
- This tag is used to declare the document type and version of HTML being used in an HTML document. It informs the web browser about the rules and syntax to expect in the document, ensuring proper rendering.
<html lang="en">
This is the root element of an HTML document. It serves as the container for all other HTML elements and defines the document's HTML structure. It encompasses both the <head> and <body> sections.
The "lang" attribute helps assistive technologies, search engines, and browsers understand the language used in the content. It enables better accessibility and facilitates language-specific features.
<head>
- The <head> element represents the container for metadata and other non-visible elements that provide information about the HTML document. It typically includes elements such as <title>, <meta>, <link>, and <script>.
<meta charset="UTF-8" />
- This specifies the character encoding for the HTML document. In this case, it is set to "UTF-8". Unlike ASCII which is limited to English characters, UTF-8 displays texts in different languages
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
This meta tag is used to control the viewport behavior on mobile devices.
By setting the width=device-width, the viewport width is set to the width of the device's screen.
initial-scale=1.0 sets the initial zoom level i.e. the page is displayed at a 1:1 ratio without any zooming.
<title>Document</title>
- This specifies the title of the webpage, which is displayed in the browser's title bar or tab.
<body>
The <body> element represents the main content of an HTML document. It encapsulates all the visible content that is displayed in a web browser. The content within the <body> tags is what users see and interact with when they visit a webpage.
In the provided code snippet, the element is used to encapsulate text elements such as headings and paragraphs. These elements allow you to structure and present textual information on a webpage. As we progress in future articles, we will explore additional elements that belong inside the body element, but for now, let's concentrate on text elements.
<h1>Hello, this is my first project</h1>
- Headings are used to define the hierarchical structure of the content. There are six levels of headings available, ranging from <h1> (the highest level) to <h6> (the lowest level)
<p>This is a paragraph of text.</p>
- The <p> tag is used to define a paragraph of text.
<strong>important</strong>
- The <strong> tag is used to indicate that a portion of text should be rendered as strong or emphasized.
<em>emphasized.</em>
- The <em> tag is used to indicate emphasis or to emphasize a portion of text. By default, it typically displays the text in italics.
<small>This is smaller text.</small>
- The <small> tag is used to indicate that the enclosed text should be displayed in a smaller font size compared to the surrounding text.
In summary, the HTML structure consists of the head and body elements. The head element encompasses metadata such as the document's title and character encoding. On the other hand, the body element encapsulates the visible content that users interact with on a webpage. Together, these elements provide the foundation for organizing and presenting content effectively.