Forem: Ashley R.

Understanding HTML Elements: Tags, Attributes, and Values

Ashley R. — Tue, 07 May 2024 13:03:30 +0000

Let's break down the basics of an HTML line of code by explaining the element's behaviors, including tags, attributes, and values. As a code newbie, we know the basics of writing a single line of code such as this:

<h1>This is a header</h1>

But when you start coding certain elements that include tags such as img, input, form, and more, you need to add attributes to tell the browser what to do with them.

The relationship between the three is needed to tell browsers what and how to display the content on the webpage by certain behaviors.

Take this element for example:

<img src="https://www.pexels.com/photo/a-book-on-a-bed-22481814/" alt="a picture of a gratitude book on a bed.">

The tag is img (note this is a self-closing tag), the attributes are src and alt, and the values of those attributes are in quotations.

This tells the browser to display an image img, where to find the source of this image src, along with an alternative text for when the image can't be displayed, and for screen-readers alt.

To further explain what each does, let's break them down below.

So Elements and Tags Aren't The Same?

One myth I thought while learning HTML is that elements and tags are the same. Nope.

Elements are chunks of data that tell the browser how to display information. It contains an opening tag, content, and a closing tag if it's not a self-closing tag.

Tags are what's needed to create elements. As Muthu Annamalai Venkatachalam said in the article, HTML Tags, tags are keywords used to create visual content on a webpage.

It tells the browser what type of content to display.

They normally have angle brackets <> around them, indicating they are a tag, such as <p></p>, <h2></h2>, <div></div>, <section></section>, and more.

Most tags have opening and closing tags, while the closing tags will look like this: </>.

While some tags such as <img>, <input>, <embed>, and <area> are self-closing tags, which don't require a closing tag to function.

However, some tags can't function correctly without an attribute to give it a certain behavior or additional information.

What's an Attribute and it's Value?

An attribute gives a tag a behavior, which tells the browser what to do with it or information about it.

The name of the attribute is the identifier, which indicates what to do with an element, and the name of the value is how to configure it.

I think of it as a what/how relationship.

Take the img tag as an example. This tag needs attributes to give browsers information on how to display an image.

When you add the attribute src to the img tag, the src tells the browser that there's a source to the image. While the value of the src attribute tells browsers where to find the source.

Using the code from earlier in this post, here is an example of the src="link to source" relationship.

src="https://www.pexels.com/photo/a-book-on-a-bed-22481814/"

When adding this to the img tag, browsers will find the source through the link provided and display it on the web page.

Also, it's important to include an alt attribute to all images for the benefit of browsers, user experience, and SEO purposes.

A good practice for writing alt values is to simply explain what's going on in the image.

How To Write An Attribute and Value

It's also good to know that attributes are included in the opening tag in an element and never in the closing tag. To identify them, it will look like this:

name="value"

As a great reference, here is a complete list of HTML Attributes, along with descriptions of what they do and how to use them.

When you click on each attribute, you will see documentation on how to use them, and values to use to configure them.

I hope this helps you as it has helped me better understand the relationship between these terms.

The Importance of HTML's Title Tag For SEO

Ashley R. — Mon, 29 Apr 2024 16:53:53 +0000

Fun fact: I learned SEO after learning how to code. So I always knew the importance of an optimized title for SEO purposes, but I never put the one and two together until now.

While relearning HTML, I was reading about the title tag. The title tag's purpose is to tell search engines and you what the web page is about.

Well, mostly, it gives it a name. So yep, it is the name of the web page. No matter if the web page is the home page or a page of the home page, each one should have its own name.

And that's where the title tag comes into play.

Where To Find The Title Tag?

In the HTML file, the title tag is at the beginning of the file. It will look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

If you don't give your web page a name, it will display as the name of the file, which could be "index.hmtl".

So before you start coding the rest of your web page, take this time to properly name the title.

On the user side of the browser, we can see the title tag information on the tabs. Look at what's on your current tab right now. As I'm writing this post, mine says: "New Post - DEV Community".

That means the devs named this specific web page "New Post" along with their branding "DEV Community" as the title.

If you are using a CMS like WordPress, configuring the title tag will be in Settings > General > Site Title.

Depending on certain plugins for WordPress, you can configure the title on each webpage and add your branding at the end of the pages, just like DEV Community did.

What Does The Title Tag Have To Do With SEO?

SEO stands for search engine optimization. It's when you organically and strategically optimize a website or webpage for it to show up on search engines by certain keywords.

So when it comes to reading the code on your web page, search engine browsers will view the title tag first before your H1 tag.

