HTML - Basic HTML Elements [LESSON]

Basic HTML Elements

There are hundreds of HTML elements, and we won’t be able to learn all of them in this course. However, there are several that are basic and are used frequently on web pages. As you create pages, you will learn these, and they will come to you easily. All websites in the world use HTML as the structure of the site. HTML is the structure of the site; it places everything where it needs to be and has all the content for the site. However, a plain HTML site would be very boring, as it wouldn’t have any design or interactivity. We will be learning the HTML first and then we will learn how to make the site more interesting in future modules.

HTML was started by Tim Berners-Lee back in 1991. Tim Berners-Lee started an organization called the World Wide Web Consortium (W3C). This organization oversees the web and the standards for the web. In 2004 the Web Hypertext Application Technology Working Group (WHATWG) was founded by individuals from Apple, Mozilla, and Opera. They have been maintaining and creating HTML standards since that time. HTML5 is also called “HTML Living Standard” because it is always evolving. WHATWG and W3C work together to manage HTML and the web. To verify that your code is correct, you can use the W3C Markup Validation Service to check your site. It is important to validate your code to ensure the technical quality of your web pages. The validator will make sure your site complies with the current web standards.

An HTML element is everything from the opening tag to the closing tag. If you are writing a paragraph, you would write it with the <p> tag like this example: <p>This is a paragraph. All text content on a web page needs to be inside of an HTML element. If it is content that is just text, then it usually will go inside a paragraph element. </p>. The element is from the opening <p> tag through the closing </p> tag, it includes the content between the opening and closing tags. Remember, most elements have opening and closing tags, if they contain something they have an opening and closing tag. If they don’t contain something, then they only have one tag. If you use a tag that isn’t current, it is a deprecated tag. Deprecated tags will often work, but they aren’t acceptable HTML and will be flagged by a validator. HTML tags are not case sensitive, but it is best practice to write them in lowercase, except for the Doctype. Below is a list of common HTML tags.

