Back to the basics.
In this week’s blog post, we’re taking it back to the basics with some HTML fundamentals! Now, I cannot stress enough how important it is to understand the basic fundamentals of any language. Even if you’ve used it to build out an application, in my opinion, it is always recommended to understand why things are happening. Understanding why elements are structured a certain way eliminates the need for just memorizing where elements are supposed to be. You’ll be able to truly use the power of the language to its full potential and build out your web application more efficiently! So without further ado, let’s get into it!
What is HTML?
HTML stands for HyperText Markup Language. That being said, a big misconception is that HTML is a programming language and that is not true. HTML is a markup language that consists of elements that describe different types of content on a webpage.
There are 3 parts of an HTML element:
- opening tag: name of the element (e.g.
- content: in between the opening and closing tag that will be displayed on the webpage.
- closing tag:
Elements with no content, like a
<img> tag, do not need the closing tag and instead will look like this when you use them
<img />. Before we get too into elements, let’s first talk about Document Structure.
HTML Document Structure
The HTML document defines the layout of your webpage and follows a particular structure that is essential for building out your webpage appropriately.
An HTML document is composed of the following elements:
<!Doctype html>is declared at the very top of the document and tells the browser that this document uses HTML.
- Next, an HTML element is created
<html></html>which is where we can specify certain attributes like language that we will use for a webpage
- Finally, inside the
<html></html>we always need one
<body></body>which will be visible to the user.
It is important to maintain the structure for efficiency but also so that others reading your code can easily follow along.
Text elements in HTML are utilized to organize and create structure in a document and onto the webpage. If you were to copy and paste a block of text into HTML without using
<h1> tags, it you would see just a block of text rendered on the webpage. No appropriate spacing or boldness was added. Text elements are essential for not only structuring the content on your webpage, but also for the organization. With HTML5, we now want to use semantic elements. This means that we want to use elements that actually have a meaning or purpose rather than just being something to remember.
For instance, prior to HTML5, we used to use
<b></b> if we wanted to bold text. Now yes, you may think, well b stands for bold, doesn’t it? While yes, that is true, however, a more semantic way to bold our text with HTML5 is using
<strong></strong>. We want this piece of text to be bolded and have a strong presence so this is why
<strong></strong> is used and recommended to use.
The series of
htags allows goes from 1–6. An “unspoken rule” of structuring your HTML document is that typically, we only want to have one
<h1></h1> tag per document. However, we can have multiples of the other
h tags. Each
h tag decreases in size as you go up like such:
So as you can see, the
<h1></h1> tag is typically the title of the page.
More on another important text element: lists. List come in 2 types: ordered
<ol></ol> and unordered
<ul></ul> . Both of these list types will serve as the parent element to their child element a list item
<li></li> . In an ordered list, the list elements will appear in numerical order starting off with 1. In an unordered list, the list elements will appear in bullets on the webpage.
Images and Attributes
Displaying images on a webpage is actually easier than it sounds, thanks to the wonderful
<img /> tag. But wait, that’s not the only thing that makes displaying images great, the reason why we can display images appropriately on a webpage is due to the attributes that we define in the tag! What is an attribute you ask? Well, attributes are basically pieces of data that we can use to describe elements. So for instance displaying an image. Inside the
<img /> tag we will use the source
alt=""attributes like such:
<img src="link to webpage or name of picture" alt="description of picture" /> . The
src attribute describes the source in which the browser should read the image.
alt attribute describes what the image is about and this is extremely important for 2 reasons:
- Allows search engines to actually know what the image is (least important).
- It allows those who are blind and use a screen reader to use a website with images as the screen reader will read the alternative text (most important).
It is essential as a web developer to be inclusive for all so please always make sure to always define the alternative attribute for your images!
Hyperlinks are a way that we can link documents to one another either internally in the application or externally to another web address.
Hyperlinks can be categorized in 2 ways:
- Links that point to other pages within our own application.
- Links that point to outside websites.
To create a hyperlink we will need to use the anchor tag
<a></a> . Then inside the anchor tag, we need to define the
href attribute, also known as the Hypertext Reference, which will have the link or path to our desired page like such
<a href="https://www.medium.com/myblogpage">My Technical Blogs</a>. If you also want to have your user open a new tab when they click on the link instead of redirecting on the current browser, you can define the
target attribute inside the
<a> tag as well like such
href="https://www.medium.com/myblogpage" target="_blank">My Technical Blogs</a> . This will now open a new tab instead of redirecting on your current tab so your user can still browse your application while also observing the link!
It is also important to mention that it is key to group-related elements. So say for instance you have hyperlinks to different pages of your website, and therefore these links are known as nav items. So since these all link to different parts of your application, this is known as a navbar which you can group together like such:
This may seem a little redundant right now, however, grouping related elements together allow you to not only keep your HTML document organized but also prepare you for when you have to use CSS for styling!
Although I only covered very few topics in HTML fundamentals, these are the concepts I utilized the most when I started using HTML. Now you may have noticed that I did not get into HTML forms as I think that requires an entirely separate blog post but more on those next week! As always, feel free to send me any feedback or questions! Have fun practicing your HTML or even using it for the first time! The instant gratification you get when changes in your HTML document are immediately reflected in your web browser is so fascinating to me. I love frontend development and I hope that this blog post was enough to get you started in your developer journey! Happy coding!