Frontend playground
Frontend Playground
Invalid Date
Welcome to Frontend Playground
If you are already comfortable with editor/IDE, use them. If not, use online playgrounds like CodePen or JSFiddle.
In this tutorial, we will create a simple self-introduction webpage.
Do you know <p>?
<p> is the HTML tag for paragraph.
In HTML, usually use lowercase letter in tag name.
In the HTML area, input the following code:
<h1>My name is YUI</h1>Now you see The Most Basic Pattern in HTML: Tag
The Most Basic Pattern in HTML: Tag
<h1>My name is YUI</h1>- open tag:
<h1> - content:
My name is YUI - close tag:
</h1>
Now, try to read this code aloud:
<p>I'm a foreign student in Japan.</p>- open tag:
<h1>- open angle bracket:
< - tag name:
h1 - close angle bracket:
>
- open angle bracket:
- content:
My name is YUI - close tag:
</h1>- open angle bracket:
< - forward slash:
/ - tag name:
h1 - close angle bracket:
>
- open angle bracket:
Open tag p, content is I'm a foreign student in Japan., close tag p.
Look at the open tag and close tag, what is the big difference?
The close tag has a forward slash / right after the opening angle bracket <. That's it!