A Beginner’s Guide to HTML

Learn the basics of HTML

Are you someone who wants to learn how a website works or wants to become a professional Web Developer? The key technologies that we need for frontend web development are HTML, CSS, and Javascript. From the three given technologies, the first thing you might need to know is HTML because without a structure for our website we won’t be able to add styles or interactivity. So what does HTML stand for?

Does it look scary? Don’t get scared because HTML is one of the easiest and less complicated front-end languages to learn, unlike other programming languages.

HTML is a standard markup language that describes the structure of a web page which includes all the text, images, tables, links, and many more elements. Hypertext refers to text that contains links to other texts which is used to navigate through the web. By clicking the special text called ‘hypertext’, you are directed to different web pages on the internet. Markup refers to symbols or code which structures the document data in a specific format and tells the browser how to display that data.

The first version of HTML was written by Tim Berners-Lee in 1993. Since then there had been different versions of HTML and currently, the standardized version is HTML 5.

Let’s say you want to convert the below content written on a word document to an HTML document.

Where should you start? First, we have to pick a text editor to write and edit the HTML code. If you are someone who has no idea how to install a text editor, simply open the Notepad app on Windows, or if you are an Apple user open the TextEdit and get started.

If you are someone who’s planning to do a lot of coding, below are some of the most popular text editors that can be used.

Let’s try to understand the structure of the document.

To give the text, the required type of formatting HTML uses three main building blocks called tags, elements, and attributes.

Let’s first talk about HTML tags. HTML tags help the web browser to understand how to format and display regular text. The angular brackets which are used in HTML are called tags. Tags come in pairs which are called a start/ opening tag and end/ closing tag. The only difference between the two is that the closing tag contains a “/” (slash) symbol.

A basic HTML document may contain the below structure with the main tags.

Let’s add our content written in the word document between the start and end of the body tag since it displays the visible content. Open any text editor of your wish and start writing the below HTML code.

To be viewed on the browser, we need to save the text file with the ‘.htm’ or ‘.html’ file extension. So, let’s save the document as ‘index.html’. Now open the document in your favorite web browser.

Where did all the formatting go? If we just add text to the HTML document it will only display regular text. To format and transform text, we use tags. There are many types of tags. We will discuss the most common tags that can be used to format the content above.

HTML heading: display titles or subtitles. Six heading types are starting with <h1> which defines the most important heading and ending with <h6> defining the least important heading.

HTML paragraph: <p> defines the paragraph tag and always starts with a new line with a margin before and after the paragraph.

HTML list: Used to order a set of items. There are two main types of lists called ordered lists/ numbered lists defined with <ol> tag and unordered lists/ bulleted lists defined as <ul>. Each list item inside the list will start with a <li> tag.

In the above content, it can be seen that ‘WWW’ is formatted to be bold. HTML allows including additional formatting to text to display special content. Below are a few of them.

Bold text: <b>

Italic text: <i>

Important text: <strong>

Emphasized text: <em>

Let’s add the formatting tags to the earlier code.

Now, you can open the document and view it in the browser!

Can you see how the headings got bigger and bolder and became more visually appealing without adding any CSS styling? We can also notice the top and bottom margins are added automatically to the paragraphs and some text is bolded and italicized, simply by using tags.

An HTML element is everything from the start tag to the end tag including the content between the opening and closing tags. The format would be “<tagname> content </tagname>”. Empty elements are tags that don’t have any content or an end tag, for example <br> tag used for line breaks. Elements that contain other elements are defined as nested elements.

You can notice that a link is added to learn more about Tim Berners Lee. HTML links allow you to navigate to different web pages simply by clicking them. We use the anchor tag “<a>” to represent the hyperlink tag, and here we add something called the “href” attribute which indicates the link’s destination or path. An HTML attribute provides additional information about the element inside its opening tag which comes in as name/value pairs.

Finally, let’s discuss how to add comments to the HTML document. What if someone opens your HTML document and is trying to figure out what you have done? HTML comments help to understand the code and are not displayed in the browser. You can see how I have added a comment in the earlier example before the opening body tag and after the closing body tag.

In conclusion, this article gives a guide on how to get started with HTML. Therefore, you will need to practice writing more HTML code to get familiar with HTML.

If you are eager to learn more and try out different HTML code lines online check out W3School’s tutorial on HTML.

We will discuss how to add colors and different styles to make the content more attractive using CSS in upcoming articles. So follow me on medium and stay notified! 😄❤️