Michelle Johnson’s Big List of HTML Tags to Know HTML Tag Tells the browser: Hey!

This is a web page! <html> All kinds of coding goes in-between this opening and closing tag. Note the forward slash in the closing tag. </html> All web pages should start and end with these tags Title Tag <head> <title>Title goes here</title> </head> This adds a title that appears at the top of the web browser window. Important because this is the text that gets saved when the user bookmarks a page. Title carefully if you want someone to get back to your site! Example: The Daily News - Homepage Body Tag <body> All body text and visible content on the page goes between these tags. </body> Text Formatting <b>some text here.</b> Creates bold text. (Duh!) You may also come across this, which also creates bold text: <strong>some text here</strong> <i>text</i> Guess what this one does?

Style Need to specify a font, point size, color or alignment? You’ve got to do it with style. Examples <body style="background-color:yellow"> <body style="background-color:#ffff00"> Changes the background color of an entire page. For a list of colors names that are safe to use, do a search for the term or see: http://www.w3schools.com/html/html_colors.asp Example 2 uses a “hexadecimal number.” For a list of them do a search for the term. <body style="font-family:arial, helvetica,sans-serif”>Some text here.</body> Specifies a default font for the entire page. <h1 style="text-align:right">Some text here.</h1> <p style="font-family:arial, helvetica,sans-serif; color:red; fontsize:20px">Text goes here.</P> Specifies font, color, size Paragraph <p> ... </p> <p>Breaks text into paragraphs. Breaks text into paragraphs. Breaks text into paragraphs.</p> <p>Breaks text into paragraphs. Breaks text into paragraphs.</p> Line break: <br /> Hey, html, create a line break here.<br /> Note space before closing slash! The break tag is what’s called an “empty” tag. It has or needs no closing tag. Heds <h1>Largest</h1> (Equivalent to 24 pt) <h2> Next Largest </h2> (Equivalent to 18 pt) <h3> Medium </h3> (Equivalent to 14 pt) <h4> Smaller </h4> (Equivalent to 12 pt) <h5> Even smaller </h5> (Equivalent to 10 pt) <h6>Tiny</h6> (Equivalent to 8 pt) Headers can take additional attributes such as alignment.

Example: <h3 style="text-align:center">A hed goes here</h3> Links This is called an “anchor” tag or “href” for short. <a href="http://www.somesite.com">Click here!</a> Links to a page on another web site. <a href="aboutus.html”>Click here!</a> Links to a internal page on a site. Email link: <a href="mailto:someperson@somplace.com">Click to email me.</a> A “named anchor” allows the user to click an jump to a specific point on a page. Example: <a name="tips">Useful Tips Section</a> <a href="#tips">Jump to the Useful Tips Section</a> Don’t want your links underlined? Try this. <a href="somepage.html" style="text-decoration:none">Click this even though it’s not underlines</a> To make a link launch in a new window: <a href="http:www.somesite.com" target="_blank">Click here!</a> Images To add a photo or other art (jpg, gif) to a page use the “img” tag. Img is also a so-called “empty tag,” so you know what that means: add a space and forward slash to the end of the tag! <img src="photo.jpg" /> The img tag can take attributes that control the appearance or actions of an image. Examples: <img src="photo.jpg" width="200” height="300" /> (Note: measurements are in pixels)

<img src="photo.jpg" width="200” height="300" alt="I am a tool tip. " /> (Note: This displays pop-up text when a user mouses over a link.) <img src="photo.jpg" width="200” height="300" alt="I am a tool tip. " /> <a href="http://www.somesite.com><img src="photo.jpg" width="200” height="300" alt="I am a tool tip. " /></a> <a href="http://www.somesite.com><img src="photo.jpg" width="200” height="300" alt="I am a tool tip. " border="1" /></a> Lists Bulleted list: <ul> <li>First item </li> <li>Second item </li> <li>Third item </li> </ul> Creates something like this: • First item • Second item • Third item (UL stand for “unordered list”) Numbered list: <ol> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ol> Creates this: 1. Item 1 2. Item 2 3. Item 3 (OL stands for “ordered list.”) Horizontal Rule

<hr /> This is another empty tag. It can take additional attributes, such as a width or height. You can specify pixels or percentages. HR Examples: <hr width="100%" /> Rule stretches across entire page. <hr width="50%" size="2" /> Creates a 2-pt rule, half the width of the page. <hr width="150" size="1" /> Creates a 1-pt rule, 150 pixels wide <hr width="150" size="1" align="left" /> Blockquote Indents text or even a graphical element or photo. Here’s the entry from Wikipedia on block quotations. <blockquote> A block quotation, also known as a long quotation or extract, is a quotation in a written document, set off from the main text as a distinct paragraph or block. It is typically used for a longer passage than a run-in quotation, which is set off with quotation marks. A block quotation is often distinguished visually using indentation, setting in a different typeface, or in a smaller size. </blockquote> It’s quite wordy, however, it sums things up nicely. Produces this: Here’s the entry from Wikipedia on block quotations. “A block quotation, also known as a long quotation or extract, is a quotation in a written document, set off from the main text as a distinct paragraph or block. It is typically used for a longer passage than a run-in quotation, which is set off with quotation marks. A block quotation is often distinguished visually using

indentation, setting in a different typeface, or in a smaller size.” It’s quite wordy, however, it sums things up nicely. Comment This is used by programmers to write a note in code that won’t display on the page. Example: <!—The next line of code controls the color of the text --> Sample page code: <html> <head> <title>The Daily News: Welcome</title> </head> <body> <p>Here’s some body text. It’s great reading. Here’s some body text. It’s great reading. Here’s some body text. It’s great reading.</p> <p>Here’s some body text. It’s great reading. <a href="http://www.site.com">This is a text link.</a> It’s great reading.</p> <p><img src="photo.jpg" alt="This is a photo">Here’s some body text. It’s great reading. Here’s some body text. It’s great reading. Here’s some body text. It’s great reading.</p> </body> </html>

Sign up to vote on this title
UsefulNot useful