HTML facts for kids

Kids Encyclopedia Facts

Quick facts for kids
HTML
(HyperText Markup Language)
The official logo of the latest version, HTML5
Filename extension	`.html` `.htm`
Internet media type	text/html
Type code	TEXT
Uniform Type Identifier (UTI)	public.html
Developed by	WHATWG World Wide Web Consortium (W3C; formerly)
Initial release	1993; 32 years ago (1993)
Latest release	Living Standard
Type of format	Document file format
Container for	HTML elements
Contained by	Web browser
Extended from	SGML
Extended to	XHTML
Open format?	Yes

HTML, short for HyperText Markup Language, is a special language used to build webpages. These pages are what you see when you use a web browser. HTML helps web browsers show text, pictures, links, sounds, and video in the right places.

HTML can also add hidden information about a webpage. This is called meta information. It might include who made the page. Web browsers usually do not show this information.

HTML works with other languages like Cascading Style Sheets (CSS) and JavaScript. CSS changes how a webpage looks, like its colors and fonts. JavaScript adds cool features and makes pages interactive.

The World Wide Web Consortium (W3C) created HTML. There are many versions of HTML. The newest official version is HTML 5.2. The W3C also works on XHTML, which is like HTML but has stricter rules.

What is HTML Markup?
HTML Elements: Building Blocks of Webpages
- Examples of HTML Elements
  - Headings
  - Paragraphs
  - Line Breaks
  - Links
  - User Inputs
  - Comments
HTML Attributes: Adding Details to Elements
Common HTML Tags
Images for kids
See also

What is HTML Markup?

HTML markup is made of several key parts. These include tags, attributes, and references. HTML tags often come in pairs, like <h1> and </h1>. The first tag is the start tag, and the second is the end tag.

Some tags are empty elements and do not have an end tag. An example is <img>. Another important part is the HTML document type declaration. This tells the browser how to show the page correctly.

Here is a simple example of an HTML page:

<!DOCTYPE html>
<html>
  <head>
    <title>This is a title</title>
  </head>
  <body>
    <div>
        <p>Hello world!</p>
    </div>
  </body>
</html>

The text between <html> and </html> describes the whole webpage. The text between <body> and </body> is what you see on the page.

The <title>This is a title</title> part sets the name for the browser tab. The <div> tag helps organize parts of the page for styling. Inside <head> and </head>, you can use a <meta> element for hidden webpage details.

The <!DOCTYPE html> line tells the browser it's an HTML5 page. If this line is missing, browsers might show the page in an older, less standard way.

HTML Elements: Building Blocks of Webpages

HTML element content categories

HTML documents are built using nested HTML elements. These elements are shown in the document by HTML tags. Tags are always placed inside angle brackets.

Most elements use a pair of tags: a "start tag" like <p> and an "end tag" like </p>. Any text or other tags inside these form the element's content.

Tags can also hold attributes. Attributes give extra information about the element. For example, an <img> tag uses an attribute to say where the image file is located: <img src="example.com/example.jpg">.

Some elements, like the line break <br>, are "empty elements". They don't have any content or an end tag. They just do one thing, like starting a new line.

The general way an HTML element looks is: <tag attribute1="value1" attribute2="value2">''content''</tag>. Empty elements look like: <tag attribute1="value1" attribute2="value2">. The end tag's name starts with a slash (/).

Examples of HTML Elements

Headings

HTML uses heading tags from <h1> to <h6>. <h1> is the most important heading, and <h6> is the least important.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

These tags make your text look like this:

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

You can change how these headings look using CSS.

Paragraphs

Paragraphs are made with the <p> tag.

<p>Paragraph 1</p> <p>Paragraph 2</p>

Line Breaks

The <br> tag creates a line break. It moves text to the next line without starting a new paragraph. Unlike <p>, <br> is an empty element and has no end tag.

<p>This <br> is a paragraph <br> with <br> line breaks</p>

Links

To make a link, you use the <a> tag. The href attribute inside the tag holds the URL (web address) of the link.

<a href="https://www.kiddle.co/">A link to Kiddle!</a>

User Inputs

You can add different ways for users to input information, like:

<input type="text"> 
<input type="file"> 
<input type="checkbox">

Comments

Comments are notes in the code that help people understand it. They do not show up on the webpage.

HTML Attributes: Adding Details to Elements

Most attributes are name–value pairs. They are written inside the start tag of an element. The value is usually put in single or double quotes. Attributes add extra information or change how an element behaves.

Here are some common attributes:

The id attribute gives an element a unique name. This name can be used by stylesheets to change its look or by JavaScript to change its content.
The class attribute groups similar elements together. This is useful for applying the same style to many elements. An element can have multiple class values.
The style attribute lets you add specific styles directly to an element. However, it's often better to use id or class with a separate stylesheet.
The title attribute adds a small explanation to an element. In most browsers, this text appears when you hover your mouse over the element.
The lang attribute tells the natural language of the element's content. This helps browsers and search engines. For example:

<p>Oh well, <span lang="fr">c'est la vie</span>, as they say in France.</p>

Here is an example using several attributes with the `abbr` (abbreviation) element:

<abbr id="anId" class="jargon" style="color:purple;" title="Hypertext Markup Language">HTML</abbr>

This example shows as HTML. If you point your mouse at it, you should see "Hypertext Markup Language."

The dir attribute is used for text direction, like "rtl" for right-to-left languages such as Arabic or Hebrew.

Common HTML Tags

Here is a list of some common HTML tags and what they do:

Tag name	What it does	How it works
	Creates a hidden comment
`<!DOCTYPE>`	Tells the type of document	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`
`<a>`	Creates active links to other web pages	`<a href="http://www.google.com/" title="title of page" class="CSS class" id="CSS identifier" style="CSS expression">text to display</a>`
`<abbr>`	Creates an abbreviation	`<abbr title="this is an example abbreviation">example of</abbr>`
`<b>`	Makes text bold	`<b>bold text</b>`
`<i>`	Makes text italic	`<i>italicized text</i>`
`text here<br />`	Breaks a line of text	`<br />wrapped text here.`
`<s>`	Creates ~~a line through text~~	`<s>line through text</s>`
`<u>`	Underlines words and sentences.	`<u>Underlined text</u>`
`<H1>`	Changes the font of a word to 24	`<H1> FONT 24</H1>`
`<H2>`	Changes the font of a word to 18	`<H2> FONT 18</H2>`
`<H3>`	Changes the font of a word to 14	`<H3> FONT 14</H3>`
`<H4>`	Changes the font of a word to 12	`<H4> FONT 12</H4>`
`<H5>`	Changes the font of a word to 10	`<H5> FONT 10</H5>`
`<H6>`	Changes the font of a word to 7	`<H6> FONT 7</H6>`
`<script>`	Creates a script in the webpage	`<script>document.write("Hello World!")</script>`
`<table>`	Creates a table	`<table><tr> <td>10</td> <td>20</td> </tr><tr> <td>30</td> <td>40</td> </tr></table>`
`<tr>`	Creates a table row	`<table><tr> <td>10</td> <td>20</td> </tr><tr> <td>30</td> <td>40</td> </tr></table>`
`<td>`	Creates a table cell	`<table><tr> <td>10</td> <td>20</td> </tr><tr> <td>30</td> <td>40</td> </tr></table>`
`<span>`	Used to add attributes to a part of text or to allow CSS and Javascript to specify that part of the document.	`<span>Lorem ipsum <span class='highlight'>dolor sit amet</span>, consectetur adipiscing elit.</span>`
<p>	Creates a paragraph	<p>This is a paragraph.</p>

Images for kids

Tim Berners-Lee in April 2009