<p> Paragraph text
This is one of the most important tags in HTML. It allows you to put text on your page. The look of the text can be changed with CSS.
HTML
HTML is the basic structure of a webpage. It uses tags, like <p> or <img>, to place text, images, links, lists, and more. CSS can style HTML, and JavaScript can make it interactive.
Each box below shows the tag name, a short explanation, an example, and copyable code.
<h1> Heading 1
Heading tags change the size and thickness of text. It starts out at h1 and ends at h6. H1 is good for titles, h2 for section headings, h3 for subsection headings, h4 for sub-subsection headings, and so on. The look of the h tags can be changed with CSS.
Title text
<h2> Heading 2
The h2 tag makes text smaller than the h1 text. It is good for section titles.
Section heading text
<h3> Heading 3
The h3 tag makes smaller text but it is still bigger than paragraph text.
Funny
<div> Div container
The div tag is a container. It does not do much by itself, but it is useful for grouping text, images, buttons, or other HTML together so you can style them with CSS. Most websites online are just a bunch of div tags.
Nothing much to show here.
<img> Image
The img tag adds an image to your page. For websites that do not allow file uploads for code, you need to make the img src a webpage. The alt text is there to describe the image if it fails to load or for screen readers.
<ul> + <li> Unordered list
The ul and li tags make a bullet list. The bullets for the list can be changed with CSS.
- Apples
- Oranges
<ol> + <li> Ordered list
The ol and li tags make a numbered list. The list style can be changed with CSS.
- Kiwis
- Raspberries
- Strawberries
<audio> Audio controls
The audio tag lets you add an audio player to your page. It can be tricky on websites that do not allow file uploads, such as Toyhouse and Art Fight.
<button> Button
The button tag creates a clickable button. The design can be changed using CSS.
<details> + <summary> Details + Summary
Details and summary allow for a collapsable piece of text. Good if you want to hide or spoiler anything.
click here to open
Peek a boo!
<b> Bold text
The b tag makes text bold.
Bazooka
<strong> Strong text
The strong tag makes text bold. It also gives the text stronger importance.
Bazooka but better
<i> Italic text
The i tag makes text italic, which means the text leans to the side.
I don't have anything funny to put here.
<em> Emphasized text
The em tag makes text italic. It is usually used when text needs emphasis.
Insert funny joke
<small> Small text
The small tag makes text smaller.
I like Pink Floyd.
<mark> Mark
The mark tag highlights text. You can change the highlight color with CSS.
This is not important.But this is! Oh it's not important again.
<ins> Inserted text
The ins tag underlines text.
Replace_with_your_text
<del> Deleted text
The del tag crosses out text.
<br> Line break
The br tag creates a line break. It moves the next part of the text onto a new line.
Top Text
Bottom Text
Bottom Text
<hr> Horizontal line
The hr tag creates a horizontal line. It is useful for separating sections.
Text above the line
Text below the line
Text below the line
<blockquote> Blockquote
The blockquote tag is used for quotes or quoted sections. Browsers usually indent it, which helps the quote look separate from the rest of the text.
And I was like, "That's what she said!"
<code> Code text
The code tag makes text look like code by changing the font to something commonly seen in programming.
I don't know what the name of the font is but it's an easy way to change fonts without using css!
<pre> Preformatted text
The pre tag keeps spaces and line breaks. It is good for ASCII art or text that needs a specific layout.
/\_/\ ( o.o ) > ^ <
<sub> Subscript text
The sub tag makes text sit lower and makes it smaller, like in Hâ‚‚O.
Normal textsmall text
<sup> Superscript text
The sup tag makes text sit higher, like exponents.
Normal textsmall text
<center> Center
The center tag centers text. It is old HTML, but it can be useful for simple old-web layouts.
<bdo> Bdo
The bdo tag reverses the direction of text. Use dir="rtl" to make it read right to left.
I can't wait for Neo Universe to release on the global version of Umamusume!
<marquee> Marquee
The marquee tag makes scrolling text. It was popular for older websites, so if you are going for that retro or y2k aesthetic then it is perfect.
<select> + <option> Select + Option
The select and option tags create a dropdown menu. This can add a fun bit of interactivity to your website.
<html> Template Page Shell
A basic HTML template for web development.