HTML TAGS pt. 1

So these <> things are tags?

Yes, these funny looking triangle diamond things are HTML tags.
It is these tags that a browser looks at before deciding how to render your content.
There are many different HTML tags and they all serve a different purpose.
One tag might be used to make your font bold.
Another might be used to create a list.

Most HTML tags have an opening and a closing tag.
An opening tag looks like this: <tagNameHere>
A closing tag looks like this: </tagNameHere>
Some HTML tags are self-closing which means you don't need to follow up with a closing tag.

Commonly used HTML tags

<!DOCTYPE html> Declares the type of document

<html> The root of an HTML document and the container for all other HTML elements

    <head> Used to declare metadata of an HTML document such as title, style, etc. (metadata is not displayed in the browser)

       <title> Defines the title of the document shown in the browser's page tab or title bar </title>

       <link> Defines the relationship between the current document and an external document, such as a CSS file (self-closing tag)

       <style> Used to define internal CSS information to a document </style>

    </head>

    <body> Container for all elements in an HTML document that appear in the browser

       <div> Defines a section (but I like to think of it as "creates a box")

          <h1> Heading 1 of 6 </h1>

          <h2> Heading 2 of 6 </h2>

          <h3> Heading 3 of 6 </h3>

          <h4> Heading 4 of 6 </h4>

          <h5> Heading 5 of 6 </h5>

          <h6> Heading 6 of 6 </h6>

          <ul> Creates an unordered list of bulletpoints

             <li> Creates an unordered list item within an unordered list </li>

          </ul>

          <ol> Creates an ordered list of numbers

             <li> Creates an ordered list item within an ordered list </li>

          </ol>

          <dl> Creates a description list

             <dt> Defines a term in a description list </dt>

             <dd> Describes a term in a description list </dd>

          </dl>

          <hr> Inserts a horizontal line (self-closing tag)

          <br> Inserts a single line break (self-closing tag)

          <img> Embeds an image into the HTML page (self-closing tag)

          <a> Defines a hyperlink used to link to another page </a>

          <p> Defines a paragraph

             <strong> Defines text with strong importance, text is displayed in bold </strong>

             <em> Defines text with emphasis, text is displayed in italics </em>

             <u> Defines text that is styled differently (such as a purposeful misspelling), text is underlined </u>

             <s> Defines text that is no longer current or accurate, text is displayed with a line through it </s>

             <b> Text is bold </b>

             <i> Text is italicized </i>

             <blockquote> Creates a section for a quote </blockquote>

             <span> Creates an inline section (think div but within a line) </span>

             &nbsp; Adds one white space

          </p>

       </div>

    </body>

    <!-- Used to make comments into the source code; not visible in the browser -->

</html>

Next: HTML Tags pt. 2

Return to previous page
Return to main page