HTML QuickStart Guide
Have you wanted to create your own HTML webpage but you don't know where to start? Well, hopefully this guide will help you get started!
Disclaimer: I am a hobbyist coder with no academic/professional training.
If I mistate something, please contact me to let me know!
This guide aims to help other hobbyist coders get into HTML! It is
not meant to fully teach concepts, but rather give people enough information
to get started in their own learning journey.
What is HTML?
HTML stand for Hyper Text Markup Language. It is the standard markup language for creating webpages. HTML creates the structure by using elements. Each element tells the browser how to present the content.
HTML is not a coding/programing language, it is a markup language. This means that it only functions to define the structure and content of the document. Unlike a scripting language like JavaScript, HTML is not able to execute logic, perform commands, or handle data manipulation. Basically, this means you use html to tell a browser exactly what to display, without executing any functions or commands. However, colloquially, it seems generally acceptable to be lumped into the term of "coding".
HTML is often used along side with CSS (Cascading Style Sheets). CSS is dependent on HTML and cannot be used independently, as it is used to modify how HTML appears in the browser. However, since CSS is not required to have a functional webpage, I will be creating a separate post about CSS.
Where do I write HTML?
HTML can be written in a simple text editor, like Notepad, but I started with Visual Studio Code. I feel like it has many features and add-ons like custom themes and extensions such as the auto-closing tags extension by Jun Han. Also, I haven’t utilized it a lot, but it also has the option to use Emmet snippets in the editor, which can help speed up workflow.
For example, in VS Code with Emmet enabled, if you type "!" (no quotes) into a blank html document and then press tab, it will give you a very basic html page setup. This can save time as the number of html pages your site has increases and you already understand and have basically memorized how to set a page up.
Basic HTML Structure
A basic HTML page structure is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<title> This will appear on the browser tab</title>
</head>
<body>
</body>
</html>
The <!DOCTYPE html> declaration defines that it is an HTML document. The <html> element is the root of the html page, and all other html should be written inside of the opening and closing tags.
The <head> element is the meta information, which is not displayed in the browser page. The <title> element is what information is displayed in the browser tab. As you learn more, it is also where you can connect external scripts and house some smaller internal scripts, such as CSS.
The <body> element houses the content of the webpage. This is where you will build out the majority of the structure of the webpage, as well as containing the text, images, and other elements that you want to display in the browser.
As you can see, most of the elements have both a opening and closing tag pairs (<head></head>). There are many different elements that can be used to create an html webpage, so having an understanding of their structure and their uses is essential to creating larger pages.
Elements, Tags, and Attributes
A html element is comprised of an opening tag (with attributes if applicable), the content, and a closing tag.
<p class="attribute"> This is the content </p>
The main way that I began to truly understand HTML was thinking of elements of being a box, with the tags being the lid and the bottom of the box, the content is what is inside the box, and the attributes change how that box behaves. Understanding the basic structure and syntax of HTML will help you understand how to structure your own sites and allow you to experiment.
Tags
HTML tags are the primary building block of an HTML page. Understanding and memorizing a few of these will help you create various results. Tags are an important part of an element, as it helps with structuring and formatting content for a web page.
Thinking about this with our box analogy, the opening tag is the lid, while the closing tag is the bottom of the box. Any content that you want to put into it goes in between the tags. Some tags I use regularly are :
General Structure :
- <html></html> - used to define the root of an html document
- <head></head> - contains metadata/information for the document (does not print in browser)
- <link> - links external script (like css)
- <title></title> - sets the title of the html document (appears in browser tab)
- <body></body> - defines document body (printed in browser)
- <main></main> - defines main content of a document
- <footer></footer> - defines footer of the document
Content :
- <div></div> - defines a section of the document
- <h1></h1> to <h6></h6> - defines headings in the document
- <p></p> - defines a paragraph
- <a></a> - defines a hyperlink
- <img> - defines an image
If you see, most tags come in ordered pairs. However, some function as an empty tag, as any additional information is defined in the attributes of the element.
There are plenty of more tags that all function in specific ways. Those listed are just the ones that I have encountered the most when creating and maintaining my own site. If you want to look at different tags and their usage, please refer to a resource like W3 Schools or MDN Docs.
Attributes
Attributes provide additional information about an html element. These are written inside the opening tag and can contain multiple at a time.
With our box analogy, these can be thought of things that you decorate the box with. You can have classes that can target a bunch of boxes (with css) or you can change the appearance of one certain box with the <style> tag. Sometimes these will also contain information about the box and what it is going to display.
For example, the <img> tag needs the “src” attribute in order to find the source for the image.
Common attributes you may encounter are :
- src - for <img> tags, defines the source
- href - for <a> (and other) tags, defines the link
- class - can assign a custom class in order to target certain elements through css (can be assigned multiple times)
- id - assign a unique id for an element (can only be set once)
- style - can use css to define inline style (can be useful for modifying single instance apperances)
As with the tags, there are more attributes that modify different parts of an element. The ones above are the ones that I have utilized the most.
Elements
Elements are the combination of tags, attributes, and content. By arranging these, they form the structure of your webpage.
These are the boxes in their entirety. If you wanted to move the element, you would be moving everything that it contains as well. By stacking these boxes, you can structure not only your html, but also the appearance of your webpage (using css).
In order to structure your page, elements can be nested. The <html> element contains the <head> and the <body> elements, while the <head> element contain metadata and other information that isn’t printed in the browser, while the body element contains everything that is printed in the browser page. Think of nesting elements as putting boxes inside other boxes. When modifying the nested boxes, it won’t modify the parent box, but modifying the parent box will modify things inside of it.
While it is not necessary to structure your html in this way for it to work, having structure to your project can help readability for you and others. Below is a very basic example of how you could set up a simple html webpage:
<!DOCTYPE html>
<html>
<head>
<!-- this is a comment -->
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link rel="stylesheet" href="">
<title> This will appear on the browser tab</title>
</head>
<body>
<main>
<h1>This is a Heading</h1>
<p>
This is a paragraph and <br>
will appear on the webpage
</p>
<img src ="" alt = "">
</main>
</body>
</html>
Conclusion
I hope that after reading this quick start guide that you have a better understanding of where to start with HTML. Creating a personal site has been my small slice of solace on the internet, and a way to express my self creatively outside of the current social media platforms. I would encourage you to create your own unique webpage from scratch, but if that seems too daunting at first, I created some themes that are 100% free to use for personal use that are very simple and are annotated for your understanding.
For further learning and understanding, I would recommend a resource like W3 Schools or MDN Docs, as I have used and continue to use these to learn more about HTML, CSS, and other coding languages.
If you have found this guide somewhat useful, and would like for me to make a CSS one, then please let me know! I will prioritize it in my future updates!