<!DOCTYPE html>, <html>, <head>, and <body>, forming the foundation of an HTML document.
<!DOCTYPE html> declaration informs the browser that the document is written in HTML5, ensuring proper rendering.
<head> section contains metadata such as character encoding (<meta charset="UTF-8">) and viewport settings, which are important for page performance and SEO.
<body> section contains all visible content on the webpage, including text, images, links, and other elements.
<h1>, <p>, <a>, <img>, and lists (<ul>, <ol>, <li>) help organize and display content within the body of the document.
If you are just starting your journey into web development, one of the first things you will master is creating HTML structure of the webpage. HTML, short for Hypertext Markup Language is one of the most basic building blocks in the construction of web sites. The orgaizational structure of HTML respectively means the frame of HTML documents through which browsers distinguish the position of the elements of a webpage, i.e., text, images, hyperlinks etc.
In this tutorial, we shall take you through the parts which make up standard HTML tag together with meaningful examples. At the start of studying HTML, or if you have some forgotten knowledge this guide will help you improve your understanding of how the HTML documents are built.
Before going into further detail about HTML, let’s first learn about the basic document structure by using only HTML. Formatting of web page involves formulation of several basic compounds that when put together provides a working webpage. Here’s the basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Structure</title>
</head>
<body>
<h1>Welcome to HTML!</h1>
<p>This is an example of the basic HTML structure.</p>
</body>
</html>
To understand the basic HTML structure better, let’s understand some common tags used within the body of an HTML document:
<h1> to <h6>: These are heading tags; the <h1> is first-levelling for a page, and the <h6> is the least important. These assist in the organizations of the content starting with the highest level of the hierarchy.
<h1>This is the main heading</h1>
<h2>This is a subheading</h2>
<p>: This tag is used where there is a likelihood of having paragraphs. Anything put in-between <p> tags is considered plain text by the browser no matter how big or small the amount.
<p>This is a paragraph of text.</p>
<a>: This tag defines hyperlinks. It permits someone to refer to other Web pages or other resources.
<a href="https://codejn.com">Visit Code Junction Website</a>
<img>: The html tag named <img> is used to show images which are present in a webpage in the browser.
<img src="image.jpg" alt="An example image">
<ul> , <ol> and <li>: These tags are used to accomplish list building. The <ul> gives list in the form of bullet points, <ol> forms the list in the form of numbers and <li> forms the list item.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
The fundamental layout is important to SEO because search engines extract and evaluate content based on it. For example:
It’s important to organize your HTML well so that a search engine can easily understand what it has crawled. If you are interested in further SEO recommendations you can click on this link to the Google Search Central Blog where they have guidelines regarding HTML structure and SEO.
Once you learnt the basic HTML tags that create the structure of your page the next step is to style your page using CSS (Cascading Style Sheets) and add functionality using JavaScript. The following technologies let you style your page and make it interactive to help you create an interesting website.
<style>
h1 {
color: blue;
}
</style>
The <!DOCTYPE html> declaration is used to tell the web browser which version of HTML the page is written in. In modern web development, it specifies that the page is using HTML5. It helps the browser render the page correctly according to the HTML standards.
The basic elements of an HTML document include:
<!DOCTYPE html>: Declares the document type.<html>: The root element that wraps all HTML content.<head>: Contains metadata about the document, such as the title, character encoding, and links to stylesheets.<body>: Contains the content of the webpage that is visible to users.The <head> section contains meta-information about the document (such as the title, meta tags, and links to CSS), which isn’t directly visible to users. The <body> section contains the content of the webpage (text, images, links, etc.) that users can see and interact with.
The <meta> tag provides metadata about the HTML document. For example, the <meta charset="UTF-8"> tag defines the character encoding for the document, ensuring that all characters display correctly. Another common use of the <meta> tag is setting the viewport to ensure the webpage is responsive on different devices.
Semantic HTML tags help describe the content more clearly, both for developers and search engines. These tags improve the accessibility of your webpage and provide better structure, which can lead to improved SEO (search engine optimization). For example, the <header> tag indicates the top section of a webpage, while the <footer> marks the bottom.
HTML document also goes by the name of web document, which is a text file only containing the HTML code used in the construction of web pages. HTML starts with the <!DOCTYPE html> and other elements of the documents it organizes for display in web browsers containing <html>, <head>, or <body> among others.
HTML was first created by Tim Berners-Lee in 1991. It has, over the years been normalized by the World Wide Web Consortium (W3C) to promote uniformity when developing websites.
HTML or Hypertext Markup Language is a language used in the creation of web page. Web page is the framework of the contents of the web, allowing the browsers to present the texts, images, hyperlinks, and media content. It should be noted that with HTML in the world has never been the same without thus cannot be overemphasized.
HTML main role is to organize and display content on the web. It specifies the construction of items such as headings, paragraphs, hyperlinks, images, and lists, to establish well-organized and click-active Website pages.
The <!DOCTYPE html> declaration simply informs the web browser that the document is written in the version 5 of the HTML mark up language. This makes sure that the web page is rendered well in accordance to today’s web standards.