Meme's HTML Showcase

HTML Document Structure

An HTML document has a basic structure that tells the browser how to interpret and display the webpage. The main parts of an HTML document include the <!DOCTYPE html> declaration, <html>, <head>, and <body> elements.

These elements create a hierarchy that forms part of the Document Object Model. The browser uses this structure to understand the relationships between different elements on a webpage.

DOCTYPE Declaration

The <!DOCTYPE html> declaration tells the browser that the document uses HTML5. It is placed at the beginning of the HTML document before the <html> element.

<!DOCTYPE html>

The HTML Element

The <html> element is the root element of an HTML document. All other elements in the webpage are placed inside it.

This page also uses the lang attribute: <html lang="en">. The value "en" identifies English as the language of the document.

The Head Element

The <head> element contains information about the document that is not normally displayed as the main content of the webpage. This information is called metadata.

This page uses metadata elements such as <meta> and <title>.

Meta Elements

The <meta> element provides information about the HTML document. This page includes several examples.

• charset: identifies the character encoding used by the document.
• description: provides a description of the webpage.
• author: identifies the author of the webpage.
• viewport: provides instructions about how the webpage should be displayed on different devices.

For example, this page uses <meta charset="UTF-8">. The value "UTF-8" specifies the character encoding used by the document.

This page also uses <meta name="viewport" content="width=device-width, initial-scale=1.0">. The name attribute has the value "viewport", while the content attribute provides the viewport settings.

The Title Element

The <title> element provides the title of the HTML document. The title can appear in the browser tab and is also used as information about the webpage.

The title of this page is Document Structure and Metadata | Meme's HTML Showcase.

The Body Element

The <body> element contains the content that is displayed on the webpage. This includes headings, paragraphs, lists, links, images, tables, and other visible content.

The body of this page contains the header, main content, and footer that make up the visible webpage.

Example of Document Structure

A basic HTML5 document can be organized like this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>My Webpage</title>
</head>

<body>

    <h1>My Webpage</h1>

    <p>This is my webpage content.</p>

</body>

</html>

What I Learned

Through this topic, I learned that an HTML webpage has a specific structure that helps the browser understand the document. I learned the difference between the document declaration, root element, head, and body.

I also learned that metadata provides information about the webpage without being displayed as the main page content. Understanding metadata such as character encoding, document description, author, and viewport settings helped me understand how HTML documents are prepared for browsers.

Reference

The document structure and metadata concepts were researched using HTML documentation. See the References page for the complete IEEE reference list.