Within this guide, you'll discover how effortless it is to craft an HTML document or a webpage. To start coding HTML, you simply require two essentials: a basic text editor and a web browser.
Let's initiate by creating your initial HTML page.
Let's go through the following steps. At the conclusion of this guide, you'll have crafted an HTML file that presents a "Hello world" message in your web browser.
Launch a plain text editor on your computer and generate a new file.
Tip: It's recommended to use Notepad (for Windows), TextEdit (for Mac), or a similar simple text editor for this task; avoid using Word or WordPad! As you become familiar with the basics, you can explore more advanced tools like Adobe Dreamweaver.
Commence with a blank window and type the subsequent code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A simple HTML document</title>
</head>
<body>
<p>Hello World!<p>
</body>
</html>
Now, save the file on your desktop as "myfirstpage.html".
Note: Ensure that the extension .html is specified — certain text editors, like Notepad, may automatically save it as .txt otherwise.
To launch the file in a browser, navigate to your file and double-click on it. It will open in your default web browser. If not, open your browser and drag the file into it.
You might be curious about the code we just used. Let's explore.
<!DOCTYPE html> is the document type declaration, indicating to the web browser that this is an HTML5 document. It's not case-sensitive.<head> element serves as a container for tags providing information about the document; for instance, the <title> tag defines the document's title.<body> element encompasses the actual content of the document (paragraphs, links, images, tables, etc.) that gets rendered in the web browser and displayed to the user.You'll delve into various HTML elements in-depth in upcoming sections. For now, concentrate on grasping the foundational structure of an HTML document.
Note: The DOCTYPE declaration resides at the top of a web page before all other elements, although the declaration itself isn't an HTML tag. Every HTML document needs a DOCTYPE declaration to ensure proper display of your pages.
Tip: The <html>, <head>, and <body> tags constitute the core framework of every webpage. Content within the <head> and </head> is unseen to users except for the text between <title> and </title> tags, visible as the title on a browser tab.
HTML is constructed using HTML elements composed of markup tags. These markup tags represent the fundamental building blocks of HTML. Each markup tag consists of a keyword enclosed in angle brackets, like <html>, <head>, <body>, <title>, <p>, etc.
HTML tags typically come in pairs, such as <html> and </html>. The initial tag is the opening tag (or start tag), and the second is the closing tag (or end tag).
An opening tag and its corresponding closing tag are identical, except for a slash (/) following the opening angle bracket of the closing tag, signaling the browser that the command is complete.
Between the start and end tags, you place suitable content. For instance, a paragraph represented by the p element would be written as:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A simple HTML document</title>
</head>
<body>
<p>This is a paragraph.</p>
<!-- Paragraph with nested element -->
<p>
This is <b>another</b> paragraph.
</p>
</body>
</html>
You'll learn various HTML elements in upcoming chapters.