HTML `` Element: Defining the Main Content of Your Web Pages

Learn the essential role of the HTML `` element in creating web pages. This tutorial explains its purpose as a container for all visible content, demonstrates its usage, and shows how to style the `` element using CSS for consistent and visually appealing web page design.

Understanding the HTML `` Element

The Role of the `` Section

The HTML `` element is a fundamental part of every HTML document, defining the visible content that users see when they view a webpage. It's a container for all the elements that make up the main content of the page. Everything a user interacts with directly (text, images, videos, forms, etc.) should be placed within the `` tags. The content within the `` is rendered by the browser and forms the visual representation of your webpage.

The Importance of the `` Element

The `` tag is essential for creating a functioning HTML document. Only one `` element can exist within a single HTML document. This section of the HTML code is where you would place all of the content that you would want your user to see.

Example Basic HTML Document

Basic HTML Document


<html>
<body>
  <h1>My Webpage Title</h1>
  <p>This is some text.</p>
</body>
</html>

Styling the `` Element with CSS

You can use CSS (Cascading Style Sheets) to control the appearance of the entire page by styling the `` element. This enables consistent styling across the webpage, improving both visual appeal and user experience. Here are some examples:

Example: Styling the `` with CSS


body {
  background-color: #f0f0f0; /* Light gray background */
  font-family: sans-serif;    /* Sans-serif font */
  line-height: 1.6;          /* Line spacing */
  margin: 20px;             /* Margins around the content */
}

Browser Support and Default Styles

The `` element is supported by all modern web browsers. Browsers have default styles for the `` element which provide basic styling that can be overridden by custom CSS.

Browser	Support
Chrome	Yes
Edge	Yes
Firefox	Yes
Opera	Yes
Safari	Yes

Default CSS for ``


body {
  display: block;
  margin: 8px;
}
body:focus {
  outline: none;
}