ELEMENTS, TAGS & ATTRIBUTES – Holly Foster Media

ELEMENTS, TAGS & ATTRIBUTES

If you’re just tuning in, I’ve been writing a series of blogs about hand coding HTML, the language of the WWW (World Wide Web). This week I added more tags to my page. If you’re interested, read on for the details. Here’s a refresher on the terminology, just in case you need it.


An ELEMENT is a component of a webpage

An HTML element is a component of a webpage. The example below shows the markup for the sentence that reads But the details are missing. The element is comprised of the entire line of code.

Picture of an HTML element.

TAGS mark the start and end of an element

Tags mark the start and end of an element. In our example, we are using the paragraph, or <p></p>. Although there are a couple of exceptions, HTML tags generally begin with the less-than (<) character and end with greater-than (>).

Picture of HTML tags.

Attributes define a specific behavior

HTML also allows us to add an attribute, along with its corresponding value. In our example the font-size attribute is contained within the start tag.

Picture of HTML attribute and value.

Here’s what my updated page looks like. You can check it out real time here.

Snapshot of a mywebspace page.

The additions

I added eight additional formatting tags to:

  • define a section quoted from another source <blockquote>
  • define the title of a work <cite>
  • define text deleted from a document <del>
  • define text inserted into a document <ins>
  • highlight text <mark>
  • make text smaller <small>
  • create subscript text <sub>
  • create superscript text <sup>

I also added a basic tag — the <br> or break tag. It’s an interesting one because unlike most other HTML tags, it doesn’t require an end tag (it’s referred to as an “empty” tag). It inserts a single break in the text as opposed to the additional space added when you use the paragraph, or <p> tag. That comes in handy when you need to format an address, or perhaps a poem.

In addition to the tags I added three attributes, which give the tags meaning and context:

  • “text-align:center;” to center my text
  • “font-size:200%” to bump up the text by two hundred percent
  • “color:rgb(11, 102, 35)” to create a forest green heading

A couple of extras

To finish up, I:

  • used the title attribute.
  • defined the use of the Verdana font for my Beverage History title.
  • added a frame tag <iframe> to embed a YouTube video.

I also made the video responsive, meaning it resizes according to the size of the browser window. Check out the video listed in the References section below if you want to learn how to do it.

More to come next week.

until nxt time …

References

HTML br tag. (n.d.). Retrieved from: https://www.w3schools.com/tags/tag_br.asp

HTML element. (2019). In Wikipedia. Retrieved from https://en.wikipedia.org/w/index.php?title=HTML_element&oldid=910228137

Johansson, R. (2005, August 30). HTML tags vs. elements vs. attributes | 456 Berea Street. Retrieved from: https://www.456bereastreet.com/archive/200508/html_tags_vs_elements_vs_attributes/

Paper Krane. (n.d.). How To Make iframe’s Responsive (YouTube Embeds, Google Maps etc.) – YouTube. Retrieved from: https://www.youtube.com/watch?v=X4t0JxiBeO0

Header image by Adi Goldstein on Unsplash

Written by

Leave a Reply

Your email address will not be published. Required fields are marked *