Rather you want to begin your career in web development or just spice up your social media aesthetics, understanding the basic structure of HTML will be helpful. You will help you grasp how to design a website but understanding the foundation can help you learn other programming languages as well. HTML has an opening and a closing, just like in Ruby (with ‘end’.) HTML documents must start with a document type declaration:
Web developers add a HTML doctype declaration at the very top in order to tell the browser which rendering mode to use for that document. In other words, it informs the web browser about the type and version HTML was built. Without specifying the doctype, the browsers are forced to render in Quirks Mode. Which Quirks Mode layout are nonstandard and used in older browsers.
To officially start our HTML document, we must add the opening <html> this must have a closing with </html> between this, will be the body. The body is the visible part of the HTML document. This is where programmers can include the headings, paragraphs, hyperlinks, table, images, and many more. The body will also include an opening and a closing. To sum up what we have gone over so far, here is what it will look like:
Fairly simple, right!? Inside the heading has a number to indicate the different levels of the heading.
What if we wanted to include an image? Well, the HTML image syntax is pretty straightforward. Here is the image syntax:
You will need an image source, alternative text to describe the image, and optional but highly recommended a style that could change the width, height, and even add a border to the image. You can do so many things with HTML! To use the image as a link, simply put it inside of a <a href </a> this creates a hyperlink that makes the image clickable which will direct the user to the URL address.
Let’s add a table to our website!
We would first start off with <table style=”width:50%“> We should start by giving the rows a header. In this example, it is ‘City’ and ‘State.’ Filling in the rows we would create another opening and closing <tr></tr> this time instead of the header, we will be using <td></td> which is the table data.
Let’s include a list on our website!
Start off with a <ul> </ul> between this tag, depending if you want the list to be in order but in this case it will not be in order and will be marked with bullets by default use <li> whatever you want to list </li>
If you would like your list to be in order, start off with <ol> </ol>
Easy peasy!
Here are more HTML List Tags
Let’s get into HTML Form Attributes. There are many form attributes such as target attribute, action attribute, method attribute, autocomplete attribute, novalidate attribute, rel attribute, and some more. For time sake, let’s just only cover a few:
Target Attribute — specifies where to display the response that is received after it has been submitted.
Action Attribute — is the action to be performed when the form is submitted.
This is a simple way but you could easily add more to the action attribute and create a form action. This form could include numerous action with different types of data. Such as:
Here is a list of all the Form Attributes:
There are also many HTML APIs that will allow your website to have special features. Don’t feel embarrassed if you have to search the code on Google, many programmers will use Google, entry-level and even senior software engineers! It’s a matter of knowing what to Google. Know exactly what it is you’re looking for and indicate which program language. It is also common to search the error message you are receiving. More than likely, someone else had the same problem and it has already been answered.
Since you have the basics of HTML down, go out and build your website!
