Containers with div

The <div> element is a generic container used to group related HTML elements together. It has no special meaning by itself, but it is useful for structure, styling, or scripting.

Result:

Class

class lets you label an element so you can style or target it later — especially useful when you want the same style on more than one element.

Unordered lists

Use <ul> (unordered list) when the order of items doesn’t matter. Every item goes in its own <li> (list item) tag, and browsers add bullets automatically.

Result:

• HTML
• CSS
• JavaScript

Ordered lists

Use <ol> (ordered list) when the order matters, like steps or rankings. It uses the same <li> items, but the browser numbers them for you.

Result:

1. Write some HTML
2. Save the file
3. Open it in the browser

Using lists properly

• <li> must be inside a <ul> or <ol>, never on its own.
• The only direct children of <ul> and <ol> are <li> elements.
• To nest a list, place the new <ul> or <ol> inside an <li>.

Result:

• Frontend
  • HTML
  • CSS
• Backend

Semantic tags

A page made only of <div> elements works, but nothing tells browsers, search engines, or screen readers what each part is. Semantic tags give each part a meaningful name:

• <header>: introductory content, like a title or logo
• <nav>: a group of main navigation links
• <main>: the central content of the page (use only one per page)
• <section>: a group of related content, usually with its own heading
• <footer>: closing content, like copyright text

They improve accessibility, help search engines, and make your code easier to read.

Putting it together

This page uses all five semantic tags, plus a list inside <nav> and an ordered list inside <section>.

Result:

My Study Notes

Today's goals

1. Learn about lists
2. Learn about semantic tags

Try it yourself

Build a small personal website layout using all five semantic tags. Add a <header> with your name as an <h1> and a <nav> with an unordered list of three links. In <main>, add two <section> elements: one with an ordered list of your top three goals, and one with a short paragraph about you. Finish with a <footer>, and leave a comment above each major tag explaining its purpose.