Getting started with HTML

HTML is the language of the web. Now, HTML is not a programming language, rather it is a markup language that tells web browsers how to structure the web pages you visit. HTML is acronym for Hypertext Markup Language. HTML is made up of a series of elements, which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way.

Best HTML Practices

When writing a HTML code, there are no set rules, as the browser is more lenient with you. However, it is critical to know the various best practices that will help you if you are working in a team.

Use proper document structure. When you write a HTML document and save it with an extension of .html, whether you have used the right markups or not, there is a chance it will still display. The browser will try to make sense of your code. It is imperative that you use the right document structure. Don’t worry about what you see in the picture for illustration, you’ll understand what each means as time goes by.

1. Declare the correct doctype. Sometimes HTML is referred as the declarative language. When writing a HTML document, the first thing to write is the doctype which is the Document Type. The DOCTYPE tells the browser the standards you are using to render your markup correctly.
2. Close tags. Before implementing your code, you’ll have to validate it using the HTML Validator. If you haven’t used the tags correctly, you’ll have validation errors.
3. Validate frequently. When your code isn’t complex, it is easier to debug and correct any syntax errors.
4. Semantics. Semantics mean meaningful tags. Avoid excessive usage of generic tags and use more descriptive tags such as <section> instead of <div>.
5. Lowercase markup. When HTML was invented, a lot of markup was written in uppercase. However over time, lowercase has been preferred. However, HTML is not case sensitive and it won’t matter to the browser.
6. External files. There are files that might be needed for the website such as external stylesheets, place these files in the head of your html document.
7. ALT attribute. When displaying an image, always have the alt attribute in there. This is for screen readers and SEO. Will learn more about this as time goes by.
8. Avoid inline styles. We’ll learn more about different types of styling your html code and why you should avoid using inline styles.

HTML Element

The anatomy of HTML element

An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag. Take your time to familiarize with the picture above of the anatomy of HTML element. It is important noting that there are elements that don’t need a closing tag and are called Empty Elements such as the image element <img>.

Attributes

Attributes contain extra information about the element that won’t appear in the content. An example is below:

Practice

I hope by now you have installed the editor will be writing the code on. If you haven’t check my earlier article on Getting started with web development or YouTube Video on the same.

1. Open your installed editor, type in anything, it could be your name or just the word hello world.
2. Save the file with any name with an extension of .html.
3. Go to the folder where you have saved the file, click on it to open on the browser.

You can see that it displays on the browser despite not using any html elements. Even though whatever you wrote displays, the browser can’t make sense of what you just did so it tries to make meaning of your text.

4. Right click on your browser and click on inspect element. What opens up is the Developers Tool. All browsers have an inbuilt developers tool, that will play a significant role as you continue learning web development. Alternatively, you can use the shortcut to open the developers tool. If you are using windows, press CTRL + Shift + I, that opens the developers tool.

When the developer tool opens, you’ll notice that your text has been marked up by the browser. Unfortunately, the browser won’t know whether your text was meant to be a paragraph, a headline, a list or a link. This is why it is important to use HTML Elements to give meaning to your code.

Exercise

Visit different websites and inspect their elements, what do you see in the developers tool? Even though much of what you see now won’t make sense, with time it will.

If you have any questions, post it here in the comments or under the YouTube comments section or in the Whatsapp group.