This is a reference page, i.e., look at the contents and then come back to it when we need to.
An HTML element instructs the browser to do something with its content. Elements most often look like “<tag-name> element content </tag-name>”. Our template uses a few html elements:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="script.js"></script> <title>My first HTML page</title> </head> <body> <p>Hello World!</p> </body> </html> |
HTML has many other types of elements (full list). However, only a few elements are really needed to write most static web pages. These are the most common ones:
organization elements
|
1 |
divisions: <div> # creates the main content blocks |
We use this element to split our pages in nested blocks.
elements about text
|
1 2 3 4 5 6 |
title: <h1> to <h6> # titles. <h1> is the biggest, <h6> is the smallest paragraph: <p> bold: <b> italics: <i> span: <span> # creates 'blocks' within text |
The ‘bold’ and ‘italics’ elements affect don’t affect the content of the document, which is the function of HTML, but only its appearance, which is a function of CSS. Although these elements are still accepted, it would not be surprising if in the future they are removed from HTML.
Example code:
|
1 2 3 4 |
<p>This is <b>bold</b>, this is in <i>italics</i>, and this is <span style="color:red;">red</span>. </p> |
Result:
This is bold,
this is in italics,
and this is red.
elements about lists
|
1 2 3 4 5 |
ordered list: <ol> # make a list of items unordered list: <ul> # make a list of items with numbers in front list item: <li> # the items of the list anchor element: <a href="google.com">Google site</a> # link to a site |
Example code:
|
1 2 3 4 5 6 7 8 |
<p> Search engines: <ul> <li><a href="http://google.com">Google</a></li> <li><a href="http://bing.com">Bing</a></li> <li><a href="http://duckduckgo.com">DuckDuckGo</a></li> <ul> </p> |
elements for css or javascript
|
1 2 3 4 5 6 |
division: <div> # creates 'blocks' within the page script: <script> # reference to external scripts, e.g., javascript link: <link> # reference to external files, e.g., css style sheets canvas: <canvas> # we use this elements to write video games |
self-closing elements
These are elements that do not have content; they are also called empty elements.
|
1 2 3 |
image: <img src="image.jpg" alt="my image"/> line break: <br /> # leaves an empty line of text horizontal line: <hr /> # draws a horizontal line |
comment elements
|
1 |
comment: <!-- this is a comment --> |
If we are having troubles commenting out a section of html code, enclose it in a division:
instead of this…
|
1 2 3 |
<!-- script --> |
do this…
|
1 2 3 4 5 |
<!-- <div> script </div> --> |