It is good practice to put the <title> tag inside all HTML documents.
Any text you put in between the opening tag, <title> and the closing tag, </title> will be the title of your webpage, like the title of this page is 'HTML - CodeFizz'.
The A tag isn't a normal tag. Do you notice the href="beiswenger.net/codefizz" inside of the opening tag? That is called an attribute, and they go after the tag name, but inside of the opening tag.
The href attribute states that "when the text inside of the tag is clicked", it will take you to beiswenger.net/codefizz.
You can make it take you to any website you like - just put the url of your choice between the double quotes in href=" " (which is inside of the a tag).
Note: Some websites will not work inside of the editor. To fix it, add this attribute: target="_blank"
<button>
<!DOCTYPE html>
<html>
<title>Button tag</title>
<body>
<h1>Welcome to my webpage!</h1>
<p>Hello World!</p>
<button onClick="alert('Hi!');">Click me!</button>
</body>
</html>
The button tag also isn't a standard tag. You need an attribute to tell it what to do - in this case, it's onClick.
The onClick attribute states that "when the text inside of the tag is clicked", it will run a JavaScript function. Right now, it's just calling the alert function with 'Hi!' as the text that it displays.
<img>
<!DOCTYPE html>
<html>
<title>Img tag</title>
<body>
<h1>Welcome to my webpage!</h1>
<p>Hello World!</p>
<img src="https://beiswenger.net/codefizz/files/logo.png" alt="CodeFizz Logo" width="200px" height="200px">
</body>
</html>
It is a self-closing tag, so you don't need to put a closing tag.
It also has four attributes - src (source), alt (alternate text), width, and height.
The src attribute points towards the location of the image that you want to display.
The alt attribute stores a brief description of what your image is, and it is displayed if the viewer can't see it for some reason. It defaults to "" (nothing).
The width and height attributes simply define the size of the image in pixels (px). If they are not included, the image will display in its default size.
<div>
<!DOCTYPE html>
<html>
<title>Div tag</title>
<body>
<h1>Welcome to my webpage!</h1>
<div style="background: beige; width: 200px; height: 200px;"></div>
</body>
</html>
Divs are used for keeping certain objects in one group.
They do not support width and height attributes, so you have to set its size through its style.
You can add the 'style' attribute to any object to quickly change or add a CSS attribute. In this case, it changes the background color, width, and height.
<iframe>
<!DOCTYPE html>
<html>
<title>iFrame tag</title>
<body>
<h1>Welcome to my webpage!</h1>
<iframe src="https://beiswenger.net/codefizz" width="500" height="500"></iframe>
</body>
</html>
The iframe tag is used for including another website into yours. It is commonly used to have multiple pages in the same site.
Use the src (source) attribute to state what page you are displaying.
Just like in the img tag, you can add width and height attributes to your iframe.
<br>
<!DOCTYPE html>
<html>
<title>Br tag</title>
<body>
<h1>Welcome to my webpage!</h1>
<p>Hello World!</p>
<br>
<p>Notice the large break between lines?</p>
</body>
</html>
<details> contains the content which will appear when the summary is clicked.
By default, the content between the <summary> tags will be shown with a small triangle to the left of it. When the triangle or text is clicked, the details will show.
<b> and <strong>
<!DOCTYPE html>
<html>
<title>B and strong tags</title>
<body>
<b>This text is bold.</b><br>
<strong>This text is also bold.</strong>
</body>
</html>
The i and em tags do the same thing - they make text italic.
You can replicate these tags in CSS with the font-style attribute.
<u> and <ins>
<!DOCTYPE html>
<html>
<title>U and ins tags</title>
<body>
<u>This text is underlined.</u><br>
<ins>This text is also underlined.</ins>
</body>
</html>
<!DOCTYPE html>
<html>
<title>S and del tags</title>
<body>
<s>This text has strikethrough.</s><br>
<del>This text also has strikethrough.</del>
</body>
</html>