The difference between the two tags is the title tag gives your webpage a name, while the H1 tag defines the content of the webpage.

Was that kinda confusing? I'll give you an example.

Let's say you (Joe Johnson) are a freelance web developer located in Atlanta, GA. On your home webpage, the title could be:

<title>Joe Johnson | Atlanta Web Developer</title>

And the H1 on your home page could say something like:

<h1>Joe Johnson Is A Creative Freelance Web Dev In Atlanta</h1>

So now, search engines will have a clear understanding of what the website is about and people can now find your website by keywords, "freelance web developer, web developer in Atlanta, Joe Johnson web developer, etc..."

When doing local SEO, it is important to include your location in your title tag and header tags.

But don't overdo it because it could come off as spammy and search engines could flag your website for keyword stuffing.

Are the Title and Head Tag The Same?

Nope, they are completely different. The head tag is where you put all of the important information strictly for browsers to understand what your web page is all about.

This information is not shown on the webpage as content.

It includes the meta tag, (charset encoding), which tells the browsers how to display special characters and symbols from different languages.

The meta tag also tells the browser the viewpoint name and how to scale the content of the webpage.

And lastly, the title tag is hosted inside of the head tag.

I hope this information helps you because it helped me understand how to properly title my webpages instead of giving them generic names like a placeholder.

Is anyone into SEO? I'm currently learning how to keep SEO in mind when creating clean code while optimizing it for a great user experience.

After 3 Years, I'm Back To Coding

Ashley R. — Mon, 22 Apr 2024 16:43:06 +0000

They say it's like riding a bike. You get on it and start peddling.

Well, after 3 years of no coding, I think I need training wheels.

Though I can remember some of the basics, I'm not too comfortable building anything of the same level of complexity as I had a few years ago.

So if you are getting back to coding again after a year or 10, here are some things to help ease your mind.

Give Yourself Grace

Don't let anything overwhelm you and don't beat yourself up for not being as great as you were before. It's totally fine. Just give yourself some time and enjoy the process of being a student again.

Always Be A Student

The great thing about coding is that we are always a student. You will learn something new every day, and in this world, that should be exciting for you.

Start A Simple Project

Don't overwhelm yourself by creating a huge project. Just start with a simple one like a basic webpage or a calculator application. Just make sure that it's doable based on the current knowledge and skillset you have right now.

Connect With Other Programmers

DEV and X (Twitter) are great for building a community of like-minded people like us. Try connecting with new programmers and some vets to keep you accountable, and have support. Because whether we want to admit it or not, we need it.

I hope these tips help you. *And while we are on the subject, what made you stop coding, and what inspired you to come back to it? *

For me, I stopped coding when I got into backend development and learned that wasn't my jam and went into the SEO professional world instead.

After starting a beauty blog, (because I have a decade of experience in the beauty world), I thought I wanted to be a beauty blogger but learned that I am a true techie at heart. So I completely pivoted my beauty blog into a tech blog.

Those who know SEO know that I am taking a huge hit, being that my blog is branded under my name, but that's the risk I took, and that's that.

Help! I'm in Tutorial Hell

Ashley R. — Tue, 30 Mar 2021 18:02:37 +0000

Yall, I think that I'm stuck!

This is what I was saying to myself a month ago. I did not know that there was such thing as "tutorial hell" until I was in it.

But I love tutorials!!

Now, don't come for me saying, "how am I suppose to learn if I don't do tutorials?" No boo, do your tutorials. But, don't get stuck in just doing tutorials. Because if you are just doing tutorials and are not practicing what I've been learning, then technically, you ain't learning shit. (insert shrugs)

Get out!!

I'm saying this because I was doing the exact same thing. I was stuck just doing tutorials and I wasn't practicing any of the material I was learning. And when it came time to do a project, I didn't know anything.

I've learned that writing bad code is how you eventually write good code. Since I'm teaching myself this material, following FreeCodeCamp lessons, it was easy for me to get stuck in the tutorial hellhole. And I was honestly enjoying my time in tutorial hell. Until, you know, a project lit some fire under my butt.

How to get out?

Well, I started practicing (coding) what I was currently learning in tutorials, in Visual Studio Code (VSCode). Since I'm currently learning how to make graphs using D3, I started making my own graphs in VSCode. Yes, they looked really shitty at first, but the more I worked on them, the better they looked over time.

To help you out, here is something to do:

After you are finished with one lesson or tutorial, make the exact same thing in VSCode. And then, make your own version of that tutorial. Then BOOM! That could be considered a project to add under your belt.

How did YOU get out of tutorial hell?

