What is an HTML Document’s Basic Structure?

HTML (HyperText Markup Language) is the code that is used to structure a web page and its content.
The basic structure of an HTML document consists of these elements:

Doctype declaration
html
head
body
footer

!DOCTYPE html

The <!DOCTYP…


This content originally appeared on DEV Community and was authored by Max Lockwood

HTML (HyperText Markup Language) is the code that is used to structure a web page and its content.
The basic structure of an HTML document consists of these elements:

  • Doctype declaration
  • html
  • head
  • body
  • footer

!DOCTYPE html

The <!DOCTYPE html> declaration needs to be there to inform the browser that this document is an HTML5 document.

The <html> Tag

Although several versions have been released throughout time, the fundamentals of HTML have remained the same.

The <html> tag is the root and is the container for all other HTML elements (except for the <!DOCTYPE> tag).
An HTML document’s structure has been compared to that of a burger. The HTML document has opening and closing HTML tags, just like a burger has two bun slices on the top and bottom.

These tags, surround everything else:

<html>
    <!-- content -->
</html>

The <head> Tag

The document’s head, which is identified by opening and closing head tags, appears immediately after the beginning HTML element.

The head of an HTML file contains all of the page’s non-visual elements. The head element contains metadata about the document, such as its title, scripts, and style sheets.

<html>
    <head>
    </head>
</html>

The <body> Tag

The body tag follows the head tag.
The tag defines the main content of the HTML document.
All visual-structural elements are contained within the body tag.

Headings, paragraphs, lists, quotes, images, and links are just a few of the elements that can be contained within the body tag. Like in our burger analogy, the body is like the contents of a burger e.g. cheese, lettuce, patty, pickles etc.

Basic HTML Structure

Here is the basic structure of a HTML document:

<!DOCTYPE html>
<html>
    <head>
        <title> Title here </title>
    </head>
    <body>
        web page content goes here
    <footer>
    </footer>
    </body>
</html>

The <footer> Tag

A footer appears at the bottom of the HTML web page.
A typically <footer> contains information about the section:

  • Author
  • Related content
  • Copyright data
  • Navigation elements

A webpage can have multiple footers if necessary.

Read more articles about HTML, CSS and JavaScript over on my blog


This content originally appeared on DEV Community and was authored by Max Lockwood


Print Share Comment Cite Upload Translate Updates
APA

Max Lockwood | Sciencx (2022-07-13T13:58:52+00:00) What is an HTML Document’s Basic Structure?. Retrieved from https://www.scien.cx/2022/07/13/what-is-an-html-documents-basic-structure/

MLA
" » What is an HTML Document’s Basic Structure?." Max Lockwood | Sciencx - Wednesday July 13, 2022, https://www.scien.cx/2022/07/13/what-is-an-html-documents-basic-structure/
HARVARD
Max Lockwood | Sciencx Wednesday July 13, 2022 » What is an HTML Document’s Basic Structure?., viewed ,<https://www.scien.cx/2022/07/13/what-is-an-html-documents-basic-structure/>
VANCOUVER
Max Lockwood | Sciencx - » What is an HTML Document’s Basic Structure?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/07/13/what-is-an-html-documents-basic-structure/
CHICAGO
" » What is an HTML Document’s Basic Structure?." Max Lockwood | Sciencx - Accessed . https://www.scien.cx/2022/07/13/what-is-an-html-documents-basic-structure/
IEEE
" » What is an HTML Document’s Basic Structure?." Max Lockwood | Sciencx [Online]. Available: https://www.scien.cx/2022/07/13/what-is-an-html-documents-basic-structure/. [Accessed: ]
rf:citation
» What is an HTML Document’s Basic Structure? | Max Lockwood | Sciencx | https://www.scien.cx/2022/07/13/what-is-an-html-documents-basic-structure/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.