Wow! Look how far you've come. You're well on you way to becoming proficient with HTML. And before we continue be sure to repeat our mantra. Say to yourself or aloud; "I CAN DO THIS!, I WILL DO THIS!" Now say it one more time!!

All finished? Great! let's move on!

This lecture is all about common tags and a new HTML coding term called attributes. If you feel stuck or unsure about something, leave a comment!

Common Elements (and their tags)

You'll realize that you can accomplish a lot with these basic HTML elements.
NOTE: * = elements that have a corresponding end (closing) tag.

• Heading, sized in order of largest to smallest, defined by using <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags.*
• Paragraph, defined by using the <p> tag.*
• Italic or Emphasis, defined by using <i> or <em> tags.*
• Bold or Strong, defined by using <b> or <strong> tags.*
• Anchor (or "a" tag), links web pages and content together, defined by using the <a> tag.*
• Unordered List and List item defined by using <ul> and <li> tags.*
• Ordered List and List item defined by using <ol> and <li> tags.*
• Division, defined by using the <div> tag.*
• Image, defined by using the <img> tag.
• Horizontal Rule, a simple separator, defined by using the <hr> tag.
• Span, an inline container used to mark up only a part of a text, or document, defined by using the <span> tag.*
• Line break, a single line break, defined by using the <br> tag.

Example: Some common elements in action

Results in …

Let's see what common tags can do!

While there are many more tags, these will take you very far.

Paragraph tags come in handy while writing multiple sentences and you need to break it up.
If you've ever used google docs, microsoft word or wrote an email, chances are HTML was being used

---

• Unordered lists are also know as bulleted lists
• List items should only be used inside unordered or ordered list tags

A Division or "Div" is a main way to separate content and elements in a page.

We'll go over how powerful divs are as they can be one of the main ways to create different layouts.

Attributes

HTML elements have additional options called attributes that help you expand on what your markup can do. You can add one or more attributes to the start/opening tag of HTML elements:

<tag attribute="...">some text</tag>

Some common HTML elements such as the <a> and <img> tags have unique attributes:

• The <a> tag has the href (Hypertext REFerence) attribute which specifies which page or file to link to. And the target attribute which sets how you want it to open (same window, new window, etc). More info on the target attribute.

  Example: <a href="https://createwithkirk.teachable.com" target="_blank" >School Homepage</a>
  Results in: School Homepage

• The <img> tag (used to add images to a page) has the required attributes src (source) which specifies the image to display and alt (alternate text) which is the text that shows when the image cannot be displayed (or broken).

  Example: <img src="./images/HTML-attribute-concept.gif" alt="Example image">
  Results in:
  or when broken:

NOTE: Some attributes can be used by any HTML element, known as Global Attributes. The following global attributes are also used heavily by another important web language, named CSS. For more info, check out this CSS introduction.

• style - Defines CSS styles directly on an element.
• id - Defines a unique ID for a single element within a page.
• class - Defines one or more CSS classes for an element.