Using a Code Editor
HTML, or Hyper Text Markup Language, has an easy-to-understand syntax and is the foundation for most of the web pages you view online. For this article, we are currently using Sublime Text, which has the ability of providing the HTML outlines. This makes building pages easier.
Writing HTML – The Beginning
When writing HTML, you will want to start out with a basic outline. Once Sublime text is downloaded and installed on your computer, look in the bottom right corner of the frame of the text editor, you should see HTML. (If not, please click there to change it to the proper language you are using). When writing in Sublime Text, you can begin to type the letters HTML and hit enter and it will place an HTML outline on the page for you. It will look like this:
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
...
</body>
</html>
In HTML, the creator of the page will often add comments. These comments are visible to anyone who view the pages source code, but these comments do not show up when the browser reads, or renders, the HTML code. Comments are added to the page by beginning with “<!–” and closing with “–>” . There should be no spaces in the comment tags.
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<!-- This is a comment that cannot be seen by the web browser -->
</body>
</html>
Comments allow you to leave reminders or simple explanations to yourself or other coders working on your page, allows the developer to comment out large sections of code for testing on new features that aren’t ready yet, or allow you to find where a particular element ends if you have a lot of nested code on your page.
The Declaration
<!DOCTYPE html> is a HTML declaration, placed at the top of your page (unseen by any user). This is placed at the top of the page because it gives instruction to the browser that reads, or renders, the HTML code. This instruction to the web browser will inform it of the version that the HTML is written in.
HTML tags
<html> is an HTML tag that tells the browser that this is an HTML document, representing the root of the document, and is the container for other HTML elements. This is always placed below the <!DOCTYPE html> declaration. This language is supported by Chrome, Internet Explorer, Firefox, Safari, and Opera. These are the major browsers in use today.
<head> is a container for all head elements, such as <title>, <style>, <base>, <link>, <meta>, <script>, and <noscript>.
<title> is a tag that is required in all HTML documents since it defines the HTML documents title. Not only does it define the title in the browser toolbar, but it also provides a title for the page when added to favorites and displays a title for the page in search engine results, as well.
<body> is a tag that holds the content of document. This element contains all the contents of the document, including text, hyperlinks, images, tables, lists, etc.
HTML Elements & Syntax
HTML Elements hold the opening and closing tags, with the respective content in between. Some elements are self-closing and do not require the end tag to be present. These elements can also contain the attributes that will define additional properties of an element. Below is an example of a paragraph element, placed in the <body> area of the HTML document:
<p class=”cities”>Phoenix, Arizona</p>
<p> is the start tag, or opening tag, of this element.
class is attribute that provides additional properties such as color, location, or appearance. They are always specified in the opening tag.
cities is the value for the class.
Phoenix, Arizona is the content that will be seen on the web page.
</p> is the end tag or closing tag.
HTML Elements are the collection of opening tags, its attributes, content, and the closing tag – and everything in between. Opening and closing tags mark the start and end of an element. Often, “tag” and “element” reference the same thing.
Closing Tags
As stated above, the tags and elements discussed in this article require a closing tag. Conventional HTML tags require opening and closing tags. However, void elements don’t require a closing tag due to their inherent structure.
Conclusion
A basic web page will form as you fill in the tags, elements and sections. As you work on more web pages, you will see that these are the bare bones of any website, and though it may seem pretty basic, these are necessary for the outline and formation of web pages.
