9.3: Basic Tags
- Page ID
- 51582
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
There are tons of tags, and it's almost impossible to memorize them all. Luckily, we have the Internet, which means we don't have to memorize them. In this section, you'll learn about some of the basic tags that are needed in almost every web page.
Beginning tags and the <head>
Every HTML web page starts with a <!doctype html> tag, with no closing tag. This is what tells the web browser what version of HTML the page is written in. The <!doctype> tag used to have several options in the old HTML, but in HTML5, there is only one: <!doctype html>.
After the <!doctype html> tag, there is an <html> tag, which is also required for every HTML document. Unlike the <!doctype html> tag, the <html> tag does require a closing tag of </html>. For nesting purposes, the closing </html> tag will always be the very last thing in your document.
Once the <html> tag has been opened, the page then has its head information in the <head> tag, which also has a closing tag of </head> The <head> tag includes information that does not show up on the page, but is vital to the look and feel of the page. There is always a <title> tag with a closing </title> tag that encloses the information on the tab of the web browser. Users who are including CSS information in their document might also include CSS coding in the <head> tag.
Figure \(\PageIndex{1}\)
The <body> tag and other common tags
After the <head> tag has been closed, the next tag to open is the <body> tag. This denotes the information that you actually see on the page when looking at a web browser. Everything you see within the browser window appears after <body> tag and before the closing </body> tag.
For common tags used within the <body> tag and their purpose, see Table 7.3.1. Unless otherwise noted, all tags in the table below require a closing tag.
| Tag | Function |
| <em> | Defines emphasized text. Text enclosed in an <em> tag will appear italicized. |
| <strong> | Defines important text. Text enclosed in a <strong> tag will appear boldface |
|
<img> |
Defines an image. This tag requires an attribute that defines what image it shows. This attribute is called src. The <img> tag does not require a closing tag, however it does end differently. Instead of the usual closing tag, an <img> tag is closed by ending the opening tag with a space and then />. For example: <img src="logo.jpg"/> |
| <a> | Defines a link. This tag requires an attribute that defines where the link goes to. This attribute is called href. |
| <u> | Defines an unordered list. This will start a bulleted list. |
| <ol> | Defines an ordered list. This will start a numbered list. |
| <li> | Defines a line in a list. This tag applies to both unordered and ordered lists. When you start a list, you must use <li> tags to open and close each line separately. See Figure 4 for an example of how a list looks in HTML. |
| Defines a table. This will start a table. | |
| <tr> | Defines a table row. This will start a row in a table. You must have a <tr> tag for each row of a table. |
| <td> | Defines a table column. This will start a column in a row of a table. You must have a new <td> tag for each column of each row of the table. See Figure 5 for an example of how a table looks in HTML. |
| <br> | Defines a line break. This tag does not require a closing tag. |
| <h1>-<h6> | Defines headings. There are six HTML heading levels: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. They each define headings of their specified order (<h1> being the first order heading and <h6> the sixth order). |
| Defines a paragraph. This is how most sections of text are tagged. |
Table \(\PageIndex{1}\): Common HTML tags
| HTML | Preview |
|
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> |
|
|
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> |
|
Figure \(\PageIndex{2}\): Ordered and Unordered Lists
| HTML | Preview | ||||||
|
<tr> <td>Box 1</td> <td>Box 2</td> <td>Box 3</td> </tr> <tr> <td>Box 4</td> <td>Box 5</td> <td>Box 6</td> </tr> </table> |
|
Figure \(\PageIndex{3}\): Tables