Why is HTML?
Welcome to the Dark Side. We got energy drinks and tears here.
Hello and welcome to the world of pain―I mean, web development.
CyCy…uhmmm I think you have a grammar error in your title. You mean what is HTML and not why is HTML.
No. Don’t worry. That was intentional. I have lost my mind. I’m kidding.
But you’re probably here, because you’ve been non stop seeing ads such as:
Change your life now! Learn coding in as little as a few months!
Want to work from home? Learn coding.
Want to make six figures and work from home? You gotta learn how to code!
Although I cannot say that I am one of those who is making six figures (yet―manifest because this economy is not economying), a few months ago, I was drawn into the web development world. Not because of the ads, but because I remembered how awesome MySpace was (nostalgia bit my butt).
If you don’t know what MySpace is, then congrats. Your knees are still strong and your joints don’t make weird noises yet.
I signed up for University of Toronto, Continuing Education, Full Stack (Software Engineering) Bootcamp and got into Mimo as well as soon as my bootcamp company did layoffs (irony at its finest)―because how hard coding can really be if these ads are saying that I can learn it in a few months right?
LOL.
Anyways, if you are a newbie as well, you are most likely starting your journey in HTML (unless you’re crazy and started with Python and C++. You know who you are).
Many would argue that HTML is easy and basic! However, I think that’s because we’re all seasoned coders now, and we have forgotten what it is like to be a fresh meat.
It is intimidating. Confusing. And can be discouraging.
So, let me hold your hand too, just like how Mimo and the countless YouTube videos I’ve watched.
What is HTML (corrected title)
HTML, which stands for HyperText Markup Language, is the standard markup language used to create web pages.
It provides the basic structure of sites, which is enhanced and modified by CSS and JavaScript.
HTML uses a series of elements, represented by tags, to enclose different parts of the content making it visible or functional on the web.
These elements tell the web browser how to display the content, including text, images, and other forms of multimedia.
Holy crap, CyCy, that went over my head!
Don’t worry. It did too for me when I started.
Think of HTML as your skeletal system (alright, that is morbid. Sorry. I’m also a horror writer) or the foundation of your house. Before you start styling (CSS) your windows and doors, and making sure that they’re functional and responsive (JavaScript or React), you need to have the structure down first.
The users such as you and I, don’t see HTML when we go on websites or apps (unless you click inspect but we’ll go over that in the future).
Does that make more sense now?
HTML Structure
So, how is HTML structured then?
index.html
<!DOCTYPE html>
<html>
<head>
<title>Steal My Notes Here</title>
</head>
<body>
<h1>Why is HTML</h1>
<p>Welcome to the DarkSide. We got energy drinks and tears</p>
<img src="example.jpg" alt="An example image">
</body>
</html>This code sets up a webpage with:
- A title that appears in the browser tab.
- A heading (
<h1>) that is typically displayed prominently. - A paragraph (
<p>) that provides some text content. - An image (
<img>) that points to “example.jpg” and includes alternative text for accessibility. Remember to replace"example.jpg"with the path to your actual image!
If you have noticed, that code is organized in a top-down manner, because HTML is usually read as such.
When a web browser reads an HTML document, it reads the code from the top of the file to the bottom, interpreting and displaying the content in the order it appears.
This top-down processing affects how elements are displayed on the page and the sequence in which scripts or styles are applied.
It’s vital for developers to consider this when structuring their HTML documents to ensure that the page loads and behaves as intended.
Therefore, you cannot put the <!DOCTYPE html>, as an example, to the very bottom of your code!
HTML Anatomy
- The Opening Tag: This features the element’s name (‘p’ in this instance) enclosed within opening and closing angle brackets, marking the beginning of the element — where the paragraph starts.
- The Closing Tag: Similar to the opening tag, but with a forward slash preceding the element’s name, indicating where the element concludes — where the paragraph ends. Omitting this tag is a common mistake among beginners and can cause unexpected outcomes.
- The Content: This is what is contained within the element, which, in this case, is text.
- The Element: The combination of the opening tag, closing tag, and the content forms the complete element.
What is attributes?
Now, let’s take it up a notch (just a little). Elements can also have attributes.
Attributes provide additional details about an element that you don’t want displayed in the actual content.
In this example, ‘class’ is the attribute name, and ‘editor-note’ is the value assigned to it.
The ‘class’ attribute assigns a non-unique identifier to the element, which can be used to apply styling and other attributes to it and any other elements sharing the same class value. Some attributes, like ‘required,’ do not need a value (don’t worry, besties. I will go over class and ids in the future too).
Attributes that assign a value must adhere to the following format:
- A space separates the attribute from the element name or another attribute if more are present.
- The attribute name is followed by an equal sign.
- The attribute value is enclosed in quotation marks.
Nesting elements
When you put an element inside an element, that is called nesting.
index.html
<p>Miles Morales also has <em>no money</em> and no way home</p>In this example, <em></em> turned “no money” into italics.
Elements must be properly opened and closed to ensure they are nested correctly, either completely inside or outside one another. If they overlap, the web browser will attempt to interpret your intended structure, often resulting in unpredictable outcomes.
Therefore, it’s important to avoid overlapping tags!
index.html (DO NOT DO THIS)
<p>Miles Morales also has <em>no money and no way home</p></em>Void elements
Void elements are no content elements.
index.html
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/49ec1464-d899-400a-b608-c48c76b500d2/dfoxgpr-8b556792-f920-477a-b859-60e14a28dab1.jpg/v1/fill/w_894,h_894,q_70,strp/miles_morales___spider_man_across_the_spider_verse_by_patrickbrown_dfoxgpr-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTI4MCIsInBhdGgiOiJcL2ZcLzQ5ZWMxNDY0LWQ4OTktNDAwYS1iNjA4LWM0OGM3NmI1MDBkMlwvZGZveGdwci04YjU1Njc5Mi1mOTIwLTQ3N2EtYjg1OS02MGUxNGEyOGRhYjEuanBnIiwid2lkdGgiOiI8PTEyODAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.I5S6zOtVEuFeANdsf0ciXpZG-ueE1ITVbtQCazZvBPA" alt="Miles Morales - Spider-man Across the Spider-verse by Patrick Brown" />This has two attributes, yet it lacks a closing tag and does not enclose any content.
This is due to the nature of an image element, which is not designed to contain or affect content.
Instead, its function is to embed an image directly into the HTML page at the specified location.
Let’s create your first HTML Document!
When you started reading this post, I immediately threw this at your face even after promising that I’ll hold your hand. That is because I firmly believe in learning on the job (just kidding lol but if you worked retail, you know what this feeling is).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Spiderverse Crazy Fandom</title>
</head>
<body>
<h1>No money, no way home</h1>
<p>Miles Morales, like all his Spiderman predecessors, also has no money</p>
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/49ec1464-d899-400a-b608-c48c76b500d2/dfoxgpr-8b556792-f920-477a-b859-60e14a28dab1.jpg/v1/fill/w_894,h_894,q_70,strp/miles_morales___spider_man_across_the_spider_verse_by_patrickbrown_dfoxgpr-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTI4MCIsInBhdGgiOiJcL2ZcLzQ5ZWMxNDY0LWQ4OTktNDAwYS1iNjA4LWM0OGM3NmI1MDBkMlwvZGZveGdwci04YjU1Njc5Mi1mOTIwLTQ3N2EtYjg1OS02MGUxNGEyOGRhYjEuanBnIiwid2lkdGgiOiI8PTEyODAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.I5S6zOtVEuFeANdsf0ciXpZG-ueE1ITVbtQCazZvBPA" alt="Miles Morales - Spider-man Across the Spider-verse by Patrick Brown">
</body>
</html>Here, we discuss the following elements:
- — The doctype is an essential preamble. Historically, back when HTML was in its early days (around 1991/92), doctypes served as references to rules that the HTML page needed to adhere to in order to be recognized as well-formed HTML, which included benefits like automatic error checking. Nowadays, they are primarily used to ensure that the document behaves correctly in browsers. That’s essentially all you need to know for the moment.
- — The
<html>element encases all the content on the page and is often referred to as the root element. It includes thelangattribute, which specifies the primary language of the document. - — The
<head>element houses all the metadata and links needed on the HTML page that isn’t directly displayed to viewers. This includes metadata like keywords and descriptions for search engines, CSS for styling, character set declarations, and more. - — This tag defines the character set for the document as UTF-8, accommodating almost all characters from the majority of written languages. There’s no downside to setting this, and it helps prevent potential issues.
- — This meta tag ensures that the page is rendered at the viewport’s width, which prevents mobile browsers from displaying pages wider than the screen and then resizing them.
- — The
<title>element sets the page’s title, which appears in the browser tab and is used when bookmarking the page. - — The
<body>element contains all the visible content intended for users when they visit your page, such as text, images, videos, games, and playable audio tracks.
This pretty much sums up the basics of the HTML elements and its structure.
Try this out for yourself and don’t worry! I’ll also be posting about different tags and elements as well. I will be breaking it down to prevent info overload (because when you’re super new, everything can be overwhelming).
Reference: HTML: Creating the content and my notes 😝💋
-
Implementing Dark Mode in React
We have previously talked about useState before. A great way to create CSS classes on the fly is to use state variable! Here is an example of how to create Dark Mode in React by using string interpolation to construct the individual classes based on the state variable mode. index.html index.jsx App.jsx App.css So, if…
-
Understanding Props in React: A Comprehensive Guide
This content explains the concept of props in React, which allow data to be passed to components, making them dynamic. It covers how to access props as objects, pass multiple properties, and handle different data types. The importance of correctly rendering non-string values and using props in JSX is emphasized.
-
The Power of JSX: Combining HTML and JavaScript
JSX is a syntax extension for JavaScript that resembles HTML, used primarily in React to create components. It allows developers to write HTML-like code within JavaScript, enhancing readability and enabling dynamic web applications. With JSX, one can embed JavaScript expressions, making the integration of logic and UI layout seamless.
-
Organizing React Components for Better Code
The content discusses best practices for organizing React components in separate files for maintainability. It details the process of importing React, creating functional components, and exporting them. Additionally, it covers returning multiple elements and using named vs. default exports, emphasizing strategic organization for better code management.
-
Step-by-Step Guide to Rendering React Components
The content provides a step-by-step guide on rendering components in React. It emphasizes creating and linking HTML and JavaScript files, setting up the main component, and utilizing the createRoot function to manage rendering. The author injects humor while guiding readers through the essential concepts of React component rendering.
-
Introduction to React: Understanding the Basics
React is a JavaScript library for creating single-page web applications that dynamically update without page reloads. It organizes code into reusable components, akin to functions returning HTML-like JSX. This enhances development efficiency, as components can be reused, resembling custom HTML tags. Overall, React simplifies coding while improving functionality.
-
HTML Structure Explained: A Beginner’s Guide
The content discusses HTML, the foundational markup language for web development. It highlights its structure, including elements like tags and attributes. The post humorously reflects on the author’s learning journey while encouraging newbies by simplifying concepts like nesting elements and the importance of HTML in web design. It concludes with code examples.
-
Why Use Pure Functions in React Components?
Pure functions in JavaScript are self-contained and produce consistent results without affecting external variables or objects. They enhance clarity and maintainability in code, minimizing bugs. Unlike impure components that modify existing variables, pure components receive data as props. Understanding component relationships, like the React render tree and module dependency tree, further optimizes performance and structure.
-
React Components Explained: A Guide for Developers
This post analyzes React components, highlighting their crucial role in creating dynamic user interfaces. It details the types of components, including functional and class components, and explains props and state. Additionally, it covers lifecycle methods and emphasizes the importance of reusability and composition in building complex applications effectively.