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
!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
</body>
</html>
Read more articles about HTML, CSS and JavaScript over on my blog
Top comments (9)
Thanks for the post. I see html markup every day from many different dev. teams. A common mistake is they do not stick to semantic elements by using divs as if there's a shortage and they wanted to get them in before they were gone.
It's good for us to stick to the elements provided in Html5. Keep it simple.
My pleasure. Oh really, that's probably not the best way to structure your html. I always try to use semantic elements and only use divs to group content or as containers.
I totally agree! I'm only a beginner developer but I am enjoying learning from this community.
There is the W3C Markup Validation Service if you care to validate for your HTML.
Sorry, but that's incorrect. Your footer element is outside of your body. Invalid HTML
Eagle eye!
Thanks Bob, I wasn't aware of that. I have changed the post.
Sorry, one other thing you may want to note is that the
<footer>element isn't required. It's analogous to<header>(also not required).Yeah you are right, it's not necessary. I will remove it from the code block.
🔧 Ready to turn your coding dreams into reality? Areon Network's Hackathon is live, offering a massive $500K prize pool. Join the coding revolution at hackathon.areon.network! 🚀✨ #InnovationUnleashed #AreonHackathon