Embedded Files
Welcome to the twelfth lab of Team Edge!
Welcome to the twelfth lab of Team Edge!
In this lab, we cover semantic HTML and structuring web pages.
Congratulations on making it this far! Make sure to take a moment to reflect on how much you've learned and give yourself a pat on the back!
Remember that if you ever need support or have a question, no matter how random, you can always ask a coach! :)
Reference
Reference
Semantic HTML
Semantic HTML
Semantic HTML means to use the appropriate tags for their intended purpose. Some of the tags you have already been using are semantic tags. (<p>, <h1> - <h6>)
In the previous lab, we learned to use the <div> element to organize our web pages into sections. This was the common way to structure web pages until HTML5 was rolled out in 2014. With HTML5 came the introduction of semantic tags, like <header>, <section>, <footer>, etc. These tags help us better understand the purpose of different sections of a web page.
Use this demo to see this in action.
Display Inline Vs Block Elements
Display Inline Vs Block Elements
Every HTML element has a default display value: inline or block.
A block element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
An inline element does not start on a new line and only takes up as much width as necessary. Any width and height properties that you try to set on it will have no effect.
An inline-block element will display elements like an inline element, but you are able to set width and height values.
Tinker around with this concept in this page.
The Position Property
The Position Property
Every element's default position is static by default. By changing the value of the position property to relative, absolute, fixed, sticky, or inherit, you can manipulate where and how it is displayed on the web page.
Static positioning will add elements from the top left of the page, downwards. It prevents elements from overlapping, and it will be the default positioning if no other positioning is specified.
Relative positioning will position the element relative to it's static location. It's position can be adjusted using the left, right, bottom, top properties.
Absolute positioning will position the element relative to its parent element. It's position can also be adjusted using the left, right, bottom, top properties.
Fixed positioning will prevent the element from scrolling with the page. It will always be visible in the specified location.
Additional Resources
Additional Resources
Reference:
Report abuse