Knowledge about HTML is essential whether you plan to use a framework or not when building a website. In this guide I will walk you though how to set up your first HTML page and important considerations to keep in mind. Let's get started.
To add the initial boilerplate code you will need to build an HTML file simply:
That's it! From there you will have the initial boilerplate HTML code to get started.
Let's dive in deeper and understand what this boilerplate actually means.
First with html you define structure with tags. A tag will either be self closing or come in pairs wrapping other tags or content. A pair of tags with content is known as an HTML element.
With <!DOCTYPE html> you are telling the browser that this is an HTML document. Inside the html tags you have the entire page that appears in the browser. There are two parts to the page that appears in the browser. You have the head and the body. The body is what you visually see on your screen. The head will be more discrete and operates more meta. It can be seen fully by inspecting the page in the browser with Chrome DevTools.
You can use Chrome DevTools to view the code you have prepared in your project folder on your local device. It is a great place to conduct testing and investigate issues with your code.
The head section contains meta tags, additional details about the webpage, links to complementary files like stylesheets and scripts, tracking code, & font styles from sites like Google Fonts.
The body section is where you write most of your code for a webpage. It consists of tags, attributes, and content which together make up what is known as an HTML element. Tags have semantic meaning and help definite the overall structure and format of the page as well as provide significance that allows SEO crawlers to better understand the page.
I would say there are two main types of tags: structural and content tags.
Structural tags are generally what you will use to organize page the same way you might organize an essay with an opening paragraph, body, and closing paragraph. The header tags, main tags, article tags, section tags, footer tags, div tags and more can be considered structural tags. These tags are used to organize your content tags. When possible try to use more descriptive tags like header and footer when possible. Although a div tag will still work, the more clarity you can provide to your document the better for SEO.
Content tags are more like line items throughout the project. Content tags could be your first heading for the page (h1 tag) a paragraph (p tag), a link (a tag), or the span tag. These tags are where you will add a content to the page. Same as before try to use more descriptive tags over more generic tags like the span tag.
You also have tags used for forms, an tag for images (<img />) and many others. However for getting started it can be helpful to have this idea of structural and content tags in my mind. At the end of the day just try and use the best tag for the job and know the reason for using specific tags.
No fluff. Just real projects, real value, and the path from code to cash — one useful build at a time.