We understood clearly from the course introduction that HTML is the foundation on which everything else is built when it comes to creating web pages. HTML (HyperText Markup Language) provides a structured way to organize and format the content of a web page.
At the heart of every HTML document is a basic page structure. This structure includes a few essential elements that are necessary for any web page to function properly. In this introduction, we will cover the basic page structure of an HTML document and explain the purpose of each element.
Understanding the basic page structure of an HTML document is crucial for anyone learning web development, as it forms the foundation upon which all other HTML elements are built. So let's get started and learn how to create a basic HTML page structure!
Basic page structure
<html>
<head>
<title>Title of the page</title>
</head>
<body>
Content of the page
</body>
</html>
The above is the basic page structure of any HTML document. Let us digest the contents to understand each element.
-
<html>: This is the root element of an HTML document. It encloses the entire document and indicates that the document is an HTML document.
<html> Head contents... </html> -
<head>: This element contains metadata about the document, such as the document title, links to external CSS and JavaScript files, and other data that isn't directly displayed on the page.
<head> Contents here... </head>
-
<title>: This element is used to specify the title of the page, which is displayed in the browser's title bar or tab.
<title> Title here... </title> -
<body>: This element contains the content of the document that is displayed in the browser window. This is where you would include the main content of your page, such as headings, paragraphs, images, and other elements
<body> Contents here... </body>
Note:
HTML elements have opening <> and closing </> tags but not all the elements have closing tags.
We will cover most of the elements in our next lessons and that will help you know each element well.
HTML5 Page Structure
HTML5 is the fifth major version of the HyperText Markup Language (HTML). It is a markup language used to create and structure content for the web. HTML5 was released in 2014 and has since become the standard for creating web pages.
HTML5 introduced many new features and improvements over its predecessors, including:
-
Improved support for multimedia: HTML5 includes native support for embedding audio and video content directly into web pages, without the need for plugins like Flash.
-
Better semantic markup: HTML5 introduced new semantic elements like <header>, <nav>, <footer>, and <article>, which allow developers to create more meaningful and well-structured web pages.
-
Improved form controls: HTML5 includes new form controls like date pickers, colour pickers, and range sliders, which make it easier to create forms that are both functional and user-friendly.
-
Canvas and SVG graphics: HTML5 includes support for creating graphics and animations using the <canvas> and <svg> elements.
-
Offline storage: HTML5 includes support for offline storage using the local storage and session storage APIs, allowing web applications to function even when there is no internet connection.
<!DOCTYPE>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
Content of the page
</body>
</html>
HTML5 has significantly improved the capabilities and functionality of HTML, making it easier for developers to create rich, multimedia web pages and web applications.
So, the basic structure of an HTML/HTML5 document consists of the <!DOCTYPE> declaration, the <html> element, and two child elements: the <head> and <body> elements.
The <head> element contains metadata about the document, including the document title, while the <body> element contains the actual content of the page that is displayed to the user.