**Common HTML Tags**
HTML Tag	Meaning of the Tag	Example of the Tag’s Use
<!DOCTYPE html>	The HTML Doctype for HTML5. This tag tells the browser what version of HTML this page is written in. It should be at the top of EVERY web page.	<!DOCTYPE html>
<html>	This is the 2^nd tag on every web page. It tells the browser this is a web page. The closing tag is at the bottom of every web page.	<html> </html>
<head>	This is usually the 3^rd tag on every web page. It contains metadata for the browser. Metadata gives information to the browser. Information in the head doesn’t show up on the web page.	<head> </head>
<meta>	The meta tag holds information about the HTML document for the browser. The meta tags always go inside the <head> element. They usually are used to specify the character set, page description, keywords, author of the document, and viewport settings.	<meta charset=”UTF-8”> <meta name=”viewport” content=”width=device-width, initial scale=1.0”>
<title>	This tag tells the browser what the name of the page is. This is a descriptive name and only shows up in the browser window tab. The title tag goes inside the head.	<title>Title of Page for Browser Tab </title>
<body>	The body element contains everything that is to be seen on the published web page. It is immediately after the closing head tag. The closing body tag is the second to last tag on every web page.	<body> All content </body>
<h1>	This is the largest heading tag. This tag is often used for the title of the page. There are 6 levels of heading tags. They go down in size with each level, <h1> is the largest, <h6> is the smallest. All heading tags are bold and there is an empty line space above and below the content in a heading tag.	<h1>Title of Page </h1>
<p>	This is the paragraph tag. This tag is used for content. The lines of text inside a paragraph tag are single spaced and they word wrap at the edge of the window. There is an empty line space above and below a paragraph to set it apart.	<p>This is a paragraph. It is single-spaced and word wraps. </p>
<ul>	This is an unordered list tag. An unordered list has bullets unless you remove them. Each item inside the list must have a list item tag.	<ul> <li>Item 1</li> <li>Item 2</li> </ul>
<ol>	This is an ordered list. Ordered lists are used for lists that need to be in a particular order. Ordered lists have numbers or letters identifying each item. Each item inside the list must have a list item tag.	<ol> <li>Item 1</li> <li>Item 2</li> </ol>
<li>	This is a list item tag. This is used whenever you use a list, it must be used with a list tag such as <ul> or <ol>.	<ul> <li>Item 1</li> <li>Item 2</li> </ul>
<img>	This is the tag for an image. Inside the tag, you must use a source attribute to identify the image you want. The image can be online, or you can use an image that is on your computer. If you use an image on your computer, you must have it inside the same folder as your website, it is a good idea to put it inside an images folder that holds all the images for your site, but that images folder must be inside the site folder that holds your html pages. All images must also include an alternative text attribute, this describes the image for screen readers that are used by people with visual impairments.	<img src=”images/picture.jpg” alt=”description of the picture”>
<a>	This is an anchor tag and is used for hypertext links. The <a> tag must include attributes that tell the browser where the site or document is located. It is also a good idea to include a target attribute to tell the browser where to open the page it is opening. The link attribute is href. There must be content between the opening and closing tag, so the user has something to click on to go to the page that is linked.	<a href="https://www.w3schools.com/html/default.asp" target="_blank"> Link to W3Schools</a>
<hr>	This is the horizontal rule tag. This tag places a line across the page. This is a non-container tag, so it doesn’t have a closing tag.	<hr>
<br>	This is a line break tag. This forces the next word or item to the next line. It can be used to move items down on your page. This is a non-container tag, so it doesn’t have a closing tag.	<p>This is a paragraph. It will word wrap until you close the paragraph tag. But if you want to move a line down to the next line you can enter a <br> tag and the information will move down.</p>
<table>	This creates a table on your page. It must be at the start of the table. There are several tags that go with the table tag, they must be between the opening and closing table tags.	<table> <tr><th>Column 1 Heading</th><th>Column 2 Heading</th></tr> </table>
<tr>	This defines a table row. At least one table row is necessary for a table.	<table> <tr><th>Column 1 Heading</th><th>Column 2 Heading</th></tr> </table>
<th>	This tag defines a table header cell. The table header will be bold and centered inside the cell.	<table> <tr><th>Column 1 Heading</th><th>Column 2 Heading</th></tr> </table>
<td>	This is the table data tag and defines the cells of the table. Each cell must have either a <th> or <td> tag and a closing tag after you put the content inside the cell. The number of <th> or <td> in the longest row will determine the number of columns in the table.	<table> <tr><th>Column 1 Heading</th><th>Column 2 Heading</th></tr> <tr><td>Cell 1</td><td>Cell 2</td></tr> </table>

Attributes

Many tags contain attributes. Attributes give additional information to the browser about that tag. Attributes are placed inside the opening tag and are written in the following format: name=”value”. For instance, the source attribute used for images has the name of the attribute, src, then an equal sign, and then the location of the image inside of quotation marks like this: <img src=”images/computer.jpg”>. Inside the head, you must put the <meta> tags with the UTF and the Viewport attributes. UTF is set by the Unicode Standard and stands for Unicode Transformation Format -8 bit. This must be in the top of the code; the browser looks to make sure the page is abiding by the UTF standard. For HTML the standard is UTF-8. The viewport sets the viewing region for digital devices. If you don’t set the viewport, it will make your page static and not responsive. Since people use all sorts of devices to view websites, you need a responsive viewport that will adjust based on the size of the device. This keeps the viewer from having to scroll to the side to see the content. <meta name=”viewport” content=”width=device-width, initial scale=1.0”> tells the browser to adjust the size of the page to fit the width of the device.

Below is the template you should use for your web pages. All web pages use this same format, with different content inside the <body> tag.

Template for web pages.

Click through the Basic HTML Tags learning object to learn more about the tags.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION