Basic HTML

As the Manager of Digital Media for AYSO, I work with HTML on a daily basis, so it comes very second nature to me. I know this is not the case with the majority of the world, which I often realize by the strange looks people give me when I start talking “code.” Therefore, I thought it would be beneficial to a lot of you if I did an entry on basic HTML.

Whether you know it or not, you probably come into contact with it at some point while editing/updating your Region’s website. It can sometimes look like a foreign language, so it’s important to know what’s what. Here are some common tags you might come across while editing your website.

A quick note before we start: Most tags have two parts: the opening part and the closing part. The opening part starts a certain element style. Everything that comes after the opening tag will contain that style. The closing part comes at the end of the element and stops that particular style from appearing. Note the paragraph example below and how the <p> opens the style and the </p> closes the style. A slash before the letter indicates a closing tag.

<p>My Text Here.</p>

This is a paragraph tag. It defines a textual paragraph and will put some spacing (margins) above and below the element, as you would if you were normally typing a paragraph (with a double enter). Note that text does not indent in a paragraph tag. Click to learn more about the paragraph tag.

<br />

This is a line break. It acts just like hitting enter one time on your keyboard. Click for more information about the line break tag.

<a href="http://www.blogger.com/mywebpage.html">Link Here</a>

This is a link tag. It’s used to create a link from one page to another. The destination webpage goes inside the quotes. The text you want to link goes where the “Link Here” text is. In terms of search engine optimization, it’s important to use descriptive words when creating links. Avoid using words like “click here” or “this website”. Click to learn more about the link tag.

<img alt="This is my picture." src="myimage.jpg" />

This is an image tag. It allows images to be displayed on a webpage. There are two attributes to this tag. The SRC tells the tag where the image is located. This is where you would put the complete URL for the image. The ALT tells the search engines and the user what the image is about. It’s a good idea to add a description to your image so that if the image is broken for some reason, the user can still know what it is. Click to learn more about the image tag.

<strong>BOLD TEXT</strong>

The strong tag makes your text bold.

<em>Italicized Text</em>

This tag is for emphasizing your text. It will put your text into italics. Click here to learn more about formatting tags such as <strong> and <em>.
If you have any more questions on basic tags and how they work, please feel free to comment below!