HTML Documentation
HTML File Skeleton
This is a simple html file skeleton that you can use to get you started on a project. To get info on specific tags see below.
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<!--Inside the body tag is where you put all the cool stuff
you want on your page!-->
</body>
</html>
The !DOCTYPE declaration must be the very first thing in your html document. It is not an html tag, it is an instruction to the web browser about what version of HTML the page is written in.
The html tag tells the browser that this is an html document.
The head element is a container for all the head elements, which can include a title for a document, scripts, styles, and more. The title tag defines the title of the page.
The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, and lists.
Tags
HTML tags are keywords that define how the browser must format and display content.
A basic HTML element starts like this:
<tag>
It starts with an opening tag and ends with a closing tag.
The closing tag has the same name as the opening tag, but with a /
Everything inside should be indented one level.
</tag>
Header Tags
The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading.
Example HTML:
<h1>Level 1 Header</h1>
<h2>Level 2 Header</h2>
<h3>Level 3 Header</h3>
Example Result:
Level 1 Header
Level 2 Header
Level 3 Header
Basic Tags
The <p> tag defines a paragraph.
The <i> tag displays text in italics.
The <b> tag displays text in bold.
Example HTML:
<p>
This is a paragraph where <i>this will display in italics</i>
and <b>this will display in bold</b>.
</p>
Example Result:
This is a paragraph where this will display in italics and this will display in bold.
Horizontal Lines
The <hr> tag defines a thematic break with a horizontal rule.
Example HTML:
<p>
This is a section about a certain theme.
</p>
<hr>
<p>
This is a section about another theme separated from the previous section
by a horizontal line that implies a thematic break in content.
</p>
Single Line Break
The <br> tag enters a single line break (without a horizontal line).
Example HTML:
<p>
This is a section about a certain theme.
</p>
<br>
<p>
This is another section that starts on a new line.
</p>
Example Result:
This is a section about a certain theme.
This is another section that starts on a new line.
Links
The <a> tag creates a hyperlink that is used to link from one page to another. The href attribute indicates the link's destination.
Example HTML:
<a href = "https://google.com">Google</a>
Example Result:
Google
Images
The <img> tag defines an image in an HTML page.
The src attribute indicates where the image is coming from and can be either a directory path to a photo saved on your computer or the url of an image on the internet like the example below. You can also upload your own photos to CodeHS to use in your program. See instructions for how to do that here!
The alt attribute specifies alternate text that will display if the image cannot be loaded.
The width and height attributes specify the width and height of the image.
Example HTML:
<img src = "https://codehs.com/static/img/logo.png" alt="Image not found" width="50px" height="50px">
Lists
The <ul> tag defines an unordered list (bullet points)
The <ol> tag defines an ordered list (numbered list)
The <li> tag defines a single list item inside of a list
Example HTML:
<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ol>
<ul>
<li>Item A</li>
<li>
Item B
<ol>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ol>
</li>
<li>Item C</li>
</ul>
Example Result:
HTML File Skeleton
This is a simple html file skeleton that you can use to get you started on a project. To get info on specific tags see below.
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<!--Inside the body tag is where you put all the cool stuff
you want on your page!-->
</body>
</html>
The !DOCTYPE declaration must be the very first thing in your html document. It is not an html tag, it is an instruction to the web browser about what version of HTML the page is written in.
The html tag tells the browser that this is an html document.
The head element is a container for all the head elements, which can include a title for a document, scripts, styles, and more. The title tag defines the title of the page.
The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, and lists.
Tags
HTML tags are keywords that define how the browser must format and display content.
A basic HTML element starts like this:
<tag>
It starts with an opening tag and ends with a closing tag.
The closing tag has the same name as the opening tag, but with a /
Everything inside should be indented one level.
</tag>
Header Tags
The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading.
Example HTML:
<h1>Level 1 Header</h1>
<h2>Level 2 Header</h2>
<h3>Level 3 Header</h3>
Example Result:
Level 1 Header
Level 2 Header
Level 3 Header
Basic Tags
The <p> tag defines a paragraph.
The <i> tag displays text in italics.
The <b> tag displays text in bold.
Example HTML:
<p>
This is a paragraph where <i>this will display in italics</i>
and <b>this will display in bold</b>.
</p>
Example Result:
This is a paragraph where this will display in italics and this will display in bold.
Horizontal Lines
The <hr> tag defines a thematic break with a horizontal rule.
Example HTML:
<p>
This is a section about a certain theme.
</p>
<hr>
<p>
This is a section about another theme separated from the previous section
by a horizontal line that implies a thematic break in content.
</p>
Single Line Break
The <br> tag enters a single line break (without a horizontal line).
Example HTML:
<p>
This is a section about a certain theme.
</p>
<br>
<p>
This is another section that starts on a new line.
</p>
Example Result:
This is a section about a certain theme.
This is another section that starts on a new line.
Links
The <a> tag creates a hyperlink that is used to link from one page to another. The href attribute indicates the link's destination.
Example HTML:
<a href = "https://google.com">Google</a>
Example Result:
Images
The <img> tag defines an image in an HTML page.
The src attribute indicates where the image is coming from and can be either a directory path to a photo saved on your computer or the url of an image on the internet like the example below. You can also upload your own photos to CodeHS to use in your program. See instructions for how to do that here!
The alt attribute specifies alternate text that will display if the image cannot be loaded.
The width and height attributes specify the width and height of the image.
Example HTML:
<img src = "https://codehs.com/static/img/logo.png" alt="Image not found" width="50px" height="50px">
Lists
The <ul> tag defines an unordered list (bullet points)
The <ol> tag defines an ordered list (numbered list)
The <li> tag defines a single list item inside of a list
Example HTML:
<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ol>
<ul>
<li>Item A</li>
<li>
Item B
<ol>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ol>
</li>
<li>Item C</li>
</ul>
Example Result:
- Item one
- Item two
- Item three
- Item A
- Item B
- Subitem 1
- Subitem 2
- Item C
Styling
Use the style attribute to add some color to your website. <tagname style="property:value;"> Examples <body style="background-color:red;"> This would add a red back ground to your webpage Here are 3 different properties you can use with the style attribute:
You can aslo combine properties see example below: |