What can I do with HTML Elements?

HTML elements are incredibly versatile. Every site you’ve visited uses them. YouTube, Netflix, Discord, etc. Every object that appears on your screen uses HTML. These Elements can be used to display content, or provide an interface for interacting with content.

The above example uses only four HTML elements. div, which is used to divide content into smaller parts; input, which provided the area you could type in; button, which you clicked to make your text display; and span, which held the text. It used JavaScript to do the actual actions, and CSS to style it, but both of those required the HTML elements to exist so they could do anything.

Let’s dive more into the anatomy of an element, such as an anchor. Below is an example of a functional link. Each attribute is placed on a separate line to help me communicate, but you don’t need to have them separated like this. I’ll just do it in my examples, since I find it easier to read. Lines 1 and 7 contain the opening and closing tags, but the opening tag is kind of stretched across lines 1 through 5 (Notice the > moved from beside <a down to line 5) All attributes for an element will be placed inside the opening tag. The anchor tag requires at least one attribute to do its job, href, or Hyperlink Refrence. This attribute contains the URL that it will redirect the user to when they click it. Alternatively, if the link is to somewhere on your own site, you can use a relative URL, which is instructions on how to reach the new file. The example on line 9 redirects the user to the ‘root’ of the site, or the home page. If you do not include the href attribute, your anchor will be displayed as plain text.

Lines 3 through 5 are optional attributes. id is a unique identifier that can be specifically targeted by JavaScript during interactions, as well as CSS for styling. class is intended to hold classes, which can be used in a CSS file to apply multiple styles simultaniously. rel describes the relationship that the page has with the new page. When using an anchor to direct a user to a page outside your site, it’s a good saftey practice to include this attribute.

<a
    href="https://google.com"
    id="example-link"
    class="link"
    rel="noopener noreferrer">
Link to Google
</a>

<a href="/"> Link to home</a>