Go Update Your GitHub.... NOW!!

Ashley R. — Wed, 03 Mar 2021 17:28:12 +0000

If you are a code newbie and haven't heard of GitHub.... chiiilllle you betta get with the program right now!

Ok, so you guys know that I like to be as honest and transparent with you all of the time. So here is my new confession: I just now started updating my GitHub account. Why now? Because I didn't understand it or the importance of it until now. (insert face-palm)

Backstory:

I started coding in July 2020. I had and still have no mentor. I have been doing this coding journey on my own ever since as a new mom and well within the first year of my marriage.... well, a little over a year.
I have always heard about GitHub, but even with the Youtube videos and such, I still didn't understand the concept. (I'm ignorant, I know.)
I would play around with it and make some commits every now and then but that was it. I still had all of my notes and code files on my laptop and that's how I would do it.

Fast Forward to the Present:

I'm strolling around on LinkedIn and I saw someone who made a post about his struggles on finding a job. He had a lot of feedback from his post and one particular person commented with her feedback from his profile.

She listed 3 things and amongst those things, she talked about his GitHub account and how quiet it was. Quiet meaning that he hasn't been active on it and hasn't had a lot of commits(activities). She said that it was important to "light up your profile with green commits" because it:

showed employers the quality of your code,
how often you code,
how well you work with others on their code and vice versa.

Where's the green?

So I went to my GitHub account knowing damn well that I haven't made any kind of commits on there, and it literally shows that I only had activity in October (one green square), January (one green square), and February (two green squares).

I freaking panicked!!

I didn't want employers to look at my account and judge it as I'm not serious about coding or that I was a fraud, or a lazy ass... you get the drift?!

So, the only thing I can do is to "commit" to GitHub, upload all of my code projects back from August 2020 to their own reps, and also upload my notes to their own reps.

What if I'm still learning?

Because I am still learning, and there are times where I am not coding, but I am taking notes from my studies.

Uploading your notes will also show your commitment to coding and will also "light up" your account green for that day.

Question: When did you start using GitHub and when did you start taking it seriously?

JavaScript Got You Down? Go Learn ReactJS!

Ashley R. — Thu, 25 Feb 2021 19:57:39 +0000

Learning React and Redux have made JavaScript FUN!

JavaScript can be difficult to learn as your first language

If you are struggling while learning JavaScript, hang in there! Depending on how you are learning JavaScript, it may seem very strange due to the fact that you can't see any outcome. To me, learning JS reminded me of learning math all over again. Hence, all of the data structures and algorithms.

Get gets easier when learning React

But once I stepped into the land of React, I was like... "Yeeeeaaaaaahhhh buddy!" I can finally see what the hell I am doing with this JavaScript mess. And it was very fun!

I have completed the FCC's React and Redux course and I can say that it was, interesting.

I'm honestly excited to start building apps with these frameworks because I had a lot of fun learning them.

This is just a quick inspiration article for those who are struggling with JavaScript and need a boost or something to look forward to.

Now, JavaScript doesn't seem so scary anymore.

Disclaimer: You must have a good understanding of JS and ES6 to learn React and Redux. If you don't have a good understanding of JS, learning React and Redux will be very frustrating and it's just gonna piss you off.

How I discovered Coding...

Ashley R. — Mon, 15 Feb 2021 18:03:42 +0000

I discovered coding at the lowest point of my life...

The unexpected lost

If I can be completely honest, vulnerable, and transparent, I did not know about coding until early 2020. I had just given birth to my daughter and I was ready to start working on my hair salon.

Being in the beauty industry for almost 10 years, I decided that it was time to build my very own salon. I prepped everything from the ground up, until COVID hit me hard.

And as a new mom, Postpartum Depression hit me harder and I struggled with my personal and professional life extremely heavy during those times. When my daughter was only a couple of months old, I had a talk with my husband and our life counselor, and they both told me to stop doing anything business-related for 2 weeks. This way, I was able to clear my mind, focus on myself, my husband, and our brand new baby.

Something had to change for the better

Within those two weeks, I challenged myself to really think about myself and what I genuinely enjoyed doing. You know, things that I knew that I was naturally good at. So I made out a list. And among the top things, technology and art-related activities were on that list.

Here I am with a failed hair salon before it even got started, 3/4ths of a bachelor's degree in English, and a thousand odd jobs under my belt. I thought to myself, where is my life going?

Being honest with myself

Coming straight outta high school with a full Vocal Performance scholarship ten years ago, to a 28-year-old woman who lived her life to accompany those around her.

So within those two weeks, I did something that I had never done in my life; focused on myself.

