HTML101 - What is HTML?

And so it begins, my very first article on Frontend Development.

In this article, I will begin by discussing what HTML is. It is important to note that this article is based on the assumption that:

• Readers should have at least some basic familiarity with using the computer.
• Readers should already have their preferred code editor installed on their computers. Personally, I make use of Visual Studio Code as my code editor.
• Readers should have already carried out some level of personal research to know the foundations of Frontend Development and some prerequisites they will be needing. If you haven't done that already, then I'd suggest you go ahead and read about it in the link below:

Now that you're back, permit me to address you all as Senior Devs already, and let us continue.

HTML is short for HyperText Markup Language and it is the code that developers use to structure a web page and its content. It is a standard practice to have web content structured within a set of headings, paragraphs, data tables, images, numbered or bulleted points, etc. Basically, HTML is used by developers to inject and structure the content of a web page.

The HTML code is written in a document having the .html extension. It consists of a series of what we call HTML Elements which are used to enclose different parts of the web page's content to make them appear or act in a certain way. These elements can make a text or image hyperlink appear different, can italicize words, can make fonts bigger or smaller, and so on.

HTML ELEMENT ANATOMY

So how does the typical HTML element look? An HTML element will always come in the format: <tagname>***content***</tagname>.

Have a look at the anatomy of a sample HTML element below:

This is a typical HTML Element used to inject a paragraph into a web page and as we can see, it consists of an opening tag, the content, and a closing tag. Inside the opening and closing tags, we have the tagname.

1. The Opening Tag: This is written as a less-than sign (<), the name of the element (which in this case is the letter "p" for paragraph), and the greater-than sign (>). This opening tag usually signifies where the element begins to take effect.
2. The Content: This is the actual content of the element that the developer intends to add to the web page. There are some HTML elements though, that are empty and do not need or require content to function. These elements are called empty elements.
3. The Closing Tag: This is virtually the same as the opening tag, except for the fact it includes a forward slash (/) just before the element/tag name. The closing tag is used to signify the end of the element, and failing to include this can cause some errors when your code is served on a browser.

There are many HTML elements that can be used to create a web page. Here are a few examples:

1. <p></p> - this is used to define a paragraph of text.
2. <h1></h1> - this is used to define a heading, and we have about six variations of it (h1 to h6), all displayed in different sizes according to the number assigned.
3. <a></a> - this is used to create a link to another web page or a specific location on the same page.
4. <div></div> - this is used to group other HTML elements together and apply styles to them.
5. <ul></ul> - this is used to create an unordered list i.e. bulleted lists.
6. <ol></ol> - this is used to create an ordered list i.e. numbered lists.
7. <li></li> - this is used to define the list items in both the <ul> and the <ol> elements.

There are some elements though, that do not have closing tags and are written as such in the HTML code. These elements are referred to as self-closing elements, and examples of such elements are:

1. <img> - this is used to embed images in a web page.
2. <input> - this is used to create different types of form fields in HTML.
3. <br> - this is used to insert a line break in the text on a web page.
4. <hr> - this is used to create a horizontal line, to virtually separate content on a web page.

Alright Senior Devs!

This is where I will be stopping for today and I hope you enjoyed the article. In case you have any questions, you'd like to ask, I am just a DM away and I will definitely get back to you and answer your questions.

So until I come your way again next week, do have a blessed Monday and a productive week ahead. See you in a bit!

#FrontEnd #HTML #Developer #Software