HTML/CSS Guide

Common HTML Tags inside <body>

<body> Tags Definition Example(s)
  • <h1> </h1>
  • <h2> </h2>
  • <h3> </h3>
  • <h4> </h4>
  • <h5> </h5>
  • <h6> </h6>
Headers 1 through 6 for titles on webpages. <h1> </h1> is the largest and boldest and <h6> </h6> is the lightest and just smaller than the text in a paragraph.
  1. Heading 1

  2. Heading 2

  3. Heading 3

  4. Heading 4

  5. Heading 5
  6. Heading 6
<p> </p> The <p> </p> tag is called a paragraph. The paragraph is useful for writing sentences and one of the most important tags.

This is a paragraph

<img src="link" alt="pic" style="style" > The <img> tag is a useful tag to add images to your webpages. You can use local images in the same folder as the webpage or you can link images using their image link. Images are supported with many file extensions such as .png , .jpeg/.jpg , .gif and many more. This tag doesn't have a closing tag. Cool Cat
<div> </div> The <div> </div> tag is a great way to group elements into sections. This tag is used with CSS.

This is an ungrouped paragraph


This is a grouped paragraph

This is also a grouped paragraph


This is an ungrouped paragraph

<a href="link" target="_blank"> </a> The <a> </a> tag is used for links to other websites or separate pages within the same website. <a> </a> tags are blue when you have not visited them and purple when you have.

If you would like to leave this site click Here! If you don't want to then do not click it.

<strong> </strong> and <em> </em> These tags are used to style the text without CSS. <strong> </strong> is used for importance and bolds text. <em> </em> is used for emphasis and italicizes the text within. Very Important Paragraph (what VIP stands for)
<br> and <hr> The <br> and <hr> tags are very similar where <br> creates a break in a line, whereas <hr> additionally to the line break also draws a line potentially separating paragraphs. Both tags do not have a closing tag.

Dear Marigold The Flower


I drew this like for you (I didn't the <hr> tag did it for me).


<!-- Comment --> Comments are represented with <!-- ... --> and are only for the developers. Webpages do not load them and are for notes for the team or reminders for syntaxes or important things. Comments are extremely useful even for solo dev. You cannot see the following comment
<iframe src="link"> </iframe> The <iframe> </iframe> tag is a useful tag to link other webpages to your webpage but in a unique way. The <iframe src="link"> </iframe> loads a separate window in a portion of your website allowing one to traverse throughout the internet within your website.
<span style="style"> </span> The <span> </span> tag like div is used to make sections, but unlike div it is used inside paragraphs.

This paragraph has a span tag within


Next Page >>