Arin Adamson
By Arin Adamson | Web Dev | July 23, 2015

Learning HTML Online

Do you have a website and want to take control of the content on your pages? Maybe you are just starting out and are an aspiring web developer? In either case, the first thing you’ll have to do is learn HTML. Every webpage on the internet is built in HTML. Learning how to write it is a critical skill for anyone looking to develop websites, and the best news of all is that HTML is relatively easy learn if you’re willing to give it a try.

HTML stands for HyperText Markup Language. So what’s a markup language? Essentially this means that it is not a programming language with logical abilities, but rather a predefined set of rules for compiling the mark-up and displaying the data in the defined manner. Each internet browser such as Chrome, Firefox, Internet Explorer and Safari, have a standard set of rules for HTML, which display elements in each browser.

When you landed on this page to read this article, your browser took the HTML for this webpage and compiled it to display the article with paragraphs, pictures and header elements. Everything on this page uses HTML to notify the browser what type of content it is so that it can be displayed appropriately. Of course, no web page is completely controlled by HTML. There other markup languages and codes such as CSS, PHP and JavaScript that all come together to make your website look and function the way it does, but HTML is the backbone if it all. CSS is used to style the elements on a web page, and it targets elements based on selectors defined by HTML. JavaScript and PHP are used to output and manipulate the HTML. In the end, every aspect of a website’s content revolves around HTML.

HTML Elements

HTML is written using HTML elements, which are tags enclosed in angle brackets, for example: <html>. The tags or elements can be written in an HTML document using any text editor such as notepad or notepad++. To create an HTML document you simply open up notepad, or whichever text editor you prefer, write your HTML, and then save it as an .html file. You can do this by appending .html to the file name or by changing the file type to an HTML document.

Copy and paste the following HTML into any text editor and save it as an HTML file. Once you have saved it, you can open the file up in any browser and the browser will output the content.

 <html>
<body>
<p>Hello World!</p>
</body>
</html>

The example above declares and describes it as an HTML document, the body or content area for the html document and then defines a paragraph by using <p> tags. This is a very basic example of a HTML document. A typical HTML document may contain anywhere between 100-1500 lines of HTML, depending on the content that you want to display on a web page.

You can see an example of any site’s HTML by going to any web page in your browser, right clicking on the page and then selecting view page source. If you are not familiar with HTML at all, viewing a website’s source code may make your head spin. Don’t let this overwhelm you though, because with time and experience it will become much less intimidating. There are quite a few tags that you have the option to utilize in your HTML documents, so it can take some time to memorize them all, but with enough practice using them becomes second nature.

View Page Source

Semantic HTML

HTML is a very easy language to learn, in that it’s a very logical language. The tags are pretty self explanatory for the most part, and laying out a web page is surprisingly similar to laying out an essay.

You start with a <header> tag, which hold your navigation (inside a <nav> tag) and header content, like logos, search bars, or sign in links.

Next up is the <body> tag, where all your content goes. Inside the body tag, you have headers, arranged in order of importance from <h1> to <h6>. You can think of an <h1> tag like the title of your paper, it is the most important header on your page, and the rest of the header tags follow in importance.

Inside of your <body> tag, content is arranged into sections and articles (<section> and <article> respectively). You also can put general content in paragraph tags (<p>), and images go in <img> tags.

Once you’ve ordered all your content in your body tag, you can close it and move onto the <footer>. This generally holds stuff like a secondary navigation list (<nav>), your copyright, and your logo.

There’s obviously more detail involved in making a complex html page, but a basic layout is really quite simple to achieve, even for a beginner.

Learn HTML Online

Once you have a grasp on the information in this article you’ll be ready to take your first steps toward writing your own HTML. Besides a taking courses in school, you can teach yourself HTML with the help of online resources. W3schools.com is a great place for anyone to start. Their tutorials includes formatting examples, detailed explanations on what each tag does, and in browser text editor that allows you to practice writing HTML. I personally started out at W3schools.com and taught myself everything I needed to know to create website’s using HTML.

There are around 118 HTML tags that are available to use, so it may take some time before you are proficient in HTML, but don’t give up. The internet is today’s best medium for marketing and it will only become more and more important to establish your foot print online. If you are able to dedicate the time and energy to writing and understanding HTML you will be getting your personal and professional goals ahead of the curve.

background dots

Related Topics

5 SEO & Paid Media Strategies To Learn From Your Competitors

by Keith Newsham

Additional Contributors for this piece: Kim Brown, DRA Paid Media Strategist Looking for new sources of organic traffic? Of course you are! How…

Brand Consistency: The Secret Ingredient to Successful Paid Search

by Natalie Hanes

Branding is one of those nebulous, mystical terms. With its unintuitive metrics and nontactical strategies, branding is an integral thing that often gets…

Building an Account Funnel for ABM

by Andrew Seidman

With any campaign, proving success with clear reports is a critical feature. This is especially true for account based marketing campaigns, but there’s…

In the time it takes to read this sentence, you could be on your way to a well-oiled demand generation machine. Ready for your blueprint?

yes, i want my Digital blueprint