HTML is the language of the web. It’s what makes up the structure and content of every website you visit.
But don’t worry, learning HTML is easy and fun! In this section, we’ll cover everything you need to know to get started with HTML coding.
What is HTML?#
HTML stands for Hypertext Markup Language. It’s a markup language used to create the structure and content of web pages. In other words, it’s what makes up the bones of every web page you see.
The Basic Structure of an HTML Document#
An HTML document is made up of different elements that define the structure and content of a web page. These elements are enclosed in tags that define their purpose and how they should be displayed on the page. You can think of it as a skeleton that gives the web page its structure and allows the browser to display the content correctly.
To start an HTML document, you need to add a document type declaration. This tells the web browser which version of HTML is being used. This is usually at the very top of the document, before any other tags. Here’s an example:
<!DOCTYPE html>
Next, you need to define the start of the HTML document using the following tag:
<html>
The head tag contains metadata about the document, including the title, author, and other information that is not displayed on the page. The metadata is a set of data that describes and gives information about your web page. Here’s an example:
```html
<head>
<title>Your Title Here</title>
</head>
Finally, the body tag contains all the content that is displayed on the page, including text, images, videos, and other multimedia elements. In this page, for example, all the text you see is contained within the body tag. Here’s an example:
<body>
<h1>Welcome to my website!</h1>
<p>This is some sample text.</p>
</body>
Setting up your development environment for HTML coding#
To get started with HTML coding, you will need a text editor to write your code and a web browser to test your web pages. There are many text editors available, both free and paid, that are specifically designed for web development. For this course, I recommend that you use VS Code, but you can choose whichever you like.
For testing your web pages, you can use any modern web browser such as Google Chrome, Mozilla Firefox, or Microsoft Edge. Most modern web browsers have built-in developer tools that allow you to inspect and modify the HTML, CSS, and JavaScript of a web page. We recommend that you use Chrome, as in our courses, most (or all) of our examples use Chrome.
The full template#
Now, let’s get a climpse of what a full HTML document looks like. Here’s a simple HTML document that contains a title, a heading, a paragraph, a list, and a link.
You can save this code in a text editor or code editor (such as Sublime Text, Atom, or Visual Studio Code) and then open it in a web browser to see what it looks like. Simply save the file with a .html extension (e.g. my-first-html-page.html) and then double-click on the file to open it in your default web browser.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to my first HTML page!</h1>
<p>Here is some sample text that you can use to practice your HTML coding skills. Try adding some more text or experimenting with different HTML tags to see how they affect the display of your content.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<a href="https://www.example.com">Click here</a> to visit an example website.
</body>
</html>
You will see the content of the web page displayed in the web browser. Don’t worry if it looks a little different from what you expected. We’ll cover how to style your web pages in a later section.
Conclusion#
In conclusion, HTML is the foundation of web development, and understanding its basic structure is essential for building web pages. By setting up your development environment and learning the basics of HTML, you can begin to create your own web pages and expand your knowledge of web development!