What you will be learning:
- The different parts of an HTML element
Welcome
The expectation is to write markup, not code. We don't expect you to write perfect HTML and you don't need to know how our components are created to use them.
This is what an HTML element looks like:
It has:
- a start tag
<h1> - one or more attributes and their value(s)
class="heading" - some content
Hello World - an end tag
</h1>
All together it looks like <h1 class="heading">Hello World</h1>
Let's see how those work!
Exercise
Instructions
Let's copy and paste this example in the editor:
<h2 class="h4">How are you today?</h2>
Semantics vs looks
Notice that if you change the class attribute to something like h3 or h4 for example, the size of the heading changed.
Change the attribute
class="h4"to"h2"
π Hint
Try this piece of code:
<h2 class="h4">How are you today?</h2>
We use class attributes to apply styling to an HTML element.
Headings can go from level 1 to 6. Headings have a semantic meaning.
Think of a document, itβs your main title, section titles and sub-sections titles. Semantics are different to visual hierarchy: a <h4> can look like a <h1>.
β οΈ Always use heading levels for what they mean, not how they look. If you want to change what a heading looks like, use the class attribute instead of changing the element itself.