A web page is made up of tags, which help tell the browser how to display a webpage. Within a tag, you may have attributes which provide some additional information to help display the webpage better.
Tags
Tags are used to define the elements within a web page. Tags are enclosed within angle brackets, < and >. Most tags come in pairs, so there is an open tag, and a closing tag. The name of the tag is usually found immediately following the opening angle bracket.
The closing tag is defined by having a forward slash after the open angle bracket. Thus it would follow the general form of:
<tag>Content goes here.</tag>Not all HTML tags require a closing tag. In some cases it is optional, however it is considered good form, and standard practice, to close tags if there is an optional closing tag. It is easier, and we are less likely to make mistakes if we close all of the standard tags, even if not strictly required, instead of forgetting to close a tag which does require it. Exceptions to this practice will be noted as we cover those tags.
A tag acts as a node in a data tree. In order to properly contain data – tags should be closed in reverse order of them opening. Basically that means if you have a tag within another tag, you have to close the inner tag before you close the outer tag. This would follow the general rule as shown below:
<outer tag>General <inner tag>information and</inner tag> content.</outer tag>Now, not all tags are the same. Some are for storing metadata, which is data about our website, while others contain information. Those that contain information, are generally broken down into two main categories, inline and block level tags.
Block Level Tags
A Block Level tag will, by default, create a block at 100% the width of the containing tag. Now the size and spacing can be modified by our style sheets, which we’ll get into later. In most cases, block tags can contain most other block level tags and can contain inline tags.
Now a block level tag can be further subdivided into two categories: content and organization. A content tag contains the data that we are displaying. An organizational type of tag will group related tags together, so they bring together a cohesive block of data.
Content tags are pretty self explanatory in that they hold the content that the end user will see. These types of tags would include things like a paragraph tag, heading tag, or even various types of listing tags.
One could think about organizational tags as a way to group related tags together, so that when moving through the DOM, it is easier to find tags holding the content you want to display. Some organization tags are generic, such as the <div> tag, while others like <article>, <header>, <nav> etc, provide some intrinsic information about the types of information they group together.
In previous versions of HTML, this would all be done through a <div> tag, and applying one or more classes to that tag. A study was done over a large number of websites, and found that there were similar CSS classes being used all over the Internet. Knowing this, the HTML 5 standards committee attempted to make the tag system more intelligent by providing information about the tags as part of the tag itself, so instead of using generic div tags, we could have meaningful tags.
An Inline Tag will only affect the data which is directly surrounded by the tag itself. For example, the <strong> tag generally makes the text within it bold. It does not modify the whole paragraph, or even line, only the word or words it surrounds.
Inline tags cannot contain block level tags inside of them, although they may contain other inline tags.
Attributes
Tags provide general information and organization about the document and data. However, they provide little to any information on how to present or describe the data in detail. Luckily most tags support one or more optional attributes. These help provide additional information about the data.
Attributes are found inside the opening tag, between the angle brackets. The tag name traditionally comes first, and then the attributes. Attributes are separated by whitespace, typically a space character.
Attributes are specified in name value pairs, such as src=”image.jpg”. Generally we put quotes around the value, but it isn’t required unless there is a space inside of the value. However, we often normally include the quotes so we don’t forget to include them when they are necessary. An example can be seen as:
<img src=”image.jpg”>Sometimes we have an attribute that it’s existence is what matters. It is a Boolean value, where if it exists, the value is true, and if it is missing, the value is false. We can put the name of the attribute and leave the rest blank. You can see the example below.
<option selected>....</option>Some tags have required attributes to allow them to work properly, however most attributes are optional.
Now if a tag doesn’t have a required attribute, it will not fail to render your web page. Instead, it will just not render your tag. Browsers tend to be fairly resilient and manage to handle failures of the HTML code and allow the page to continue to be viewed.
Generally, the most common errors for a web page, revolve around nested tags, or tags that were not closed that needed to be closed.
Hint: A common practice to reduce these closing and nesting tag errors is to indent your HTML code, similar to how you would indent a programming language. By indenting your HTML code, you can see how your webpage is nested and potentially find nesting errors a little easier.
Required and common attributes include things like defining the file source of an image to be displayed, or where a link should take a user. As you could imagine, without those attributes, the tags would have limited value. That doesn’t necessarily mean they are required, as often tags can serve multiple purposes, but for general cases, it is important to use things in a standard format so that it is easier to follow when working with others to build a website with multiple developers and designers.
Creating the Web Content was originally found on Access 2 Learn
