HTML Fundamentals

Photo by Jackson So on Unsplash

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.

  • opening tag: name of the element (e.g. <p>).
  • content: in between the opening and closing tag that will be displayed on the webpage.
  • closing tag: </p>.

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.

  • First, <!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 <html lang="en"></html> .
  • Finally, inside the <html></html> we always need one <head></head> and one <body></body> which will be visible to the user.

Text Elements

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 <p> <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.

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 src=""and alternative 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.

  1. Allows search engines to actually know what the image is (least important).
  2. 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).

Hyperlinks

Hyperlinks are a way that we can link documents to one another either internally in the application or externally to another web address.

  1. Links that point to other pages within our own application.
  2. Links that point to outside websites.

Conclusion

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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store