# 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">
<meta charset="UTF-8" />
<script src="script.js"></script>
<title>My first HTML page</title>

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

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.

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



Example code:

<p>
Search engines:
<ul>
<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

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:

<!--
script
-->


do this…

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