24. Summary of HTML tags

Basic tags

<!doctype html>
Initial tag that informs the browser that an HTML document is coming next.
<html> </html>
Start and end tag of all HTML type documents.
<head> </head>
Document header section. This section defines the page title, styles, etc.
<title> </title>
Title of the HTML page. It should appear in the <head> section.
<body> </body>
Document body. In this section will be all the contents that appear on the website. Texts, images, lists, tables, etc.
<!-- Comment -->
This tag is a comment that will not be seen in the browser. It is used to comment, clarify the HTML content and make it easier to understand.

HTML document template.

<!doctype html>
<html>

<!-- Cabecera -->
<head>
   <title> </title>
</head>

<!-- Cuerpo -->
<body>

</body>

</html>

Content tags

<p> </p>
Paragraph tag. Encloses a paragraph of text with several consecutive sentences. They end at a full stop.
<h1> </h1>
Top level header. Equivalent to a chapter title.
<h2> </h2>
Second level header. Equivalent to a section title.
<h3> </h3>
Third level header. Equivalent to a subsection title.
<h4> </h4>
Fourth level header.

Line break

<br>
Line break. Whatever is written below will appear on the next line in the browser.
<hr>
Horizontal separation line.

Text types

<em> </em>
Highlighted text with emphasis. The font will be italic.
<strong> </strong>
Important text with strong emphasis. The font will be bold.
<cite> </cite>
The inner text is a quote from another source or from another author.
<blockquote cite="http://"> </blockquote>
Label that includes a section of text that has been copied from another page. The blockquote tag contains a cite attribute that describes the address from which the text was taken. Normally this section appears displaced to the right.
<pre> </pre>
Preformatted text label. All spaces and line breaks are preserved. The font used is fixed width (monospaced).
<code> </code>
Label to include computer code. The font will be fixed width.

Hyperlinks, images and objects

<a href="hop"> Text </a>
hyperlink. The text between the tags will appear in the browser. By clicking on the text, you will jump to the reference that contains href.
<img src="image">
Link to an image to be inserted into the document.
<object data=""> </object>
This tag inserts an external element into the HTML page that can be a text file, a video, sounds, a web page, etc. The name and path of the object is written inside the data attribute.
id="name"
This attribute appears inside a tag to give it a name. the name has to be unique and not repeat itself, in order to distinguish the labels from each other.

Lists and definitions

<ol> </ol>
Numbered list label.
<ul> </ul>
Unnumbered list tag.
<li> </li>
Label containing a list item.
<dl> </dl>
Word definition label.
<dt> </dt>
Word to define.
<dd> </dd>
Definition of a word.

Data tables

<table> </table>
Table label.
<tr> </tr>
Label a row within a table.
<thead> </thead>
Label the head of a table. It is in the first row of a table.
<th> </th>
Label each of the elements of a table header.
<tbody> </tbody>
Body of a table, where the contents of the table are located. Allows you to separate the header from the contents.
<td> </td>
Label an element of a table. It must be within a row.
<td rowspan=2>
This attribute appears inside a <td> table element. Allows you to join the current cell with the cells to the right of the same row, to make a single cell larger.
<td colspan=2>
This attribute appears inside a <td> table element. Allows you to join the current cell with the cells below it in the same column, to make a single cell larger.

Data table template without header.

<table border="1">
   <tbody>
      <tr>
         <td>Uno</td>  <td> 1 </td>
      </tr>
      <tr>
         <td>Dos</td>  <td> 2 </td>
      </tr>
   </tbody>
</table>