CodeFizz

A Free Learn-To-Code Website

HTML Syntax

No search results found.

🡹

<!DOCTYPE html> and <html>

<!DOCTYPE html>
<html>
...
</html>

Try it »

Meaning and Usage

The <!DOCTYPE> declaration should be the very first thing in your HTML document, before the <html> tag.
<!DOCTYPE> is an instruction to the web browser about what version of HTML the page is written in.
Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.
<!DOCTYPE> is a self-closing tag, but <html> is not.
The <html> tag contains all of the code for your website.

<p>

<!DOCTYPE html>
<html>
<p>Hello World!</p>
</html>

Try it »

Meaning and Usage

P is short for paragraph.
Any text you put in in between the opening tag, <p> and the closing tag, </p> will be displayed as text on the webpage.
Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified with CSS.

<title>

<!DOCTYPE html>
<html>
<title>My Webpage</title>
<p>Hello World!</p>
</html>

Try it »

Meaning and Usage

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'.

<body>

<!DOCTYPE html>
<html>
<title>Body tag</title>
<body>
<p>Hello World!</p>
</body>
</html>

Try it »

Meaning and Usage

Any code you put between <body> and </body> will be the main content of what is in your webpage.
It is good practice to use the body tag.

<h1>

<!DOCTYPE html>
<html>
<title>H1 tag</title>
<body>
<h1>Welcome to my webpage!</h1>
<p>Hello World!</p>
</body>
</html>

Try it »

Meaning and Usage

H is short for heading, and the number after it determines the size. (The number can be from 1 to 6 - 1 being the largest and 6 being the smallest.)
The h1 tag is similar to the p tag, except that the text is displayed larger and is in bold.
Try changing h1 to h3 to see what happens!

<a>

<!DOCTYPE html>
<html>
<title>A tag</title>
<body>
<h1>Welcome to my webpage!</h1>
<p>Hello World!</p>
<a href="https://beiswenger.net/codefizz">Click me!</a>
</body>
</html>

Try it »

Meaning and Usage

A is short for anchor, because it's "anchoring" you to another page.
You can use the a tag for links, just like this.
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>

Try it »

Meaning and Usage

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>

Try it »

Meaning and Usage

The img tag displays an image on your webpage.
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>

Try it »

Meaning and Usage

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>

Try it »

Meaning and Usage

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>

Try it »

Meaning and Usage

The br tag is self-closing.
Its function is to insert a line break.

<hr>

<!DOCTYPE html>
<html>
<title>Hr tag</title>
<body>
<h1>Welcome to my webpage!</h1>
<hr>
<p>Notice the horizontal line?<p>
</body>
</html>

Try it »

Meaning and Usage

The hr tag is self-closing.
Its function is to simply insert a horozontal line across your webpage.

<style>

<!DOCTYPE html>
<html>
<title>Style tag</title>
<style>
div {
background: gold;
border: 2px solid black;
position: absolute;
font-weight: bold;
padding: 3px;
}
div::before {content: ">";}
div::after {content: "<";}
</style>
<body>
<div>_</div>
</body>
</html>

Try it »

Meaning and Usage

The style tag lets you include CSS in your HTML documents in an easy-to-read fashion.
See the CSS intro for more information.
You can even make overcomplicated emojis with CSS!
This example uses the before and after pseudoelements, background color, border, position, font-weight, padding, and content.

<script>

<!DOCTYPE html>
<html>
<title>Script tag</title>
<body>
<button onClick="greet();">Click me!</button>
<p id="name"></p>
</body>
<script>
function greet(){
var name=prompt("What's your name?");
var namelist=['Jeff','Mario','Luigi','Yoshi','Toad','sinking. Somebody help','a zombie'];
var me=namelist[Math.floor(Math.random()*namelist.length)];
document.getElementById("name").innerText="Hi "+name+", I'm "+me+"!";
}
</script>
</html>

Try it »

Meaning and Usage

The script tag lets you include JavaScript in your HTML documents in an easy-to-read fashion.
See the JavaScript intro for more information.
You can even make a robot that introduces itself with a random name with JavaScript!
This example uses functions, variables, getElementById, innerText, Math.floor, and Math.random.

<details> and <summary>

<!DOCTYPE html>
<html>
<title>Details and summary tags</title>
<body>
<details>
<summary>CodeFizz rocks!</summary>
<p>Join the <a href="/cfdiscord">CodeFizz Discord</a></p>
<p>Support us on <a href="/cfpatreon">CodeFizz Patreon</a></p>
<p>Subscribe to the <a href="/cfyoutube">CodeFizz YouTube Channel</a></p>
</details>
</body>
</html>

Try it »

Meaning and Usage

<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>

Try it »

Meaning and Usage

The b and strong tags do the same thing - they make text bold.
You can replicate these tags in CSS with the font-weight attribute.

<i> and <em>

<!DOCTYPE html>
<html>
<title>I and em tags</title>
<body>
<i>This text is italic.</i><br>
<em>This text is also italic.</em>
</body>
</html>

Try it »

Meaning and Usage

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>

Try it »

Meaning and Usage

The u and ins tags do the same thing - they make text underlined.
You can replicate these tags in CSS with the text-decoration attribute.

<s> and <del>

<!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>

Try it »

Meaning and Usage

The s and del tags do the same thing - they make text have a line through the middle of them, also known as strikethrough.
You can replicate these tags in CSS with the text-decoration attribute.

<q>

<!DOCTYPE html>
<html>
<title>Q tag</title>
<body>
<p><q>This text has quotes.</q> - Professor Dragon 2020</p>
</body>
</html>

Try it »

Meaning and Usage

The q tag just puts double quotes around text.

<sup> and <sub>

<!DOCTYPE html>
<html>
<title>Sup and sub tags</title>
<body>
<p>Look, I'm <sup>high!</sup></p>
<p><sub>Low,</sub> I am.</p>
</body>
</html>

Try it »

Meaning and Usage

The sup (superscript) tag makes the containing text be smaller and higher. It can be used for things like this - x².
The sub (subscript) tag makes the containing text be smaller and lower. It can be used for things like this - CO₂.

<abbr>

<!DOCTYPE html>
<html>
<title>Abbr tag</title>
<body>
<p>CodeFizz can teach you <abbr title="HyperText Markup Language">HTML</abbr> for free!</p>
</body>
</html>

Try it »

Meaning and Usage

The abbr (abbreviation) tag adds a dotted line underneath text.
Add the title attribute to make the expanded abbreviation show up when you hover over the text!