HTML is the language for creating Web pages and the HTML elements are actually blocks that are used to build a page. Learn the basics to become a front-end professional.
(This article was initially posted on https://www.developermate.com)
HTML stands for HyperText Markup Language. The first web pages was released in 1990 and the pages were only used for presentation. Today the web is a very important piece in our daily lives. You may use many different web browsers to look at web-pages, like: Google Chrome, Opera, Internet Explorer and Firefox.
HTML Page Structure
It is important to understand the HTML page structure.
The [<head>](https://www.developermate.com/HTML/head) is used for the title and meta-tags. Only content inside the <body> section (the white area) is displayed by the web browser.
HTML Tags
HTML tags are element names surrounded by angle brackets.
HTML tags are usually in pairs like <table> and </table>.
Remember to use a a forward slash when you write the end tag.
HTML Attributes
HTML attributes are used to modify the value of the HTML element. Elements will often have multiple attributes.
<tagname attributename=”setting”>content for the html element…</tagname>
The HTML [<id>](https://www.developermate.com/HTML/id) attribute defines a unique id for an HTML element. The id must be unique within the HTML document.
You can use the <id> to select the HTML element, then you can read or manipulate the element with CSS and JavaScript.
HTML Building blocks
The HTML elements can also be called building blocks. These elements are used to build a HTML page. The elements consist of start and end tags and between those tags we put the text or graphic content.
The HTML Block-level Elements
A block level element always starts on a new line. This type of elements also always takes up the full width available on the page. This means that it extends as far as possible to the left and as far as possible to the right.
The HTML Inline Elements
Unlike a Block-level element, an Inline element does not start on a new line. In addition it does not take up the entire width, but just as much width as necessary.
The Empty HTML Elements
There are also HTML-elements that are has no content and these are called empty elements. An empty element that is used frequently is the element <br>. This is an empty item that has no content.
Lower- or Uppercase?
Although it is not wrong and actually completely valid to use uppercase letters for tags and attributes when writing HTML the convention is to always uses lowercase letters. This is for historical reasons and goes back to XHTML days where the conversation was completely strict and where uppercase letters were not valid.
HTML Headings
The HTML [<h1>](https://www.developermate.com/HTML/headings)–[<h6>](https://www.developermate.com/HTML/headings) elements are representing six separate levels of section headings. The highest section is level <h1> and the lowest section is <h6>. You could also say that <h1> has the highest importance and <h6> has the lowest importance.
Headings are not only important for changing the look of the page. Headings are also important when it comes to how search engines work. To index the structure and content of a web page the search engines are using headings.
Users often make a quick check of your page by just reading the headings. It is important to use headings to view the document structure.
HTML Paragraphs
The HTML <p> element defines a paragraph.
The paragraph tag places a blank line above and below the text.
HTML Links
HTML Links is used to link pages with each other. HTML Links are also called hyperlinks. A website consists of several pages and you should link the pages together. Links makes it easy for users to navigate between pages in your website and even to other websites.
HTML Tables
The element HTML [<table>](https://www.developermate.com/HTML/tables) is being used to represent table data. Table data is information that we can present in a two-dimensional table. Such a table consists of a number of rows and a number of columns of cells containing data.
In HTML there are three different ways to define lists of information. All existing lists must contain at least one list element, but it can also contain multiple list elements.
HTML Formatting Text
To be able to format text elements it’s good to be familiar with the options available for setting the textformat in HTML and XHTML.The formatting elements are designed and used to display various types of text.
Computer Phrase Elements are useful when it comes to documenting computer code development and user interactions. This is done by differentiating source code <code>, variables <var>, user input <kbd> and terminal or other similar output <samp>.
Reserved characters
A bit of text (a string) that begins with an ampersand (&) and ends with a semicolon (;) is called an HTML entity. These are mostly used to display reserved characters. These bits of text would otherwise be interpreted as HTML code and invisible characters. This is also useful if you wish to write characters that are difficult to type on a regular keyboard.
Some characters are special and reserved for use in HTML. That means that these characters will be parsed as HTML code by the browser. So when for example the less-than (<) sign is used in the code your browser will interpret the text that follows as a tag.
HTML Comments
Comments are parts of the code that are ignored by a browser. To explain and define section parts of a document to others who see the code, it’s a good practice to add comments to your HTML code. Especially in complex documents. To increase the readability of the code and help others understand the code, then comments are very useful.
Texts and content placed between these <! - ... -> tags are handled as a comment and will be completely ignored by the browser.
HTML Layout
When you develop a webpage, it is very important to think about the layout and what the page should look like. This is important for the entire user experience and for the user-friendliness of the page.
Nowadays, it’s common and highly recommended to use modern technologies such as CSS, JavaScript and Angular to build the pages. But it’s also possible to create pages just with HTML.
HTML Iframes
The HTML Inline Frame element, [<iframe>](https://www.developermate.com/HTML/iframes), embeds another HTML page into the current page. The <iframe> can appear anywhere in an HTML document. The <iframe> can have separate scrollbars and borders.
HTML Images
In the childhood of the web, there were only text and no pictures. Fortunately, it did not take long before we got the opportunity to embed pictures and other interesting types of content.Images are not only nice to look at but also important to use for describing complex concepts easily on your web page.
HTML Colors
For example the color green has the HEX color code #00FF00, that is also RGB(0,255,0), which is ‘0’ red, ‘255’ green, and ‘0’ blue. The color codes can be used to change the color for the text and the background on a web page.
HTML Color Names
HTML Classes
Use the HTML [class](https://www.developermate.com/HTML/classes) attribute to define the same style for one or many elements in your web page. All HTML elements with the same class name attribute will get the same style and format.
It is difficult and time-consuming to specify the same style to many elements using inline style for each element. HTML classes are frequently used attributes when building attractive websites. The classes will help you to spend less time writing and worrying about styles like fonts and colors.
HTML Styles
The HTML [<style>](https://www.developermate.com/HTML/styles)-element contains information about the style of the document or a part of the document. In the <style>-element, you find the CSS, which is applied to the content.The <Style>-element can be placed in the document's <head> or <body> but normally it is recommended that styles are placed in <head>. Even better is to place the styles in external stylesheets and referring to them with <link> elements.
When several <style>- and <link> elements are included in your document, they are applied to the DOM in the same order as they are included in the document.
HTML File Paths
A file path specify the location of a file. The filepath is like an address to the file and it helps the web browser to find the file. File paths are used to link external files such as images, videos, style sheets, JavaScript, displaying other web pages etc.
There are two types of filepaths: Absolute File Paths and Relative File Paths.
HTML Forms
The HTML [<form>](https://www.developermate.com/HTML/forms) element is used to collect user input and post it back to the server.
The <form> is a block-level element and it defines an interactive part of a webpage. All controls inside the <form> will be posted back to the server.
HTML Form Elements
HTML elements defines different parts of an HTML page. An HTML element is defined by a starting tag and usually it has an ending tag. Most HTML elements have content in between the starting tag and the ending tag.
**<tagname>Element content...</tagname>**
HTML Input Types
In HTML, one of the most powerful and complex elements is the [<Input>](https://www.developermate.com/HTML/input-attributes) element. The reason is the large number of combinations of input types and attributes. Regardless of the type, all <input>-elements are based on the HTMLInputElement interface and that means they all share the exact same set of attributes. But in spite of that, not all attibutes will work properly for all input types and some of the input types only support a few of these attributes.
The HTML [<input>](https://www.developermate.com/HTML/input-types) element is used to create controls that are interactive for web-based forms. These are used to accept data from the user. There are many different types of input data and control widgets for many different types of devices.
HTML URL Encode
[URL Encoding](https://www.developermate.com/HTML/url-encode) is the process of converting a string into a valid format that can be transmitted over the Internet. URLs must use the ASCII character-set. Characters outside the ASCII set must be converted to be able to be transmitted over the Internet.
URL encoding replaces non-ASCII characters with a "%" followed by hexadecimal digits, you can also use the term percent-encoding for this process.
HTML Methods for Rest Services
There are many available HTTP methods. Have you ever wondered what is the difference between the GET and the POST requests? When should you use PUT and DELETE?
Continue reading to get a basic understanding of RESTful services and the different HTTP methods, also called HTTP verbs. Understanding the HTTP methods is important when working with these APIs.
Most REST services is CRUD-based. The CRUD pattern is based on the HTTP protocol. A CRUD service supports the methods POST, GET, PUT and DELETE.
HTTP GET Method
GET requests are the most widely used of the HTTP methods. The GET method is used to retreive data from a server. For example, say you have an API with a /cars endpoint. Making a GET request to that endpoint should return a list of all available cars.
Since a GET request is only requesting data and not modifying any resources, it’s considered a safe method.
HTTP POST Method
POST requests are used to send data to the server to create a resource. The data that is sent is stored in the request body of the HTTP request.
The simplest example is a contact form on a website. When you fill out the inputs in a form and hit Send, that data is put in the response body of the request and sent to the server. This may be JSON, XML, or query parameters (there’s plenty of other formats, but these are the most common).
HTTP PUT Method
PUT requests are used to send data to the server, it is used to update a resource. Calling the same PUT request multiple times will always produce the same result. In contrast, calling a POST request repeatedly will have side effects of creating the same resource multiple times.
HTTP DELETE Method
The DELETE method will delete a resource. This method is one of the more common in RESTful APIs so it's good to know how it works.
If a new car is created with a POST request to /cars, and it can be retrieved with a GET request to /cars/{{id}}, then making a DELETE request to /cars/{{id}} will completely remove that car.
HTML HTTP Status Codes
The first digit of the status code specifies one of five standard classes of responses.
As you can see, there is many parts of the HTML page that you should master. Set your goals and use the tools that are available, as www.developermate.com with the great coderunner tool.
Happy coding.