DEV Community

Cover image for BWC Bootcamp Recap: HTML and CSS vocabulary
vance
vance

Posted on • Updated on

BWC Bootcamp Recap: HTML and CSS vocabulary

Hello friends and learners! This is my first post as a teaching assistant for the 2023 Bad Website Club/freeCodeCamp Web Dev Bootcamp. I hope your learning is off to a great start! In the coming weeks, I'll be writing a series of recap posts to help us keep track of all these exciting new things we're learning. Today it's all about vocabulary!

One of the struggles when you're brand new to learning web development is just remembering all of the words that people are using! It can be really frustrating when a tutorial tells you to add an attribute and you're like "wait, what even is an attribute?" My aim here is to define all of those new terms that we'll encounter in the freeCodeCamp Responsive Web Design curriculum.

Key terms

  • HTML is the most basic language of the web. Every web page uses HTML! It provides the structure and content of the page.
  • CSS describes the visual appearance. This includes colors, fonts, sizes, and how things are laid out on the page.
  • Accessibility refers to how usable your website is for different types of people, particularly people with disabilities. We all have a duty to make our websites as accessible as possible, because the web is for everyone!

HTML

Diagram of an HTML element, labeling the tags and content
(Image from MDN: HTML basics, by Mozilla Contributors, licensed under CC-BY-SA 2.5)

  • Each “thing” in an HTML document (in other words, each thing in a web page) is called an element. For example, this could be a picture, a link, or a chunk of text.
  • Most elements start with an opening tag and end with a closing tag. However, there are some self-closing tags (also known as void elements), which don’t have a closing tag. *
    • How many self-closing tags can you name?
  • A tag might have attributes to determine its properties. An element can have many attributes, or none!
<p class="large-text"><em>Bad Website Club</em></p>
Enter fullscreen mode Exit fullscreen mode
  • This whole line is a p element.
  • <p class="large-text"> is the opening tag.
  • </p> is the closing tag.
  • class="large-text" is an attribute.
  • class is the attribute name and large-text is the attribute value.
  • The em element is a child of the p element, because it’s placed inside. p is the parent element. We also say that the em element is nested inside the p element, like a little baby bird sitting inside its parent’s nest!
  • The descendants of an element are everything nested inside it: its child elements, but also its children's child elements, and its children's children's children, and so on. In the following example, section and p and em are all descendants of body, but only section is a direct child of body:
<body>
  <section>
    <p class="large-text">
      <em>Bad Website Club</em>
    </p>
  </section>
</body>
Enter fullscreen mode Exit fullscreen mode

* Note: According to the HTML specification, "self-closing tag" actually does not refer to void elements, and has a more specific technical meaning instead. However, you will still often see the term "self-closing tag" used to mean "opening tag which does not have a partner closing tag", including in the freeCodeCamp Responsive Web Design curriculum.

CSS

Diagram of a CSS rule, labeling the selector, declaration, and property.
(Image from MDN: CSS basics, by Mozilla Contributors, licensed under CC-BY-SA 2.5)

  • CSS is grouped into rules.
  • A rule starts with a selector. This part determines which elements the rule will apply to.
  • Each line inside the curly braces is called a declaration. This part says how you want to change those elements. This word doesn't come up super often though.
  • The part before the colon (:) is the property.
  • The part after the colon is the property's value.
.large-text {
  font-size: 2em;
}
Enter fullscreen mode Exit fullscreen mode
  • This whole code block is one CSS rule.
  • .large-text is the selector.
  • font-size: 2em; is a declaration.
  • font-size is the property.
  • 2em is the value of font-size.
  • When a CSS rule applies to certain elements, we say that it's targeting those elements. This rule targets the large-text class.

Did I leave something out? Are there any other words you've heard while learning web development that you don't understand, or maybe ones that you mix up with each other or just keep forgetting? Feel free to mention them in a comment and we can sort it out together!

Acknowledgements

Cover art by Kiri!

Thanks to Nicholas Stimpson for clearing up the definition of self-closing tags.

Top comments (2)

Collapse
 
alohci profile image
Nicholas Stimpson • Edited

If you're going to teach HTML and CSS vocabulary, then you ought to get it as right as possible.

However, there are some self-closing attributes, which means they don’t have a closing tag.

Leaving aside that you mean "tags", not "attributes", you're using "self-closing" incorrectly.

Consider this question - According to the latest HTML specification, which, if any, of the following are self-closing tags?

  • <p>
  • <p/>
  • <br>
  • <br/>
  • <svg>
  • <svg/>

"self-closing tag" has a very specific and narrow meaning in HTML. It means a start tag of a foreign element - that is, an element in either the SVG or the MathML namespace - the penultimate character of which is a solidus / which means the element is immediately ended by the tag.

So, only the last tag in the list above <svg/> is a self-closing tag.

It's therefore almost meaningless to ask "how many can you name?". What you are likely referring to is what are called "void elements". Each void element has a start tag and no end tag, but the start tags are not "self-closing".

Collapse
 
caesiumtea profile image
vance

Oh gosh, "self closing attribute" was a very silly typo (that I made twice even!), so thank you for pointing that out!

As for the rest of that info, super interesting! For what it's worth, the main purpose of this post was to explain the vocabulary that gets used in the freeCodeCamp Responsive Web Design curriculum, and freeCodeCamp happens to use the term "self-closing" to refer to elements like <link> and <img>. So I'll be keeping that in the list because it's helpful for the specific audience I wrote this post for. But now I can do some more research and then add a note about them maybe more properly being called void elements, so thank you for that!