Ah, good old HTML. It’s been a cornerstone for development at our facility for the past 25 years.
Here is a comprehensive guide that will help you to understand the basics of HTML.
We will do out best to cut learning fluff, and update the guide based on your input.
Etymology
HTML stands for Hyper Text Markup Language. HTML has been a standard in web development since the infancy of the web. Hyper Text is text on a webpage that links to other text on another webpage. Markup is a way of presenting information on the webpage through the use of tags. Hence, HTML is a Markup language that allows you get creative with hypertext.
Techy Note: A markup language is NOT a computer language. It helps to render information on your computer screen. HTML is not an object oriented computer language because it is a markup language.
Usage
HTML is ubiquitous in web development. It provides the structure of a webpage is the main way that content displays in modern browsers. HTML is a fundamental language that web developers should know, as it is what they see on their screens.
The HTML DOM
HTML renders web components on the screen through its Document Object Model (DOM). HTML calls different parts in its DOM to render visual information on a computer screen. Below is an picture that shows the basic structure of the HTML DOM:
Photo Credit: W3Schools
Tags and Elements
Tags tell HTML how to process and render information on your web screen. Tags function like Russian dolls in HTML. Information from the top-most layer can translate into nested layers:
Most tags need pair with a closing tag to tell HTML when to stop rendering content in the way the tag wants it to. Closing usually tags pair with a backlash */* symbol. For example:
<h1> = opening tag
</h1> = closing tag
When the opening and closing tags pair with one another they become HTML Elements.
There are a lot of tags, but you will be fine if you know the following:
<!DOCTYPE> = Indicates the DOM model that renders on the screen. This is not a tag. Use it before any tag in your document as it will dictate how your webpage renders in your browser. Note that it does not have a closing tag.
<html></html> = The HTML of your webpage. Everything that you want to render on your webpage is within this tag.
<h1> through <h5> = Header font sizes. H1 though H5 change font size in decreasing order (h1 = largest, h5 = smallest).
<body></body> = Body text. This is simple text on your webpage. You can bold, italicize, and use different font types in conjunction with this tag.
<br><br /> = Break. This marks where there should be a space between lines of text. Use this when you want to separate different parts of your webpage with a vertical space.
<div></div> = A div, which is a very customizable section on your webpage document. Unlike a <span> tag, divs render on separate lines. Use this for theming purposes for most of your webpage.
<script></script> = A client-side script. In practical use it means you will be calling some Javascript code to do fun stuff on the webpage.
<span></span> = A span, which is a section of your document that renders on a single line. Use the when you want to render images next to one another in a horizontal fashion.
<table></table> = Start a table.
<thead></thead> = Indicates the headers of a table. Use this if you want to create sortable tables. For example, you must have to separate <thead> from <tbody> when creating a sortable table.
<tbody></tbody> = Indicates the body of a table. Use this to apply CSS to the contents of a table. Also use it if you want to make the table scrollable.
<tr></tr> = A table row. You can have many <tr> tags in your table to create separate rows.
<td></td> = A cell in a table. This is where the data in a table displays.
More Advanced Tags
<a> = Indicates a hyperlink
<b></b> = Bold text.
<em></em> = Emphasized or italic text.
<iframe> = A frame within your document. It contains information that links to a third party or links outside of your document. It is not recommended for use within web applications due to security issues.
<img> = An image. Use this to link images to your webpage.
<noscript></noscript> = HTML/CSS that will run if a user disables Javascript in their web browser.
Using HTML with CSS and Javascript
HTML, CSS, and Javascript work well with one another.
HTML provides you with the structure of your webpage.
CSS provides you with the style of your webpage.
Javascript provides you with the functionality of your webpage.
All three work together to produce a webpage.
What is XHTML?
XTHML stands for Extensible Hypertext Markup Language. It is a standard for producing HTML webpages. We recommend following XHTML guidelines in general when coding in HTML.
How to View HTML on any Webpage
To view HTML on any webpage you can access your browser’s developer console. Most modern browsers enable you to do this. First, right click on any webpage. Then, select the ‘Inspect’ or ‘View Source’ options from the drop down list.
Tip: We recommend you become familiar with your browser’s developer console. It will show what live HTML looks like and help you to better understand how to structure your webpages.
Avanka IT Tips on HTML
- Think about Russian dolls when thinking about the structure of HTML.
- Ensure that your HTML tags nest in the correct sequence.
- ALWAYS pair every opening tag with a closing tag.
Conclusion
HTML is a cornerstone of the web and web development. Avanka IT highly recommends learning HTML for both professional and recreational purposes. It is a fun language to learn and helps to demystify the web.
A Quick Request
Please share this article on your social media feeds if you found it useful.
Contact us anytime if you would like us to write about a particular topic or want to improve your coding skills.
References
- HTML Basic Examples. (2018). Retrieved September 20, 2018, from https://www.w3schools.com/html/html_basic.asp
- HTML basics. (2018). Retrieved September 20, 2018, from https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
- Rohde, M. (2018). Basic HTML That Everyone Should Know. Retrieved September 20, 2018, from https://www.htmlgoodies.com/primers/html/basic-html-that-everyone-should-know.html
- HTML Basic Tags. (2018). Retrieved September 20, 2018, from https://www.tutorialspoint.com/html/html_basic_tags.htm
- P. (2018). HTML basics | Intro to HTML. Retrieved September 20, 2018, from https://www.khanacademy.org/computing/computer-programming/html-css/intro-to-html/pt/html-basics
