This is a HTML cheat sheet containing all the tags HTML have to offer.
Proper HTML tags are imporntant to have good HTML semantics. Technically, you can use alot of <div> and <span> to create your webpages, but they are only usefull for the creator of the webpge. By using proper semantics you give crawlbots a much better understanding of where your information is, and where it shall concentrate to crawl.
For instance, lets say you have a website of 40+ pages full of <div class="">. The poor crawlbots would not know where to work, what is your content and what is your sidebar/header/footer. You may end up being penalized for spamming content/lots of duplicate content. By using <main> the crawlbots learn that the information in there is where to crawl, and run trough your pages faster.
This is what you put inside of the <body> of your HTML document. For the basics, this explains HTML page structure.
This color is the markup, and this color is explaination.
Top level semantics
- <main> </main>
- Your main content. The content that are unique to each page.
- <aside> </aside>
- Aside content, related to the content it is placed in.
- <article> </article>
- Content that mke sense on its own. Like this whole list is inside an article tag.
- <section> </section>
- Sections of an article, or the webpage. Each box you see here is a section within an article
- <nav> </nav>
- Navigation/navbars. You can have several and it tell crawlbots that it is a list of links to your website.
- <header> </header>
- The start of your webpage, and start of an article if it is logical. You can use several per webpage.
- <footer> </footer>
- The latest part of a webpage. Most used as the tiny bar you see on this website. Can also be used inside article.
- <hx> </hx>
- Heading. x Can be 1 to 6, where 1 is biggest.
- <b> </b>
- Bold text
- <i> </i>
- Italic text
- <u> </u>
- Underlined text
- <strike> </strike>
- Forms a
linetrough your text
- <sup> </sup>
- Superscript. Small textto the top right
- <small> </small>
- Small text
- <tt> </tt>
- Typewriter text
- <pre> </pre>
- Pre-formatted text. Respects all spacing and newlines.
- <blockquote> </blockquote>
- Text quoted from another source
- <strong> </strong>
- Strong, Bold in most browsers
- <em> </em>
- Emphasis, Italics in most browsers
- <div> </div>
- Sectioning. Last resort if there is no semantic option. Is block-line
- <p> </p>
- Paragraph. Adds space above and under.
- Line breake/new line
- Horizontal line.
- <nobr> </nobr>
- Prevents line break, making all in one long line. Useless, use CSS instead.
- <span> </span>
- A way to highlight an add class to small part of text. In-line and dont add space as <div> do.
- <img src="url" alt="text">
- Basic Image
- <img> Tag Attributes:
- Options for this tag
- URl of the image. Absolute URL or navigate/filename
- Text for the image. "required", but it works without.
- <a href="URL">Anchor text </a>
- Basic Link
- <a> Tag Attributes:
- Options for this tag
- URL of destination. Absolute URL or navigate'd.
- Anchor text. Good anchor text is cruzial for good SEO.
- Link target location:
_self, _blank, _top, _parent.
- Link to an ID you have on the page. Like the tiny NAV for this page do.
- Email link. Not used alot since many spam mail crawlbots search for them.
- <ol> </ol>
- Ordered List. Add numbers for each item.
- <ul> </ul>
- Un-ordered List. Add a tiny dot for every item.
- <li> </li>
- List item. Nested inside ordered/unorderen list.
- <dl> </dl>
- Definition List. If you want to tell crawlbots that you are explaining term's or phrases. Good semantic value
- <dt> </dt>
- Term or phrase being defined.
- <dd> </dd>
- Explanation. Like this webpage, this is a dd tag.
- <table> </table>
- Define a Table
- <tr> </tr>
- Table Row within table
- <th> </th>
- Header Cell within table row
- <td> </td>
- Table Cell within table row
- <form> </form>
- Form input group decleration
- <form> Tag Attributes:
- Options for form tag idented below
- URL of Form Script
- Method of Form:
- For File Upload:
- <input> </input>
- Input field within form
- <input> Tag Attributes:
- Options for this tag idented below
- Input Field Type:
text, password, checkbox, submitetc.
- Form Field Name (for form processing script)
- Value of Input Field
- Field Size
- Maximum Length of Input Field Data
- Mark selected field in radio button group or checkbox
- Creates a button
- <button> Tag Attributes:
- Options for button tag idented below
- Button Type:
submit, reset, button
- Button Name (for form processing script)
- Label on Button
- Button Size (width)
- <select> </select>
- Select options from drop down list
- <select> Tag Attributes:
- Options for select tag idented below
- Drop Down Combo-Box Name (for form processing script)
- Number of selectable options
- Allow multiple selections
- <option> </option>
- Option. This go inside select tag for several drop down options
- <option> Tag Attributes:
- Options for option tag idented below
- Option Value
- Set option as default selected option
- <textarea> </textarea>
- Large area for text input
- <textarea> Tag Attributes:
- Options for select tag idented below
- Text Area Name (for form processing script)
- Number of rows of text shown
- Number of columns (characters per rows)
- Word Wrapping:
off, hard, soft
- < - Less-Than Symbol
- > - Greater-Than Symbol
- & - Ampersand, or 'and' sign
- " - Quotation Mark
- © - Copyright Symbol
- ™ - Trademark Symbol
- - A space (non-breaking space)
- ISO 8859-1 character - replace ?? with the iso code(Opens new window. external site)
Hope this list made sense to you. Things like article/section can be nestet. For a good example of that check the source code of this very webpage and you see alot of sectioning, divided by headings. Dont hesitate to test stuff foryourself in my Coding Playground!
As a good practice get an overview of every single HTML tag and use them when it is logical. Crawlbots will love it. If this is not nough for you then you also can add schema.org to your website. It go more in-dept and can give you advantages in search queries by optimizing and adding additional information. Dont worry, got a good idea for a schema.org cheat-sheet later on.
Hope you learned something!
If you find any typos, got questions or just want to say hi, please do so in the comment section below :) Dont forget to like and share