HTML Course Structure of an HTML Document
HTML(Hypertext Markup Language), structures web pages. Unlike programming languages, it isn’t compiled or interpreted. Browsers render HTML directly, displaying content without typical errors. It’s a markup language, not a programming one, making execution smooth without encountering compilation or interpretation issues.
Table of Content
- HTML Document Structure
- Tags and attributes
- Structure of an HTML Document
- Understanding Essential HTML Tags
Structure of an HTML Document
HTML Document Structure
HTML uses predefined tags and attributes to instruct the browser on how to display content, including formatting, style, font size, and images. HTML is a case-insensitive language, meaning there is no distinction between uppercase and lowercase letters.
There are generally two types of tags in HTML:
- Paired Tags: These tags come in pairs i.e. they have both opening(< >) and closing(</ >) tags.
- Empty Tags: These tags are self-closing and do not require a closing tag.”
Below is an example of a <b> tag in HTML, which tells the browser to bold the text inside it.
Tags and attributes
HTML tags are structural components enclosed in angle brackets. They are typically opened and closed with a forward slash (e.g., <h1></h1>). Some tags are self-closing, while others support attributes like width, height, and controls for defining properties or storing metadata.
Structure of an HTML Document
An HTML Document is mainly divided into two parts:
- HEAD: This contains the information about the HTML document including the Title of the page, version of HTML, Meta Data, etc.
- BODY: This contains everything you want to display on the Web Page.
HTML Document Structure
Example: To demonstrate basic HTML document structure.
<!DOCTYPE html>
<!-- Defines types of documents : Html 5.O -->
<!DOCTYPE html>
<!-- Defines types of documents : Html 5.O -->
<html lang="en">
<!-- DEfines languages of content : English -->
<head>
<!-- Information about website and creator -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Defines the compatibility of version with browser -->
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<!-- for make website responsive -->
<meta name="author" content="Mr.X" />
<meta name="Linkedin profile" content="WWW.linkedin.com/Mr.X_123" />
<!-- To give information about author or owner -->
<meta name="description " content="A better place to learn computer science" />
<!-- to explain about website in few words -->
<title>w3wiki</title>
<!-- Name of website or content to display -->
</head>
<body>
<!-- Main content of website -->
<h1>w3wiki</h1>
<p>A computer science portal for Beginner</p>
</body>
</html>
Understanding Essential HTML Tags
- DOCTYPE Declaration (`<!DOCTYPE HTML>`): It specifies the HTML version; typically indicates HTML5.
- <html>: The root element that encompasses the entire HTML document structure. It serves as the parent to both the <head> and <body> tags.
- lang attribute: Specifies the language using the “lang” attribute (e.g., lang=”en” for English
- <head>:Container for metadata, title, CSS, scripts, etc.
- Content: While not directly displayed, it serves informational and structural purposes.
- <body>: A body tag is used to enclose all the data which a web page has from texts to links. All the content that you see rendered in the browser is contained within this element.
Contact Us