Python Tutorial: HTML Tags and Attributes

--
In the last lesson, we became familiar with the tree-like structure of HTML, and learned how to navigate the tree to access specific elements. We did not pay much attention to the actual HTML tags, nor the specifics of HTML syntax beyond this tree-like structure. In this lesson, we delve deeper into some of the HTML-specific syntax.

You may ask why we want to get more specific here? It turns out that sometimes we want to access information that is held within the HTML tags themselves -- we often want access this info in order to find the URL pointed to by a specific link on the site, or because it can potentially give us another method to select specific HTML elements with a more friendly syntax than traversing the entire HTML tree.

To start, let's look at an abstract tag formatting.

There are many HTML tag types that follow the same formatting; we have already seen three tag names: the html, div, and p tags.

These tags can also contain attributes which provide special instructions for the contents contained within that tag. Specific html attribute names are followed by an equals sign, followed by information which is being passed to that attribute within the tag; in well-formatted HTML the information is in quotes. Sound confusing? Don't worry!

To look at a specific example, let's consider a div tag with two attributes: id and class. We chose these two attributes here because they arise frequently in practice. In well-formatted HTML, the id attribute can be used as a unique identifier for the tag element; in this case, the id "unique-id" should only belong to this specific div element, giving us a quick way to identify it. The class attribute "some class" can also help us identify this div element, but even in well-formatted HTML, it doesn't need to be unique.

No tag needs to have an id nor a class attribute, but all tags can be given an id and a class. A point that will find its way to a future lesson is that a tag can belong to multiple classes, and this is done when the class attribute (that is, the quoted text assigned for that class) has multiple class names separated by spaces; in fact, this div tag would belong to both classes: "some" and "class".

Let's look at another example. The "a" tag-name here is the specific tag for hyperlinks, the links we click on within a website to redirect somewhere. The most important attribute within these hyperlink tags is the "href" attribute. This attribute is used to identify the URL where the hyperlink redirects to.

It turns out that there are many allowable tag types in HTML, and many allowable attributes which sometimes depend on those tag types. We will not be able to, nor want to go through each and every one of these in this course! Rather, we're going to learn techniques that will be applicable regardless of the tag; with a special focus on id, class, and href attributes we saw in this lesson, building up methods that can easily apply to other attributes as you encounter them. And don't worry, even with only those three attributes, we will get a lot of traction!

So, what did we learn in this lesson? We focused on HTML specific syntax, learning the general abstract structure of HTML tags. We saw how to identify the tag-name and attributes within those tags.

Now, let's practice!

#PythonTutorial #HTML #Tags #Attributes #Python #DataCamp