HTML Elements and Attributes

In this lesson, you’ll revisit HTML in more detail, and learn about more elements.

HTML Basics

HTML Example

Here’s an example. On the left is HTML. On the right is the same code, rendered as a webpage.

<p>
    This is a paragraph. It has an
    <a href="https://example.com">
        Example Link
    </a>
    inside the paragraph.
</p>
<img src="https://web-foundations.vercel.app/lessons/foundations/html-elements-and-attributes/valley-waterfall.png" alt="this is an example image" />

This tool is called CodePen, and we'll use it to demonstrate snippets of HTML, CSS, and JS. You can use it as a small playground for experimenting.

HTML Elements

HTML is made of text you can type on your keyboard. In addition to normal words, there are special words in angle brackets, like <p>, <a>, and <img> that add structure to the content.

The building blocks of HTML are called elements. A webpage is made up of elements.

• Elements have different types
• Elements can nest inside each other
• Elements can have attributes

Types and Tags

There are lots of types of elements. In the snippet above, the elements are:

• <a> stands for ‘anchor’, but means link
• <p> for paragraph
• <img> for images

There are many many elements in addition to these three. You’ll learn about 20 to 30 elements in the course. You can always look them up if you forget.

Tags

The syntax that looks like <some name> is called a tag. It says what kind of element it is.

Elements usually have two tags: an opening tag, and a closing tag. They show where the element starts and where it stops.

<p>Opening first, then closing</p>

• The opening tag is <p>
• The closing tag is </p>, with a forward slash / before the p.

Nesting HTML Elements

HTML elements can go inside of each other. Everything that’s in between the opening tag and the closing tag is ‘inside’ an element. It can be text, like the paragraph above, or other HTML elements, or both. The element inside another element is called the child element while the one outside is the parent. Here's an example showing a <p> element inside an <a> element.

HTML Attributes

HTML elements often have more information.

This kind of information goes in an element’s attributes. Attributes provide more information about how an element should work.

For instance, an <img> tag can say where to find the actual image. An <a> tag can tell where to link to. Here’s some examples:

• the src (source) of an <img> (image) element tells the browser where to go to find the actual image to put there:

  <img src="valley-waterfall.png" />
  

• the href (hypertext reference) of an anchor tag (<a>) tells the browser where the link should go when you click it.

  <a href="https://example.com">The text that shows up</a>
  

• the class attribute of any element helps identify it as part of a group. It’s really useful for styling and adding interactivity.

  <p class="nice">Hello world!</p>
  

Elements to know

There’s more than 200 HTML elements, you can see them all on MDN. You don’t need to memorize all of them. There are tons of them you’ll never ever use!

Here’s the ones that you'll use this week.

<a>: hyperlink

<a> stands for ‘anchor’, but means link. It’s the element that connects the whole web together.

• The href attribute determines where the link will go when clicked
• Whatever’s inside the tag is clickable as a link

See the Pen a tag demo by Rob Cobb (@rrcobb) on CodePen.

Image: <img>

Images make the web visually appealing. The <img> tag tells which image to add, where.

• The src attribute says where to find the image
• The alt attribute has a text description of the image, for accessibility

See the Pen Example of an img tag by Rob Cobb (@rrcobb) on CodePen.

<a href="https://kibo.school">
  <img src="valley-waterfall.jpeg" />
</a>

Text

Text Nodes

Inside a <p>, an <a>, or lots of other tags, you’ll see regular text. Text placed inside many elements shows up on the page. Sometimes, depending on the element, the text will show up differently.

Text Elements

<p>: Paragraph

<p> is for paragraph. It’s for the body text that makes up the bulk of text-heavy pages.

• Paragraphs show the text inside the tag. They don’t make the text show a special way.
• Each paragraph gets shown on a new line when the page is displayed.

See the Pen p tag demo by Rob Cobb (@rrcobb) on CodePen.

<h1> to <h6>: Heading

• There are six heading elements.
• The biggest one is h1, the smallest is h6
• They are used for the title of the page, section and subsection titles

See the Pen heading demos by Rob Cobb (@rrcobb) on CodePen.

<ul>, <ol>, <li>: Lists

There are two kinds of lists. Unordered Lists <ul> have dots before each item. Ordered Lists <ol> have increasing numbers before each item. Both lists use <li> for list items.

See the Pen List Demos by Rob Cobb (@rrcobb) on CodePen.

<strong>, <em>: emphasized text

• Both of these tags indicate that text is emphasized in some way
• <strong> is a strong emphasis, for really important information
• <em> is for information that’s different from the norm, but not as strongly emphasized

See the Pen strong and em demos by Rob Cobb (@rrcobb) on CodePen.

Practice: Find a new tag

🔍 The Mozilla Developer Network (MDN) is a top source of tutorials and reference materials for Web Developers.

Starting at the MDN overview page on HTML, find a description for an HTML element that’s new to you. Using the link below, share:

• the name of the element
• the link to the MDN page, and
• what you find interesting about it

https://padlet.com/curriculumpad/find-a-new-tag-on-mdn-4ge2twh4yzdhn6se

Practice: Use the basic elements

👉🏿 Your turn! Click the link below to attempt the practice exercise on Replit.

https://replit.com/team/tk10-wf/Practice-Use-the-basic-elements

To complete this, try to include these tags:

• a paragraph
• a link
• an image (there's an example image called example.jpeg in the sidebar)
• two headings, of different levels
• an unordered list
• an ordered list
• some emphasized and strongly emphasized text
• Don't worry about the content of the page, it can just say "This is a heading" for the headings, and "this is a link" for the links.

Re-read the lesson or look up the elements using Google if you get stuck.