These last few months, I've gotten deeper into programming and due to my unexpected intrigue of server-side architecture, I often forget how much I enjoy (and sometimes miss) the straightforward simplicity of working with HTML & CSS.
From my initial introduction to HTML in the early 90s and self-driven surface exploration on my part thanks to sites like Geocities and Xanga, I think it's safe to say that by the time I was eight years old, I understood HTML as a concept, even though I didn't know what it was called or what it was "really" for.
Regardless of my ignorance of the semantics, I was able to make meaningful (to me at least) changes to the code in text editors and understand exactly what was happening because of the clear nature of HTML's structure.
In short, as a child I was able to write in this language even before I even understood the specifics of it, which is pretty amazing. It was this introduction to the World Wide Web's original language that started my tech journey and bolstered my love for front-end work.
HTML can be simple and gratuitously straightforward, but I still find myself learning new things about it all these years later. It's my hope that this post will lead to someone else's interest being piqued and maybe even be the launch point of their tech journey as well.
HTML, or Hypertext Markup Language, was introduced in the early 90s and to this day continues to be the backbone of the vast majority of sites on the internet.
Even early on, the best thing about HTML wasn't it's incredibly straightforward style (even though it's still tops), but how it's made better by it's better half, CSS.
Often when we see the acronym 'HTML', it's fellow 'CSS' (Cascading Style Sheets) usually isn't too far behind. They're basically the Bert & Ernie of the internet. When HTML is used in conjunction with CSS, the internet really comes alive.
Because of this timeless relationship, Devs are able to create interactive, dynamic web pages and applications that expound prolific manner that far extends the 'simplicity' of HTML.
Tags & Structure
HTML elements tell the web page how to behave and are expressed between a set of tags. HTML elements are declared between the <and `> and are structured like the following:
For example, these lines:
javascript
<!DOCTYPE html>
<head>
<h1>My First Heading</h1>
</head>
<body>
<p>My first paragraph.</p>
</body>
will render the following to the screen:
As we can see, the tags themselves are not displayed on the screen, however, their position in the document tells the browser where and how the contents, AKA the attribute value should be displayed.
javascript
<!DOCTYPE html>
<head>
<p>The 'head' location is a great place to import CDN links like jQuery or Bootstrap. Also, a quick aside about head vs. header. Head tag includes information about the document while 'header' contains introductory or navigational aids.
</p>
</head>
<body>
<p> We can utilize a variety of tags within the body which
will display their contents on the screen.
We can also write code within the body
by using 'script' tags!
Either directly:
<script> alert('Hello World!'); </script>
Or by importing an entire JS file:
<script src="/path/to/script.js"></script>
</p>
</body>
Again, there's a huge variety of tags that can be used in the body, commonly 'style' tags are used to incorporate CSS to modify the page or even just a single element on it. If HTML is the skeleton of a web page or app, CSS would be the muscles, tissues, and skin.
However, because CSS can get incredibly lengthy, and best practice is to maintain and import an external CSS file within a script tag in the head of the document.
In Conclusion
Sometimes it really is a great idea to take a break from building in frameworks and routing in the server, just to play around with what you could call the "basics" of the internet. For me it's therapeutic, and it takes me back to all those late nights I spent creating with HTML/CSS just for fun, not even realizing how I would be utilizing that practice years later in life.
For your convenience, here's a quick sheet to reference when building out your next project with HTML/CSS
Even after all this time, I'm still learning new things in CSS so it never gets old, what are some of your favorite CSS tricks to couple with HTML?
Top comments (1)
That's a great cheat sheet! Thanks for sharing! Keep it up Jill!