How I found coding

Other than writing, I knew that I had a genuine love for engineering and technology. But I did not know what I could do in those fields. So I went to Google and searched, "creative jobs in tech." A lot of things popped up and coding was one of them.

I Googled, Youtubed, and researched everything about coding and then had a lightbulb moment.

I started to follow Software Developers and Engineers on all social media platforms, just to see what their lifestyle was like.

I saw those individuals and I thought to myself, "Can I really live that lifestyle?" And my exact thoughts were, "HELL YES!!"

This industry is everything that I prayed for in a career.

Here are the personal career goals that I prayed for over 10 years ago:

1) I want to be creative
2) I want to solve problems
3) I want to teach others
4) I want to travel
5) I want to work remotely if needed
6) I want to receive a great salary to help build a foundation for my family

I am so thankful that my failed business led me in the direction of my true passion.

How did you discover coding and how has it impacted your life?

Learning JavaScript is HARD!

Ashley R. — Tue, 26 Jan 2021 18:59:37 +0000

When I first started to teach myself JavaScript, it was truly a breaking point for me. I cried, I whined and gave up a thousand times. Only to pick it back up every time.

JavaScript is tough

I used/ currently reviewing the entire course of JavaScript on FreeCodeCamp and I think that it is one of the toughest self-learning course out there. The challenges are just that... challenging and very intimidating. I stopped following FCC's course because I thought that it was too hard so I switched to other platforms (CodeCademy, W3 Schools, YouTube, etc.) to find something that was... easier.

Switching learning platforms was a NO-GO

But by switching from one platform to another only confused the crap out of me. And I found myself going back to FCC over and over again until I finally finished the certification.

Here is where I (bleeped) up. Whenever I found myself in a pickle on the challenges, I would just get the answer from the forum and apply it to the problem and move on to the next. I didn't learn a damn thing.

This is what worked for me

Here are my personal tips on learning JavaScript:

1) Take your time. Don't rush the learning process.
2) Always jot down notes. Don't you ever in your precious life copy and paste your notes. Trust me.
3) Always check what you are doing by testing everything out. Utilize console.log() to make sure that you are always on the right track.
4) Play around with different inputs to see the outputs. This is what I like to call: Cause and Effect Game. Change the values around to see what the outcome will be. Change the increments into decrements and see what happens.
5) Don't be afraid to mess up. It's gonna happen. You can't be perfect all of the damn time. LOL. Learn from it and keep it moving.

I think that these steps can be applied to any language that you are learning. Just remember, YOU GOT THIS!!! :)

How Do You Take Notes?

Ashley R. — Thu, 21 Jan 2021 18:03:51 +0000

When I started my self-learning boot camp experience, I lived for Google Docs. That was my go-to for note-taking. I have so many documents for every course, and I even used Google Sheets to create spreadsheets of terms, definitions, and examples.

So here is what I would do. I would copy and paste all of the information into the Google Docs editor, and that was my note-taking. I did this method from the beginning of HTML to JavaScript.

I thought I was so smart. I thought that by doing this, I would have access to these notes digitally, anywhere and everywhere I could go. Which is true!

But here is where I messed up.

Since I copied and pasted all my notes, I wasn't retaining any of that information. I was literally skating through the courses, not applying what I had just learned, and now I am facing the consequences of doing so.

I am relearning JavaScript because I did not comprehend it the first time. And if I am honest, I am reviewing some CSS coursework as well, due to copy and pasting notes.

So now, I am taking notes the old fashioned way: Pen and Paper.

Almost as good as peanut butter and jelly.
Yeah, it takes more time writing out all of that information, but it is paying off now. I am actually retaining more information writing it out than I was before.

Either if you are using Pen and Paper, or digital software, I think the main takeaway is to Never Copy and Paste. PERIODT! :)

Basic CSS Traffic Light

Ashley R. — Tue, 12 Jan 2021 19:51:30 +0000

Lately, I have been working on my CSS art and I am ready to share it. It's pretty basic but it is a huge improvement from last week.

Also, its day 11/100 of #100daysofcode

Click here to see it live: https://codepen.io/xoshly/full/gOwBGgr

CSS Art

Ashley R. — Mon, 28 Dec 2020 22:34:04 +0000

I am practicing CSS art and oh my God, my mind is having trouble grasping the practice. But I know that with consistent practice, my art will get a lot better.

The reason why I want to practice CSS art is that I've read that it improves your overall CSS and you will write it a lot faster. Right now, I've mastered a basic heart.

Next, I want to master a smiley face.

Wish me luck :)