Useful HTML Tags
Document Tags
These tags are the highest level tags. They set the general structure and information about your website
| Tag | Description |
|---|---|
| <!DOCTYPE html> | Should always be the first line in your file. Not technically an HTML tag at all. This is an XML Document Type Definition (DTD) that tells your browser what type of HTML you are using, so that it doesn't have to guess. When it guesses, it often does it wrong and introduces undesirable behaviour. DTDs are different for different versions of HTML. This one says we are using HTML5. |
| <html> . . . </html> | Indicates the start and end of the HTML Code. This will always be the first tag you open and the last tag you close. |
| <head> . . . </head> | Indicates the start and end of the file "head". If we think of HTML as a person, we have the head that contains the "thoughts" of the page,
known as the "metadata", and should go on top right after the html tag. The head contains information and tags that don't actually appear on the website, but influence it in some way. For example, the tag used to attach a stylesheet should go in the head tag. You do not see the actual stylesheet, but it changes all the style of the page |
| <body> . . . </body> | Indicates the beginning and end of the body. The body should appear after the head, and contains the actual
content of the page, such as the writing, links, and images.
Content that you expect to see in the main part of the browser window should all be between the body tags. |
| <!-- ... --> | Indicates a comment in the XHTML file. The browser ignores anything in between these characters. It is useful for leaving reminders for yourself later. |
Grouping Tags
| Tag | Description |
|---|---|
| <div> .... <div> | A general purpose container. This tag is often used to create boxes on a page with different positioning, borders, or styling through the use of CSS selectors. If you don't define any special styling for your div tags, they don't do anything. |
| HTML has brought in new names for div tags that fill specific roles to help screenreaders navigate the page. Remember that these tags still don't actually do anything unless you style them to. They include: | |
| <header> ... </header> | Used to indicate a top section that has header elements such as titles and navbars |
| <aside> ... </aside> | Used to place content beside the main page, such as the left side nav bar on our lab pages |
| <article> ... </article> | Used to define an independent section of a page, such as the main content box you see on our lab pages |
| <section> ... </section> | Used to define a section of a webpage. This tag is often used in the same way the article tag is used |
| <footer> .. </footer> | Used as container on the bottom of your page for items such as copyright information or author credit |
Head Tags
| Tag | Description |
|---|---|
| <title> . . . </title> | Displays a title line in the browser's title bar. The title is also suggested as the document's favorite or bookmark
name. The title is perhaps the most confusing tag, because you might expect it to place a title on the page itself. Remember that it changes the tab name, not the content. If you ever forget to close the title tag, your entire webpage will go blank because all of what you wrote will become part of the tab name. |
| <link rel="relationship" href="URL" /> | Links other resources to this document. You will use it to link to style sheets, but it can be used for other
purposes. The two attributes shown are:
|
| <meta charset="UTF-8"> | This tag defines the encoding scheme of your website. Be default, html pages struggle to deal with symbols such as quotation marks. By changing the charset to UTF-8 with this tag, you will be able to use them as normal |
Body Tags
These tags are used to create content on your webpage.
| Tag | Description |
|---|---|
| <h1> . . . </h1> | The largest heading. By default they add a bit of space above and below to separate the header from surrounding content. Headings also make the text bolder and larger. How large depends on the type of heading, which can be between 1 and 6 |
| <h6> . . . </h6> | The smallest heading. Remember that the number determines the size of the header, not the order the items appear on the screen |
| <p> . . . </p> | Marks the beginning and ending of a paragraph. By default it separates the paragraph from other content by adding a bit of space above and below. |
| <span> ... </span> | Used to make a small section of text, often within another element such as a paragraph tag, behave differently. For example, the warning highlights we use in our lab pages are done with a span tag. The span tag does not leave any spaces around it. |
| <pre> ... </pre> | These tags are used to define "pre-formatted" text. They will retain any indentation or spacing that is placed inside them without you needing to add code for tabbing. For example, the pre tags are used on our code block examples to maintain the desired spacing of tags |
| Text-level Flow Tags | |
| <strong> . . . </strong> | Encloses word(s) that should appear strong or stand out. By default it makes the text look bold. It supersedes the older <b> or bold tag. |
| <em> . . . </em> | Encloses word(s) to be emphasized. By default it makes the text look italic. It supersedes the older <i> or italic tag. |
| <u> . . . </u> | Encloses word(s) to be underlined. You should avoid it because it is easy to confuse with the default link style. |
| <sup>...</sup> | Makes part of the text into a superscript, which is often used for references |
| <sub>...</sub> | Makes part of the text into a subscript |
| <br> or <br /> | Indicates new line i.e. start the text at the beginning of the next line. Note that there is nothing inside this tag and it is the opening a closing tag all rolled into one. |
| <hr> | Creates a horizontal line, or "horizontal rule" across the page |