HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, take the following line of content:
Your cat is very grumpy
<p>Your cat is very grumpy</p>
Markup
HTML markup consists of several key components, including those called tags (and their attributes), character-based data types, character references and entity references. HTML tags most commonly come in pairs like <h1> and </h1>, although some represent empty elements and so are unpaired, for example <img>.
A Markup Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses two things: tags and attributes.
Tags and Attributes
Tags and attributes are the basis of HTML. They work together but perform different functions – it is worth investing 2 minutes in differentiating the two. Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is: <h1>.Most tags must be opened <h1> and closed </h1> in order to function. Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside.
An example of an attribute is:
<img src="mydog.jpg" alt="A photo of my dog.">
In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.
Elements
HTML documents imply a structure of nested HTML elements. These are indicated in the document by HTML tags, the extent of an element is indicated by a pair of tags: a “start tag” <p> and “end tag” </p>. The text content of the element, if any, is placed between these tags. Tags may also enclose further tag markup between the start and end, including a mixture of tags and text. This indicates further (nested) elements, as children of the parent element.
The start tag may also include element’s attributes within the tag. These indicate other information, such as identifiers for sections within the document, identifiers used to bind style information to the presentation of the document, and for some tags such as the <img> used to embed images, the reference to the image resource in the format like this: <img src="yourdomain.com/example.jpg">
Some elements, such as the line break <br>, or <br /> do not permit any embedded content, either text or further tags. Many tags, particularly the closing end tag for the very commonly used paragraph element <p>, are optional. An HTML browser or other agent can infer the closure for the end of an element from the context and the structural rules defined by the HTML standard. These rules are complex and not widely understood by most HTML coders.
The general form of an HTML element is therefore:
<tag attribute1=”value1″ attribute2=”value2″>”content”</tag>
Some HTML elements are defined as empty elements and take the form
<tag attribute1=”value1″ attribute2=”value2″>
Empty elements may enclose no content, for instance, the <br> tag or the inline <img> tag. The name of an HTML element is the name used in the tags. Note that the end tag’s name is preceded by a slash character, /, and that in empty elements the end tag is neither required nor allowed. If attributes are not mentioned, default values are used in each case.