Headers

Headline Using `<h1>` Tag

Headline Using `<h2>` Tag

Headline Using `<h3>` Tag

Headline Using `<h4>` Tag

Headline Using `<h5>` Tag

Headline Using `<h6>` Tag

Useful Tags / Special Characters

The <hr> tag will create a horizontal line to divide sections

The <br> tag will start a new line or insert a blank line...
...like so.

Special Characters

HTML Entities (reserved characters)
HTML Symbols

Paragraph Formatting

              This paragraph uses the <pre> (preformatted) tag 

              so I can insert       many spaces...


              ...and it preserves them.

The <pre> tag along with the <code> tag can be used to write computer code as text:


              if (size > 100) {
                console.log('Big');
              } else if (size > 20) {
                console.log('Medium');
              } else {
                console.log('Small');
              }

This paragraph uses the <q> (quotation) tag.

This paragraph uses the <blockquote> tag.

In this paragraph,

the text in the <address> element renders in italic

and browsers will always add a line break before and after.

This paragraph uses the <cite> tag to emphasize a title (in this case, the word "paragraph") and the <abbr> tag with a title="ABBREVIATION" attribute to insert the definition/word abbreviated, ABBR.

This paragraph uses a <span> tag with the attribute <style="color: red"> to emphasize a word.

The following is a <bdo> tag using a <dir="rtl">(right-to-left) attribute:

Text Formatting

Using the <strong> (important) tag or the <b> (bold) tag

Using the <small> tag

Using the <mark> tag

Using the <i> (italic) tag or the <em> (emphasis) tag or the VAR (variable) tag

^{Using the <sup> (superscript) tag} or _{the <sub> (subscript) tag}

~~Using the <del> (delete) tag~~ or the <ins> (insert) tag

Using the <kbd> (keyboard) tag or the <samp> (sample output) tag

Images and Links

Insert a link using the <a> tag with the href attribute that points to a website or an internal page.
Example: <a href="https://www.abc.org/">
or <a href="href="semantics.html">

The target="_blank" attribute can be used to open the link in a new page.

Add an id attribute to any tag (example: id="headers") to be able to jump to that section using an <a> tag with href="#headers" attribute.

Insert an image using the <img> tag with the src attribute.
Example: <img src="images/forest.jpg">

This image is also a link (embed <img> tag within an <a> tag instead of using text):

Use the <a> tag with the href attribute pointing to a PDF or DOCX document to create a downloadable link: HTML notes.

I-Frames

The <iframe> tag with <src> attribute can be used to insert a window with website content (also use <height> and <width> attributes to specify the size):

Headers

Headline Using <h1> Tag

Headline Using <h2> Tag

Headline Using <h3> Tag

Headline Using <h4> Tag

Headline Using <h5> Tag

Headline Using <h6> Tag