In the previous article on becoming a frontend engineer, I introduced what frontend engineering is all about, explaining the three aspects of frontend engineering. If you haven’t read it, you can read it here. In this article, I will be presenting the first aspect of frontend engineering (Text) in detail.
The text of a web application is added using the HyperText Markup Language (HTML).
Creating an HTML File
To create an HTML file, the filename should have an extension of .html. For example index.html, or file.html. To add text to a front-end web application using HTML, you’ll need to utilize something called a code editor.
A code editor is an application created to help software engineers write programming languages to create applications. There are several code editors like: Sublime Text, Notepad++, Atom, Visual Studio Code, etc. But I would recommend that you use Visual Studio Code because it is easy to use, has a large community of users (to help when you have issues), and many extensions to make your coding experience better.
For the purpose of this article, download VScode and open it on your computer. Click on the “New File..” icon, and then name it index.html. Congratulations, you’ve successfully created your first HTML file!
Writing HTML
HTML involves writing what you want the application to do in between tags. I’ll explain what I mean, but first, what is a tag? An HTML tag is a keyword that specifies how the web browser will format and display the content.
There are three different types of tags:
The Opening tag: An opening tag looks like this <p>. That’s a “p” tag used to create a paragraph. There are different tags for different purposes, and you will learn them as you go.
The Closing tag: All opening tags must have a corresponding closing tag. A closing tag looks like this </p>. The difference is the slash “/” before the tag content. So when I said HTML involves writing in between tags, I meant in between the opening and closing tags. For example, if I want to write a paragraph, it would look like this
<p>I am a boy</p>
.
The Self-closing tags: This tag doesn’t need to be closed. It is different from opening and closing tags. It is written like this <hr/>. The “hr” tag is used to create a horizontal line on the webpage. It is important to know if the tag you are writing is a self-closing tag, but it will get better as you learn.
Conclusion
Understanding how to write HTML properly is important, as good HTML helps with accessibility, SEO, and styling, amongst other things. There are a lot of sites online to learn the basics of HTML. A good place I can recommend to begin learning and improving your HTML is w3schools. You can build simple HTML projects when you complete the modules. I hope you have fun learning!
Top comments (0)