Scribd
Upload
12 views

Css Cheatsheet

The document discusses essential HTML tags for layout and text/content. It explains tags such as <header>, <main>, <footer> that relate to layout and structure. It also covers tags that relate to text and content, including headings (<h1>-<h6>), paragraphs (<p>), emphasis (<em>), links (<a>), lists (<ul>, <ol>), and images (<img>). The document recommends using these basic tags to get started with HTML.

Uploaded by

Sahil Bansal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Css Cheatsheet

The document discusses essential HTML tags for layout and text/content. It explains tags such as <header>, <main>, <footer> that relate to layout and structure. It also covers tags that relate to text and content, including headings (<h1>-<h6>), paragraphs (<p>), emphasis (<em>), links (<a>), lists (<ul>, <ol>), and images (<img>). The document recommends using these basic tags to get started with HTML.

Uploaded by

Sahil Bansal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

THE ONLY TAGS YOU

NEED TO KNOW
(FOR NOW)

There are a lot more elements out there,


but these are the essential ones to get
you started.

TAGS THAT RELATE TO LAYOUT

Denotes a heading within the document.

<header> Often used for the logo and navigation area on a page, but can also be used
within other elements (such as an article), to denote the heading for that
section of content.

<main> The main content of your page (only one per page).

Denotes a footer within a document.


<footer> Like <header>, it is often used as the primary footer for an entire page, but you
can have footers within other elements as well.

Used for major navigational elements


(not all links, or lists of links must be in a nav).
<nav> If you have multiple nav elements, they should contain context for their
purpose, with either an aria-label or aria-labelled-by. You can follow this link
for more information.

<article> A piece of content on your page that can stand on it's own.

<section> A section of content.

A division (or box) - no semantic meaning.


<div> These are used to organize your content, generally so you can style layouts
with CSS.

kevinpowell.co
THE ONLY TAGS YOU
NEED TO KNOW
(FOR NOW)

TAGS THAT RELATE TO TEXT / CONTENT

Heading levels. These create hierarchy within your page.


<h1> ... <h6>
Think of them as creating a table of contents.

<p> Paragraph

Strong importance
(bold by default)
<strong>
This is an inline element, used inside of paragraphs and headings to put more
importance on some of the text

Emphasis
(italic by default)
<em>
This is an inline element, used inside of paragraphs and headings to put
emphasis on certain words within the text

Anchor

<a> Used is to create links - think of it as anchoring to another location


This is an inline element, and can be used inside of paragraphs and headings

<ul> & <ol> Unordered & ordered lists

List item
<li>
Used inside of <ul> and <ol> elements

Similar to <strong> and <em> but with no default styling and no semantic
<span> meaning. You would use CSS to style it how you want.

An image
<img>
Must have an alt attribute, which describes the image, you can read more here.

kevinpowell.co

You might also like