Basic Structure of HTML with Example (W3Schools)
HTML (HyperText Markup Language) is the foundation of all web pages. It provides the structure and content of a webpage, defining elements like headings, paragraphs, images, and links. Understanding the basic structure of HTML is crucial for anyone wanting to create or modify web pages.
This article will walk you through the fundamental building blocks of HTML using examples from W3Schools, a renowned online resource for web development learning.
The Anatomy of a Basic HTML Page
Every HTML document starts with the DOCTYPE declaration, which tells the web browser the version of HTML being used. The HTML element is the root element of the document and encompasses all other elements.
Within the HTML element, you'll find two main components:
- Head: The head element contains meta-information about the HTML document, including the title, links to external stylesheets, and scripts.
My Webpage Title
- Body: The body element contains the visible content of the webpage, the actual text, images, and other elements that users will see.
This is a heading
This is a paragraph.
Common HTML Elements
Here are some common HTML elements with examples from W3Schools:
Headings:
<h1>- Main heading (largest)<h2>- Subheading (smaller than<h1>)<h3>- Subheading (smaller than<h2>)<h4>- Subheading (smaller than<h3>)<h5>- Subheading (smaller than<h4>)<h6>- Subheading (smallest)
Example (W3Schools):
This is a heading
This is a subheading
This is another subheading
Paragraphs:
<p>- Defines a paragraph of text
Example (W3Schools):
This is a paragraph. This is another sentence in the same paragraph.
Images:
<img>- Inserts an image into the webpage
Example (W3Schools):
Links:
<a>- Creates a hyperlink
Example (W3Schools):
Visit W3Schools
Putting It All Together
Here's a complete example of a simple HTML document incorporating these elements, combining knowledge from W3Schools:
My Webpage Title
Welcome to My Webpage
This is a paragraph of text introducing my website. Feel free to explore the links below.
Visit W3Schools
This basic structure forms the foundation for creating web pages. By understanding these fundamental concepts and utilizing W3Schools as a reference, you can begin building your own webpages. Remember, HTML is a living language, and there are countless other elements and attributes to explore. W3Schools offers a comprehensive library of resources to help you delve deeper into the world of web development.