HTML Tags

HTML tags represent all the information within an HTML document. HTML tags and elements are very similar and often get confused with one another. 

An HTML tag is defined as starting with < and ending with >, whereas an HTML element is the combination of the opening tag and its attributes, the content between the tags, and the closing tag. 

Div Tags: <div>¹some content…</div>²

1. Starting/Opening tag
2. Ending/Closing tag

Div Element: <div>some content…</div>

The HTML <p> tag is used to define a paragraph element. Anything included within the opening and closing tags is treated as a paragraph when our HTML is rendered in the browser. By default, a paragraph element has a display of block and takes up all the available space width-wise.

The HTML <a> tag is used to define an anchor element. An anchor element is used to link to either an internal or external resource, including web pages. An anchor element has a default display of inline, meaning it will respect the constraints of its content and will not respond to changes in width or height. 

We use something called “attributes” to provide information to the opening anchor tag that indicates where to find the resource we are linking to. The content within the opening and closing tags will be what is displayed on our web page.

Syntax: <a href=“url”>Text to Display</a> 

Example: <a href=“http://www.google.com”>Go To Google</a> 

This example would show the text “Go To Google” on our web page, and when clicked would show the website at the url “http://www.google.com”

An HTML heading element is used to define the titles or subtitles of a section of content. HTML has 6 different levels of heading. The heading tags we use are <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. <h1> is the highest importance level, and <h6> is the least importance level.

 Search engines use these headings to gain an understanding of the content within. We should always use HTML heading elements to communicate the structure and content of our web page, and not for the styling that they provide.

An HTML image tag is used to show an image on a web page. An image is an example of a self-closing tag since there is no need to nest content between opening and closing tags, the opening tag has all the information it needs to show the image! We use something called “attributes” to provide information to the image tag that indicates where to find the image to show. 

Syntax: <img src=“url” alt=“alternateText” />

Example: <img src=“” alt=“” />

We use a src attribute to provide a link to the image, and we use an alt attribute to  provide extra information or context about what can be seen in the image, in case a viewer needs an extra accessibility consideration.

The HTML title tag is used to define the title of our document. This is a required tag in our HTML and very important for search engines. The title element does a few different things for us:

• It defines the tab title in our browser
• It’s the suggested title for the web page when added as a bookmark
• It’s the displayed title for our web page in search engine results

An HTML style tag is used to define internal CSS styling for a document. The content included within the <style> tags must be valid CSS for the document. The <style> tag is generally included within the head of the HTML document. We can also use a <link> tag within the head of the document to link to an external stylesheet, which is generally the preferred method for including CSS styles within a web page.

An HTML List tag is used to represent content in a list format, the most popular being either a bulleted or numbered list. 

• A bulleted list is referred to as an “unordered list” and is represented by using the <ul> tag. 
• A numbered list is referred to as an “ordered list” and is represented by using the <ol> tag. 
• A less popular description list is represented by using the <dl> tag.

The <ul> and <ol> tags are used as container tags to represent the content within. In order to include items within the list, we use a “list item” tag (<li>). We can have as many list items as we need, but we should have at least one.

The <dl> tag has a slightly different structure than the former <ul> & <ol> tags. Rather than use <li> tags, we use groups of <dt> and <dd> tags. These represent a “description term” and “description definition”.