jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-13 16:04:36 -04:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): Add interactive examples to intro HTML lesson (#62627)

Browse Source
This commit is contained in:
Giftea ☕
2025-10-09 17:35:55 +01:00
committed by GitHub
parent 4afd65e683
commit f14934c326
1 changed files with 47 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
curriculum/challenges/english/blocks/lecture-understanding-html-attributes/66f6db08d55022680a3cfbc9.md
View File

@@ -5,15 +5,37 @@ challengeType: 19
dashedName: what-is-html
---
# --description--
# --interactive--
HTML, which stands for Hypertext Markup Language, is a markup language for creating web pages. When you visit a website and see content like paragraphs, headings, links, images, and videos; that's HTML. HTML represents the content and structure of a webpage through the use of elements. Here's an example of a paragraph element:
HTML, which stands for Hypertext Markup Language, is a markup language for creating web pages. When you visit a website and see content like paragraphs, headings, links, images, and videos; that's HTML.
Here is a small example using HTML elements. Try editing some of the text in the editor and see the changes update in the preview window.
:::interactive_editor
```html
<p>Hello</p>
<h1>Main heading element</h1>
<p>I am a paragraph element.</p>
```
Most elements will have an opening tag and a closing tag. Sometimes those tags are referred to as start and end tags. In between those two tags, you will have the content. This content can be text or other HTML elements. Both opening and closing tags start with a left angle bracket (`<`), and end with a right angle bracket (`>`), with the tag name placed between these angle brackets. While HTML tag names are case-insensitive, it is a widely accepted convention and best practice to write them in lowercase. Here is a closer look at just the opening and closing paragraph tags:
:::
HTML represents the content and structure of a webpage through the use of elements. Most elements will have an opening tag and a closing tag. Sometimes those tags are referred to as start and end tags. In between those two tags, you will have the content. This content can be text or other HTML elements.
Here is another example of a paragraph element. Change the text in the editor to say `I love coding!` and see the results in the preview window.
:::interactive_editor
```html
<p>I am a paragraph element.</p>
```
:::
Both opening and closing tags start with a left angle bracket (`<`), and end with a right angle bracket (`>`), with the tag name placed between these angle brackets. While HTML tag names are case-insensitive, it is a widely accepted convention and best practice to write them in lowercase.
Here is a closer look at just the opening and closing paragraph tags:
```html
<p>
@@ -23,7 +45,9 @@ Most elements will have an opening tag and a closing tag. Sometimes those tags a
</p>
```
What distinguishes an opening tag from a closing tag is the forward slash (`/`) placed immediately after the left angle bracket in a closing tag. Some HTML elements do not have a closing tag. These are known as void elements. Here is an example of an image element which is a void element:
What distinguishes an opening tag from a closing tag is the forward slash (`/`) placed immediately after the left angle bracket in a closing tag. Some HTML elements do not have a closing tag. These are known as void elements.
Here is an example of an image element which is a void element:
```html
<img>
@@ -41,23 +65,35 @@ While many code formatters like Prettier, will choose to include the `/` in void
In real world development, you will see both forms so it is important to be familiar with both.
If you wanted to display an image, you will need to include a couple of attributes inside your image element. An attribute is a special value used to adjust the behavior for an HTML element. Here is an example of an image element with a `src`, or source, attribute:
If you wanted to display an image, you will need to include a couple of attributes inside your image element. An attribute is a special value used to adjust the behavior for an HTML element.
Here is an example of an image element with a `src` attribute. Update the value of the `src` attribute to `"https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"` and you will see the image change to two cats peacefully sleeping.
:::interactive_editor
```html
<img src="image location" />
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" />
```
The `src` attribute is used to specify the location for that image. For image elements, it's good practice to include another attribute called the `alt` attribute. Here's an example of an image element with the `src` and `alt` attributes:
:::
The `src` attribute is used to specify the location for that image. For image elements, it's good practice to include another attribute called the `alt` attribute. The `alt` attribute is used to provide short, descriptive text for the images.
Here's an example of an image element with the `src` and `alt` attributes. Try breaking the image by updating the `src` value to `"https://.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"`. You will see the image disappear and only the `alt` text show.
:::interactive_editor
```html
<img src="example-cat-img-url" alt="Cat sleeping in the grass">
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Two tabby kittens sleeping together on a couch." />
```
The `alt` attribute is used to provide short, descriptive text for the images. In this case, the descriptive text is a "Cat sleeping in the grass".
:::
So, you might be wondering if HTML by itself is enough to build a website. Well, the answer is: it depends. If you're building a small practice project that only displays text and images, HTML alone might be sufficient. However, if you're creating a modern professional website, you will need to have HTML, CSS, and JavaScript.
HTML is for the content and structure. CSS is for styling. JavaScript is for adding interactivity to your web pages. A good analogy for this is to compare HTML, CSS, and JavaScript with a complete building. HTML represents the blocks, concrete, and irons that make up the walls. It's the foundation that makes the building strong. CSS represents the interior and exterior design that makes the house look beautiful. JavaScript represents the electrical and water system that ensures uninterrupted access to water and electricity.
HTML is for the content and structure. CSS is for styling. JavaScript is for adding interactivity to your web pages. A good analogy for this is to compare HTML, CSS, and JavaScript with a complete building.
HTML represents the blocks, concrete, and irons that make up the walls. It's the foundation that makes the building strong. CSS represents the interior and exterior design that makes the house look beautiful. JavaScript represents the electrical and water system that ensures uninterrupted access to water and electricity.
# --questions--