Elements and Attributes


HTML Crash Course
Course Intro
What is a Website?
9m 3s
12m 5s

The course is part of this learning path

Start course

This crash course in HTML starts off with some basic questions such as "What is a website?" and "How do websites work?" before moving on to look at the fundamentals of HTML. We recommend taking this course as part of the Web Penetration Testing & Bug Bounty Hunting learning path.

Learning Objectives

  • Understand the basics of what makes up a website
  • Learn the fundamentals of HTML

Intended Audience

This course is ideal for beginners who want to learn the fundamentals of HTML and its role in building a website.


To get the most out of this course, you should be familiar with using Kali Linux since it will be used throughout this course.


Hi. Within this lecture, we're going to see about different elements in HTML and something called attributes. We're going to see what those things mean. So, right now we have our head tag and now we're moving on to the body tag and we included metadata like title or some other things in the head section. But now we want to go into the body section because we want to display something. So, this is, for example, to display images, display tags, display inputs and some other stuff and these are all called elements, okay? We're going to see a lot of different elements regarding the website development in HTML. So, first of all, let me start by taking a note in here so that you can follow along as well. Maybe you want to take notes as well. So, we're going to cover elements in this section, okay? And I want to start with our first elements. First ever element that we're going to write. And you can actually write this H1, so it means header one and we're writing a header. So, what is a header? It's actually a text again but it's in bigger forms. So, let me write Hello HTML and we close the tag like this. Okay? So, if we save it and if we refresh this, as you can see, we see the Hello HTML in here. So, it's a little bit different than what we have seen before. It's in bold, it's in bigger font and that is header one, that is H1 and we have six headers like this. You can try each of those by writing H2 head 2, like H3 head 3, okay? And this will be evolving in a reverse way. It will be smaller than H1 like that, okay? So, this is header 2, this is header 1 and let's do the H3 as well. Depending on your choice, depending on your website, you can use this. Of course, this is not a web development course. So, you don't have to know everything regarding HTML but you have to know that H1 stands for a header and they're just writing some texts over here, okay? So, these are our first elements and these are pretty commonly used. And if we want to make this a little bit fancier, we have to use CSS for styling, for choosing colors, choosing styles, choosing fonts, we're not going to do that. We don't generally deal with CSS in web pentesting but we generally deal with HTML, okay? So, we're just building things in the most basic way in here. So, after these elements, there are a couple of other things to learn as well. So, these are all texts. You display some texts and we always open the tags and close the tags and write the content between the text, between these tags in order to specify what we have that we're going to show in those tags. And as you can see, we have opened and closed the tags in every section, like we have written over here but not in the doc type because it was a self-closing tag as I said before. So, this is another example of self-closing tag, BR. So, BR stands for break, we don't see it in here, okay? It's a line break and if you just put it somewhere else, like in between these headers, it will have a space between them. And if you open something like this in here like after H2 and write something in here like a class, it's called attribute. So, this is an attribute of the element H2. So, for example, if you want to associate this with CSS class, then you can do this. You don't have to know every attribute of every element. You can always look it up, I'm going to show you how, by the way. But you have to know that this is called attribute and you can change the attributes of the elements in a way that we're doing right now, okay? So, this is an attribute. Again, the class is an attribute and this is the value of that respective attribute, okay? And of course, we don't have something called my CSS, this is just an example, we're going to change a different attributes later on and this is for only for you to understand what an attribute is. It's an property of the H2. And we can do the same thing in the H3 as well. For example, if we create a style with my CSS, if we want it to be associated with H2 only, we can just change the attribute of H2 but maybe we want to apply this thing to the H3 as well, then we can change the attribute of H3 to the same value again. And the class is not the only attribute that we're going to be focusing. We are going to focus on different attributes throughout these lectures as well. But know that these are elements and these are the attributes of those elements, okay? So, H1, H2, H3, these are elements that we use as a header. So, it's different than the regular texts. And if you write something like that, you can come over here and see it doesn't change anything, Okay? It doesn't break the code or something like that, it still works. But we can do some more fancier stuff with the attributes and we're going to do that later on. So, let me just take a note in here and call that these are headings. Okay? So, this is a break and let me just call this paragraph. We're going to see a break later on. Let me show you what a paragraph is. Paragraph is just simple plain text. So, we can just write whatever we want. Like test, test, test, test, and you can create this element with a simple P. It will be shown like this. So, this is a simple text. If you want to show a simple text, you can use paragraphs and you can write whatever you want inside of the paragraph text, okay? So, for example, if you want to make some of these bold or some of these italic, you can use some other tags in here as well. You can always differentiate the paragraphs if you want. But you can use something like this, like a strong tag inside of a paragraph and you can write whatever you may want to make it strong like this. Don't forget to open or close the tags, okay? And write text in here. So, strong means bold and let's do something else like EM. So, it stands for emphasis. So, it emphasizes the test in an italic way. So, let me save this by control S, and refreshes by control R. And as you can see the second one is in italics fonts and this is in bold fonts. So, these are all different tags and these are all different elements that you may want to use in your HTML code. We are still inside the body though. We haven't gone out of the body because we want to show all of those things to the user, okay? We're staying inside of the body tags and that's how it works, right? So, again, there are a couple of other elements and a couple of other examples of attributes that we need to see in order to understand the HTML fundamentals. And we're going to do exactly this thing in the next lecture.

About the Author
Learning Paths

Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.

Covered Topics