Complete 2024 Web Development Bootcamp

Dr. Angela Yu

Back to HTML Index Page

 

Basic HTML Tags
Headings

Heading are elements that are generally used as a Title or heading of a section on a page. Let's say you want to discuss a book, you might start with a "heading" with the book title.

The basic syntax for a heading is:

  • <hx>heading text</hx>

Now headings come in different sizes (1 to 6) with one being the largest, and 6 being the smallest. So you would replace the x in the example with the corresponding number for the size you want (h1 to h6).

  • <h1>Heading 1</h1>

    • Heading 1

  • <h2>Heading 2</h2>

    • Heading 2

  • <h3>Heading 3</h3>

    • Heading 3

  • <h4>Heading 4</h4>

    • Heading 4

  • <h5>Heading 5</h5>
    • Heading 5
  • <h6>Heading 6</h6>
    • Heading 6

Paragraphs

Paragraphs are designated with a <p>paragraph text</p> element, like so:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ea dolorum itaque sunt odit, voluptate temporibus reprehenderit, optio amet reiciendis quidem odio, facilis illo. Animi dolor quia sapiente odit inventore.</p>

hr and br

The hr and br elements are referred to as "self-closing", or "void" elements, because they don't have a closing tag, and because they are void of having any content or info within the tag structure.

The hr element will place a horizontal line across the page, separating the elements before, and after it. The syntax is : <hr>.

The br element places a line break where you need one and the syntax for that is: <br>

Lists

Lists are a way to display data in an organized fashion. Lists can be organized with Bullets, Numbers, Roman Numerals, etc..

There are two types of lists, an "Ordered List" <ol>, and an "Unordered List" <ul>. An "Ordered List" is going to use Numbers or Roman Numerals, and an "Unordered List" is going to use some type of bullets. The syntax is going to use opening and closing "parent" tags that define what type of list it is ol, or ul. This is followed by the actual line items <li> that make up the list.

Examples:

    UnOrdered List
  • <ul>
    • <li>List Item 1</li>
    • <li>List Item 2</li>
    • <li>List Item 3</li>
  • </ul>
    Gives You
  • List Item 1
  • List Item 2
  • List Item 3
    Ordered List
  • <ol>
    • <li>List Item 1</li>
    • <li>List Item 2</li>
    • <li>List Item 3</li>
  • </ol>
    Gives You
  1. List Item 1
  2. List Item 2
  3. List Item 3
Notice the opening and closing tags, and also the "nested" structure.

One last thing to mention about lists is that you can also nest "sub_lists", like so:

    Ordered List
  • <ol>
    • <li>List Item 1
      • <ul>
        • <li>sub-List Item 1</li>
        • <li>sub-List Item 2</li>
        • <li>sub-List Item 3</li>
      • </ul>
    • </li>
    • <li>List Item 2</li>
    • <li>List Item 3</li>
  • </ol>
    Gives You
  1. List Item 1
    • sub-List Item 1
    • sub-List Item 2
    • sub-List Item 3
  2. List Item 2
  3. List Item 3
A couple of things to notice here. If you look you'll see that the "sub-list" is nested within an <li> tag. This is an important note as to how you set up your nesting. You could continue to have many other nested sub-lists if necessary.

Also notice that the sub-nesting does NOT have to be of the same type of list, as the parent list. You can mix and match any types of lists you need as long as you comply with the proper code structure, meaning the sub-list must be listed within an existing <li> tag.

Anchor Elements

Anchor elements define a hyperlink, which is used to link from one page to another, or from one place in a webpage to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination. By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

The basic syntax is:

  • <a href="link to destination" target="_blank">Displayed Text for Link</a>
and a real world example is:
  • <a href="www.bodingles.com" target="_blank">Bodingles.com</a>
and this is what is displayed on the page: Bodingles.com

Optional Properties:

  • target="_blank" opens the link in a new window.
  • rel="noopener noreferrer" protects your site's users against having the site you've linked to potentially hijacking the browser (via rogue JS).
    • Update as of 2021: All current versions of major browsers now automatically use the behavior of rel="noopener" for any target="_blank" link, nullifying this issue.

And lastly, you can link to somewhere within the current page. To do this, simply add and ID to any element on the page, that would be where you want to link to. And then place an Anchor tag in place in the page where you want the "link" to be displayed. When you create the link, the href would point to the previously declared ID.

So for example, many pages will have a link that goes back to the top of the page. So in your code, at the top of your page wher you want the link to go to, add the ID, like so:

  • <div id="top">
and the wherever you want to place the actual link, your going to create your "anchor element":
  • <a href="#top">Back to Top</a>
so your href is pointing to the div with the ID of "top".

A couple of points here. Where you place you ID does not have to be a <div>. It can be any element. But the ID HAS to match your href. Also, the Link Text can say whatever you like.

Image Elements

Image elements are used to display images on a page. One important note about <img> elements is that they are self-closing, or void elements, which means there is no closing tag.

The basic syntax is:

  • <img src="link to image file" alt="text describing image">
Now the src is going to be path to the image file/image.type. So an image element that displays an image of a butterfly in an images directory might look like:
  • <img src="images/butterfly.png" alt="image of a butterfly">

One note here about the src. The images do not have to be images you have on your local computer. They can also be online. Just replace the directory structure in ith src property to a web link, like so:

  • <img src="https://www.stockvault.net/data/2011/02/21/117750/preview16.jpg" alt="Online pic of sunset over the ocean.">
  • Online pic of sunset over the ocean.

Also, the alt is optional and is used for screen readers that will read the text out loud. This is an Aria feature that is part of the technology that allows people with "sight" disabilities to be able to know what is on a page. Even though this is optional, it is always considered "best practice" to include an alt property.


Back to Top