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>