html Resources
Essential html Tags
This is a reference list for the most basic html tags that a beginner should be familiar with.
| <html> ... </html> | Place the opening version at the beginning of your html document and the closing version at the end of the document. It should encapsulate all of your html. |
| <head> ... </head> | Place this set of tags between the <html> and <body> tags. Information that you place here is not displayed in the browser window. It is instead used to give background information to the browser and other applications about your page. |
| <title> ... </title> | Text placed within this set of tags is displayed in the title bar of the browser window and will be used as the title for the file in bookmarks, search engines, and history files. It must be placed within the <head> and </head> tags. |
| <body> ... </body> | This set of tags specifies the main or body part of your html document. Information placed within this set of tags will be displayed in the browser. This is basically where all the content of your web site will live. |
| <hn> ... </hn> | The header tags increase the size of text and automatically add a paragraph space after the text. The value of n must be a number between 1 and 6. The lower the value, the larger the header. These tags are heavily relied upon by search engines to determine the topic of the page. It is crucial to use <h1> tags to identify the topic of each page, e.g. in most instances, the content of <title> and <h1> should be similar. |
| <a href="URL"> ... </a> | This set of tags creates a hyperlink, i.e. a user will be able to click on this link and will be sent to the page specified in the value of the href attribute. This is the tag that makes the "hyper" in hypertext markup language. |
| <a name="name""> ... </a> | This set of tags creates an anchor within a web page. This anchor can then be referred to using a hyperlink. The href attribute of a hyperlink can refer to the anchor by name preceded by a # sign, for example: <a href="#name"> and this will cause the browser to jump specifically to this section of the page. |
| <img src="URL" /> | Use this tag to insert an image into a web page. The image must be saved in the JPEG, PNG, or GIF format and end in an extension of .jpeg, .jpg, .png, or .gif. The URL must point to the image file relatively or absolutely. There is no closing version of this tag. By default, images are inserted as inline graphics, i.e. they appear on a line as would text. Text does not automatically flow around an image, you must use the align attribute to cause text to flow around an image. To make a graphic a hyperlink, place it within a set of hyperlink tags. Its essential, but optional, attributes are: align=left,right,center,top,bottom. This attribute is a bit misleading. It controls both the alignment and the flow of text around an image. To cause text to flow around an image, choose the left or right values. The image will then be placed on that part of the screen and text will flow on the opposite side. The center, top, and bottom values allow you to align the image with text on the same line. alt=a short phrase describing the graphic. This phrase will appear when a user is browsing your site with: a non-graphical web browser or the image load options turned off. A browser for the visually impaired will read this text aloud to the user. title=a short phrase describing the graphic. Often confused with alt, the title attribute acts more like a "tool tip" or advisory information. It is often displayed automatically in a pop-up box when a user hovers over an image. It is a cool effect especially for caption like information for an image and to aid in SEO. height=pixels. Use this attribute to specify the height of an image. This is recommended in combination with width because it saves the browser from having to recalculate this size after the page load, and thus have to readjust all of the page elements as a result which produces screen flicker. width=pixels. Use this attribute to specify the width an image. hspace=pixels. When you have chosen to flow text around an image, you can also use this attribute to create a border of white space on the horizontal sides of the image. vspace=pixels. When you have chosen to flow text around an image, you can also use this attribute to create a border of white space on the vertical sides of the image. |
| <em> ... </em> | Use this set of tags to place emphasis on text. Generally, web browsers will render this as italicized. |
| <i> ... </i> | Use this set of tags to italicize text. There is a lot of pressure to use <em> in place of both <i> and <b>in your web pages, but, unfortunately, sometimes you still want something to be italicized or bolded, and not leave that to the discretion of the browser, nor have to create a complicated style to achieve this effect. Feel free to still use this when applicable. |
| <b> ... </b> | Use this set of tags to bold text. See above note on the <i> tags. |
| <hr /> | Creates a Horizontal rule (line). There is no closing version of this tag. Additional, optional attributes are: color=color or hex value. Specifies the color of the line. The default is black. size=pixels. Specifies the thickness of the line. width=pixels or percentage. Specifies the horizontal length of the line. NOSHADE. Use this attribute to remove the 3D or shading effect, which appears by default. This attribute does not take a value. |
| <p> ... </p> | Ends the current line of text of graphics and begins a new "paragraph", i.e. inserts two vertical lines of white space -- one above and one below the enclosed text. |
| <br /> | Ends the current line of text or graphics and moves to the next line, i.e. inserts one vertical line of white space after the insertion point. There is no closing version of this tag. |
| <ol> ... </ol> | Identifies the start and end of an ordered, i.e. numbered, list of items. It is used in combination with the <li> tag to specify individual list items. List items contained within this set of tags will be automatically numbered by the web browser. |
| <ul> ... </ul> | Identifies the start and end of an unordered, i.e. un-numbered, list of items. It is used in combination with the <li> tag to specify individual list items. List items contained within this set of tags will have a bullet in front of them instead of a number. |
| <li> ... </li> | Identifies a list item, and must be contained within an ordered(<ol>) or unordered(<ul>) list container. For example:
<li>This is list item number 1.</li> <li>This is list item number 2.</li> <li>This is list item number 3.</li> </ol> Lists can also be nested to produce sub-lists. |
| <div> ... </div> | Identifies a section of code, and does not produce any visual result other than inserting vertical space above and below the section. It is used primarily to identify sections of code that will be styled with CSS using the class and id attributes. |
| <span> ... </span> | Identifies a section of code, and does not produce any visual result, not even spacing. Like <div>, it is used primarily to identify sections of code that will be styled with CSS using the class and id attributes, esp. when the side-effect of a "block" level tag, i.e. space above and below, is not wanted. |
| <!--insert comment here--> | Use this tag to insert a comment, i.e. a note or reminder to yourself or other developers who may read or edit the source code. Comments can span as many lines as you want. There is no closing version of this tag. |