What Is HTML?
HTML stands for Hypertext Markup Language. Markup language determines the structure of your webpage's subject matter and is one of the ways that computers control how on-screen text is processed and presented to viewers. Hypertext means your page contains links that will allow readers to jump to different places on your page or to other pages entirely. The ability to jump from one place to another is what creates the Web.
HTML is Elementary
Pages constructed with HTML are comprised of individual "elements." These elements can allow you to enclose or wrap different parts of your page's subject matter to make it appear a certain way, or act in a certain way - italicizing words, making fonts bigger or smaller, creating hyperlinks, etc.
This is an example of an HTML element
My neighbor has a feline that is super fluffy. Wow!
Let's break down the individual components of this element to get an understanding of how HTML elements work:
The Opening Tag
Here, "p" is the name of the element "paragraph," we wrap it in opening and closing angle brackets. The opening tag tells your browser (the program you will ultimately use to display your webpage) where your element begins or starts.
Content is the information that will be modified by the tags that it is wrapped between. In this case, it's a line of text commenting on the aesthetic prowess of your neighbor's cat.
The Closing Tag
The closing tag lets your browser know that it can stop doing whatever the opening tag told it to do. It is written in the same manner as the opening tag, but it includes a forward slash before the element name (p). Forgetting to insert a closing tag is a common rookie coding error that will undoubtedly lead to undesirable results. Some HTML editors (the programs you use to write your code) use different colors of text to highlight the proper construction of your element. This will help, but if you get weird results when reviewing your page in a browser, check that all of your content elements have a closing tag.
The Empty Element vs. the Content Element
The element we described above is a content element. You had a line of text (content) that you wanted the browser to treat in a certain way (display it as a paragraph.) There are other elements that simply tell the browser that you want something inserted - a picture, a video, etc. These elements are called empty elements, and because they aren't wrapping content, they don't have to have a closing tag
Nesting HTML Elements To Build Your Webpage
Here, we have included the element we described above within other elements that are needed to create our sample webpage. The process of placing elements within other elements is called "nesting." The order of your opening tags and closing tags is important when nesting elements.
Let's take a quick look at the different elements we used above:
The "doctype" element is required. All you need to know about this is that it has to be at the top of your HTML page so your web page will behave correctly.
The "HTML" element wraps and contains all the content of your page and is also commonly referred to as a "root element."
The "head" element acts as a container for all the things you want to feature on your page that are not part of the content that's visible to the world. This includes keywords and page descriptions that need only appear in search results.
This element sets the character set to UTF-8, which includes most of the characters you will need for your page.
The "title" element houses the title of your page. This is the title that will appear in the web browser tab when your page goes live. It's also used to describe the page when it gets bookmarked or chosen as a favorite by viewers.
This contains all of the content you'll want to show viewers when they visit your page, whether that's text, images, videos, playable audio tracks - you decide! As you can see, the paragraph element (p) we discussed is nested within the "body" element. You can have several paragraphs if you want to give your readers more information about your neighbor's fluffy cat.
We've only scratched the surface on how you can use HTML to create custom web pages. If your interest is now piqued, there are many free online tutorials that will take you to the next level. So, if you have the itch to scratch out some code, we have the tech to make it happen. Stop into Experimax today. We look forward to talking tech!