WDI Fundamentals Unit 5
Layout Basics Cheat Sheet
- A generic wrapper for any inline content.
spans are generally used to group small sections of content for styling purposes.
- A generic wrapper for any block content.
divs are used to group other elements together or to provide style to a specific area.
- These elements kick off your page with introductory content like logos, headlines, titles, and links.
- These elements contain all the primary content — articles, blog posts, images, videos, etc. — between the
<header> and the
- These elements contain all the secondary content between the
<footer>, including supplemental information like recommended stories or archived blog links.
- Any navigational links that help users get around your page should be wrapped in
- These elements are used to group the content of a page into related chunks.
- These elements are used to contain standalone blocks of text, such as news articles, blog posts, etc.
- Every HTML element on the page is in a box, and the box model dictates what the element will look like. The model consists of the content, padding, border, and margin.
Here's a diagram to help you remember the box model.
- The text and images that are included within any element's opening and closing tags.
- The area outside the content, but within the
padding will extend the
background-color and contribute to the overall
width of the object.
- A line of variable thickness, color, and style that goes around the
padding and content.
- The area outside of the
border that separates the object from other objects around it.
margin has a transparent
- HTML elements that take up the width of their contents and do not begin with new line. They cannot have
- HTML elements that break to a new line before and after the element and they take up the width of their containers by default (this is often the browser window itself). They can have
- An element used to apply CSS to
block element used to apply CSS to blocks of HTML. Divs typically wrap big sections of content on a page. Use semantic elements over divs whenever possible.
On to the assignment.