The HTML elements

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:

organization elements

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.


Example code:

<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

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:

<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>


Result:

Search engines:


elements for css or javascript

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.

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

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
 -->


do this…

<!-- 
<div>
script
</div>
 -->