With Elements creating a far more flexible and powerful way of building websites, I thought I might share a sheet I made for myself quite a few years back. None of this is new or ground breaking. The purpose was to help me wrap my head around the intent of certain parts. Best practices if you will. Elements allows for a lot of creativity but it has its own philosophy for building which in some cases brings some limitations. If you think about how a CSS tag or HTML element is generally used, I think it may help in the thought process of where to look for the feature you need inside Elements.
HTML and CSS
HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) serve distinct purposes. HTML is used to create the structure and content of a webpage, defining elements such as headings, paragraphs, links, and images. It provides the foundational framework by specifying the layout and embedding various types of content.
In contrast, CSS dictates the visual appearance of HTML elements, including their colors, sizes, fonts, and positioning. CSS rules consist of selectors and declarations that apply styles to HTML elements, ensuring that the webpage is visually appealing and well-organized.
In short, HTML acts as the skeleton, providing the essential structure, while CSS serves as the skin and clothing, enhancing the visual presentation and arrangement of the content.
HTML
Semantic HTML Elements
Semantic elements in HTML are tags that convey meaning about the type of content they contain. They help improve the readability of the code and the accessibility of the webpage by clearly defining sections and their purposes.
Examples:
<header>: Defines the header of a page or section.<nav>: Defines a set of navigation links.<main>: Represents the main content of the document.<section>: Groups related content.<article>: Represents a self-contained piece of content, like a blog post.<footer>: Defines the footer of a page or section.
Usage: Semantic elements should be used to structure content in a meaningful way, making it easier for search engines and screen readers to understand the webpage’s layout and purpose.
HTML Content Tags
Content tags in HTML are used to define and display different types of content on a webpage. They are the building blocks that hold the actual content.
Examples:
<p>: Paragraph.<h1> - <h6>: Headings, with<h1>being the highest level.<img>: Image.<a>: Anchor or link.<ul>, <ol>, <li>: Unordered and ordered lists and list items.<table>, <tr>, <td>: Table, table row, and table data cell.
Usage: Content tags should be used to add text, images, links, and other types of content to a webpage, ensuring that the information is properly categorized and displayed.
HTML Structural Elements
Structural elements in HTML define the layout and organization of a webpage. They are used to group and arrange content in a coherent and logical manner.
Examples:
<div>: A generic container for other elements.<span>: An inline container for text or other elements.<section>, <header>, <footer>: Also used structurally to define parts of the page.
Usage: Structural elements should be used to create a clear and organized layout. They help in grouping related content together, ensuring that the webpage is well-structured and easy to navigate.
CSS
CSS Style Classes
Design and style classes in CSS are used to apply specific styles to HTML elements. These classes allow for reusable and consistent styling across different parts of a webpage or multiple webpages.
Examples:
.button: A class to style buttons..card: A class to style card-like components..highlight: A class to highlight text..text-center: A class to center-align text.
Usage: Design and style classes should be used to separate content from presentation, allowing for flexible and consistent styling. By applying these classes to HTML elements, you can easily maintain and update the appearance of your website.
CSS Grid
CSS Grid Layout is a two-dimensional layout system that allows you to create complex grid-based designs. It divides the page into rows and columns, making it easy to place elements precisely. Define a container element as a grid with display: grid
Examples:
.container {display: grid; …}
Usage: Use CSS Grid for layouts requiring precise placement of elements, such as creating magazine-style layouts or complex web applications.
CSS Flexbox
Flexbox is a one-dimensional layout system that allows items within a container to be aligned and distributed along a single axis (horizontal or vertical). It’s ideal for simpler layouts where elements need to be aligned or distributed.
Examples:
.container {display: flex; /* or inline-flex */ }
Usage: Use Flexbox for simpler layout needs, such as aligning items in a navigation bar, creating responsive rows, or distributing space within a container.