My first attempt on learning HTML was by myself, through The Odin Project. It was really nice! Great readings, helpful tutorials, and fun projects. My first website was a clone from Google’s homepage, and I got very excited. After about two months of learning front-end languages, I rebuilt this first project and thought that I was already an HTML expert. I couldn’t be more wrong!
To consolidate myself as a software developer, I applied to Microverse. One day on the full-time program was enough to realize that what I knew was only the tip of the iceberg. Turns out that using a lot of div’s, paragraphs and h1’s isn’t enough to build a good web page. This wasn’t clear to me before.
Therefore, I decided to create this list to help HTML beginners like I was a few months ago to learn the basic steps for setting up a good HTML document.
1. Know the correct naming of what you are writing: in HTML, there is a specific term for each component. It might not seem so important when you are writing alone, but knowing the correct name for each thing will help you. Some of the benefits are better Google searches, improved communication with other developers, and a much more professional appearance.
Many times I had difficulty communicating with my coding partner on Microverse because I did not remember the right naming of things. Shame on me!
Here are some basic HTML terms:
- Element: an HTML element is formed by the opening tag, the content, and the closing tag. There are several types of elements, such as paragraphs, div’s, and headings. I will explain more about them later.
- Tags: an opening tag marks the beginning of the element, and consists of a less than sign (<), followed by the element’s name, and a greater than sign (>). The closing tag indicates the end of the HTML element. It has the same formation as the opening tag but has a forward slash (/) before the element’s name.
- Attributes: an attribute is a content added to the opening tag of an element and it has many uses, from providing information to changing styles. It is formed by the attribute’s name and its value. Commonly used attributes are id’s and classes.
If you are fresh on HTML or are struggling with these concepts, I recommend this Codecademy tutorial.
2. Don’t forget the <!DOCTYPE> declaration: it should always be the first line on every HTML document. This isn’t a tag, but an instruction to the web browser about what type of document to expect, and the version of HTML the page is written in. Forgetting it may cause weird rendering of your page. The simplest and most reliable doctype declaration to use is the one defined in HTML5: <!DOCTYPE html>.
Also, never forget to save your file with a .html extension so your OS would recognize it as an HTML document.
3. The HTML tag: although the doctype declaration informs the web browser what language your document is written in, it does not actually add any HTML structure or content. This is done by the <html> element, which should be the second thing in your document. Every other elements from the web page should be between the opening (<html>) and closing (</html>) HTML tags.
According to the W3C (World Wide Web Consortium), you should declare the primary language for each web page. It assists search engines and browser, and it is done by using the lang attribute inside the <html> opening tag, like this: <html lang=“en”>.
4. Inside the <head>: the <head> element is located right after the <html> opening tag. It contains information that is not displayed directly on the web page, the metadata. It is information about the page itself, such as the document title (displayed on the title bar in the browser window), and links to external files, such as the CSS style sheet. The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.
One important <meta> tag is the charset: <meta charset= “UTF-8”>. It is used to inform the web browser what character set is used on the document. UTF-8 (Unicode) covers almost all of the characters and symbols in the world.
Another important <meta> tag that was introduced in HTML5 is the viewport: <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>. The viewport is the user’s visible area of a web page, and it varies with the device. The <meta> viewport element gives the browser instructions on how to control the page’s dimensions and scaling. It sure will help you to make your web page responsive.
Scroll this article for more information about metadata.
5. Below the head comes the body: one more thing you should never forget. As the name said, it defines the document’s body. All the content that will appear on your web page should be inside the <body> element. Simple as that!
And finally…
6. Use HTML semantics: so this was one of the things that I took some time to learn. Not because is hard (it’s really basic!), but because I simply didn’t really know that it existed until my first Microverse project.
This is basically using the many existing HTML elements in a meaningful way. As I said before, in my first projects I used mostly the same elements, such as div’s, which is a non-semantic element, because it doesn’t say anything about its content. A semantic element clearly describes its meaning to both the browser and the developer: <header>, <article>, <table>.
Here is a list of HTML5 semantic elements. And another one.
Benefits of using semantic HTML are:
- Easy to understand: using elements with a clear meaning makes the website’s source code easier to read for other web developers (or for the future you).
- Accessibility: semantic elements makes the web pages accessible for mobile devices, as well as for people with disabilities. This is because screen readers and browsers are better able to understand the code when it is written with semantic HTML.
- It improves your website SEO: Search Engine Optimization (SEO) is a methodology of strategies, techniques, and tactics used to increase the number of visitors to a website. With better SEO, search engines are better able to identify the content of your website and weight the most important content appropriately.
An example of a starter HTML template:
That’s it! Understand these basic concepts helped me to have a fast start setting up my HTML documents, and most importantly, to not forget any of the important elements. I hope that these tips help you as well!