This is a reference page, i.e., we can look at the contents and then come back to it when we need to.
We use HTML elements and their content to instruct our browser to do something. 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 |
For historical reasons, the ‘bold’ and ‘italics’ elements don’t affect the content of the document, which is the function of HTML, but only its appearance, which is a function of CSS. Therefore, 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 element to draw the graphics of 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> --> |