WDI Fundamentals

WDI Fundamentals Unit 4


Layout Basics Cheat Sheet

Span

  • A generic wrapper for any inline content. Spans are generally used to group small sections of content for styling purposes.

Div

  • 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.
  • This element wraps the content at the bottom of your web page. This element often contains copyright information, links to career pages, contact information, terms of use, etc.

Main

  • These elements contain all the primary content — articles, blog posts, images, videos, etc. — between the <header> and the <footer>.

Aside

  • These elements contain all the secondary content between the <header> and <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 <nav> tags.

Section

  • These elements are used to group the content of a page into related chunks.

Article

  • These elements are used to contain standalone blocks of text, such as news articles, blog posts, etc.

Box Model

  • 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.

Content

  • The text and images that are included within any element's opening and closing tags.

Padding

  • The area outside the content, but within the border. Padding will extend the background-color and contribute to the overall width of the object.

Border

  • A line of variable thickness, color, and style that goes around the padding and content.

Margin

  • The area outside of the border that separates the object from other objects around it. Margin has a transparent background-color.

Inline Elements

  • HTML elements that take up the width of their contents and do not begin with new line. They cannot have height or width assigned.

Block Elements

  • 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 padding, margin, height, and width assigned.

Span

  • Inline and used to apply CSS to inline HTML.

Div

  • A 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.