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:
<!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:
divisions: <div> # creates the main content blocks
We use this element to split our pages in nested blocks.
elements about text
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.
<p>This is <b>bold</b>, this is in <i>italics</i>, and this is <span style="color:red;">red</span>. </p>
This is bold,
this is in italics,
and this is red.
elements about lists
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
<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>
These are elements that do not have content; they are also called empty elements.
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: <!-- this is a comment -->
If we are having troubles commenting out a section of html code, enclose it in a division:
instead of this…
<!-- script -->
<!-- <div> script </div> -->