The Basics of HTML
The internet is a vast place; while there may be many different protocols to connect to people, HTTP is by far the most used. It follows that the basis for webpages is called HyperText Markup Language. It is not a programming language, but rather a markup language used to describe a document to be displayed in a web browser.
Why Learn HTML?
While most websites do not strictly use HTML alone, learning it is still an integral part of becoming a web developer.
HTML has gone through several revisions throughout its lifetime. In this guide, we will be focusing on HTML5, the currently most widely used standard across the web.
Supplies
You don't need any fancy code editors or IDEs; these are merely conveniences that more seasoned developers use. As such, any text editor that does not apply special formatting or include images, shapes, or other objects will work for this example. If you're still unsure about which editor to use, Visual Studio Code is a great tool for beginner coders. Any text editor such as Notepad will suffice, though.
Note:
This guide assumes that you are using a computer with Microsoft Windows installed, so bear in mind that these instructions are not applicable if you are using a different operating system, such as MacOS or any derivative of Linux. On Windows, by default, file extensions (e.g. ".exe") are hidden. For our convenience, we will disable this feature so that we can see these extensions. In the File Explorer, click the View tab and check "File name extensions". You will now be able to see file extensions, but be warned that when renaming a file, you must also retain the extension as part of the name, lest it become unusable.
Getting Started
We'll start off by creating our first file, hello.html. Create a new file and name it "hello.html". You can easily do this by opening Notepad and clicking "Save As...". Be sure to select the file type as "All Files" when saving/creating the new file.
Adding Our Code
Now that we have a canvas to work with, let's create our first web page with the code as shown. Don't worry if your text isn't colored exactly as it is here. This is merely syntax highlighting for convenience and has no bearing on the code.
Understanding the Code
To understand what's going on here, let's break down the code we just wrote.
HTML uses a system of "tags" and "attributes" to declare objects in the document and their attributes.
For example, the root tag
<html lang="en">
declares the beginning of the HTML code.
</html>
Indicates the end (notice the slash). Most, if not all tags follow this convention of "opening" and "closing" in this manner.
However, there are some exceptions to this rule; some tags, such as this one:
<img src="cool_image.png"/>
are "self-closing", so to speak.
About !DOCTYPE
It should be noted that the !DOCTYPE declaration at the top of the document is just that, a declaration. It is not an element, but rather an indicator to a browser of the type of document it should expect to display.
About Attributes
An attribute is a property attached to a tag/element. In the case of the root html element, lang is an attribute whose use is often encouraged because it indicates what language the document is written in. Attributes can serve different purposes, but the many types of tags/elements, attributes, and their purposes are beyond the scope of this guide.
Conclusion & Notes
This guide serves as only a starting point for learning the basics of HTML syntax; because of the varied nature of tags and attributes, they are not detailed here. For any developer, it is important to read documentation of any and all things they utilize—including HTML. Many resources exist that teach the more nitty-gritty details of this markup language, but be aware that although HTML is standardized, some features may have spotty implementation or support in browsers. Mozilla Foundation has developer resources which include that of showing what an element or attribute does, and which browser(s) it is supported on.
Challenge
Using what you've learned, create a web page with an image and a paragraph of text. If you're stuck, remember the earlier mention of
<img/>
as well as
<p>
being a paragraph element.