Monday, June 8, 2020

HTML Basics

While getting started with HTML, you will likely encounter new and often strange terms. Over time you will become more and more familiar with all of them, but the three common HTML terms you should begin with are elements, tags, and attributes.

Elements: Elements are designators that define the structure and content of objects within a page. Some of the more frequently used elements include multiple levels of headings (identified as <h1> through <h6> elements) and paragraphs (identified as the <p> element); the list goes on to include the <a>, <div>, <span>, <strong>, and <em> elements, and many more.

Elements are identified by the use of less-than and greater-than angle brackets, < >, surrounding the element name.

Thus, an element will look like the following:


Tags: The use of less-than and greater-than angle brackets surrounding an element creates what is known as a tag. Tags most commonly occur in pairs of opening and closing tags.

An opening tag marks the beginning of an element. It consists of a less-than sign followed by an element’s name, and then ends with a greater-than sign; for example, <div>.

A closing tag marks the end of an element. It consists of a less-than sign followed by a forward slash and the element’s name, and then ends with a greater-than sign; for example, </div>.

The content that falls between the opening and closing tags is the content of that element. An anchor link, for example, will have an opening tag of <a> and a closing tag of </a>. What falls between these two tags will be the content of the anchor link.

So, anchor tags will look a bit like this:


Attributes: Attributes are properties used to provide additional information about an element. The most common attributes include the id attribute, which identifies an element; the class attribute, which classifies an element; the src attribute, which specifies a source for embeddable content; and the href attribute, which provides a hyperlink reference to a linked resource.

Attributes are defined within the opening tag, after an element’s name. Generally, attributes include a name and a value. The format for these attributes consist of the attribute name followed by an equals sign and then a quoted attribute value. For example, an <img> element including an src and alt attributes would look like the following:

Now that you know what HTML elements, tags, and attributes are, let’s take a look at putting together our first web page.

The Basic Structure

A basic HTML page is a document that typically has the file extension .html, though HTML frequently appears in the content of other file types as well. All HTML documents follow the same basic structure so that the browser that renders the file knows what to do. Before you can start adding content to your document, there's a basic structure you need to set up in your file. This structure isn't only required for your document to be compliant but will also allow you to provide useful information about your document. The basic structure of any HTML document consists of the following sections or elements:

  • The DTD (!DOCTYPE declaration).
  • The main container (html element).
  • The head section (head element).
  • The body section (body element).

Doctype: The first line of code, <!DOCTYPE html>, is called a doctype declaration and tells the browser which version of HTML the page is written in. In this case, we’re using the doctype that corresponds to HTML5, the most up-to-date version of the HTML language. There are a number of different doctype declarations that correspond to various versions of HTML.

HTML Root Element: Next, the <html> element wraps around all of the other code and content in our document. This element, known as the HTML root element, always contains one <head> element and one <body> element.

Head Element: The HTML head element is a container that can include a number of HTML elements that are not visible parts of the page rendered by the browser. These elements are either metadata that describe information about the page or are helping pull in external resources like CSS stylesheets or JavaScript files.

The <title> element is the only element that is required to be contained within the <head> tags. The content within this element is displayed as the page title in the tab of the browser and is also what search engines use to identify the title of a page.

All of the HTML elements that can be used inside the <head> element are:

  • <base>
  • <link>
  • <meta>
  • <noscript>
  • <script>
  • <style>
  • <title> (required)

Body Element: There can only be one <body> element in an HTML document because this element is the container that holds the content of the document. All of the content that you see rendered in the browser is contained within this element. In the example above, the content of the page is a headline and simple paragraph.

Self-Closing Elements

In the previous example, the <meta> element had only one tag and didn’t include a closing tag. Fear not, this was intentional. Not all elements consist of opening and closing tags. Some elements simply receive their content or behavior from attributes within a single tag. The <meta> element is one of these elements. The content of the previous <meta> element is assigned with the use of the charset attribute and value. Other common selfclosing elements include

<br>     <embed>     <hr>        <img>       <input>  

<link>   <meta>      <param>     <source>    <wbr>

HTML Comment <!-- ... -->

HTML comments are enclosed between <!-- and -->. Comments are ignored by the browser. You need to look into the HTML codes (via "View Source") to read them. Comments are extremely important in programming to explain and document a section of programming codes and logic. HTML documents are textual and self-explanatory, comments are less important (but still nice to have) to describe the various part of the documents.

Comments are also useful in temporarily disable a certain part of the HTML codes during development.

Block Elements vs. Inline Elements

HTML Elements can be classified as:

  • Block Elements: A block element (such as <p><h1> to <h6> and <div>) starts on a new line, takes the full width, and ends with a new line. It is rectangular in shape with a line-break before and after the element.
  • Inline Elements (or Character Elements): An inline element (such as <em><strong><code> and <span>) takes up as much space as it needs. It does not force a line-break before and after the element, although it can span a few lines.

In brief, a block element is always rectangular in shape, while an inline element spans a continuous run of characters. Will go deep-in in the next topic.