HTML is the standard markup language that forms the basic structure of websites and its content. Think of it like this – if a website is a house, then HTML is the foundation and the framework. Although this language might look scary at first, it’s actually pretty simple and easy to learn. In this article, you’ll learn all you need to know about the basics of HTML.
How Does HTML Work?
HTML (Hypertext Markup Language) is a language used to create websites. Most sites that you see on the internet are HTML documents. They are created by using any text editor applications — such as Word, Notepad, and TextEdit — or using HTML editors.
HTML documents consist of elements that dictate to web browsers, like Chrome and Firefox, on how to format websites. As you can’t build HTML pages without them, HTML elements are referred to as the building blocks of sites.
Generally, an HTML element is made up by an opening tag, content, and closing tag. Below is an italic element:
<i>Hello, I’m Italict</i>
In the example above, <i> is the opening tag and </i> is the closing tag. The text between the tag pair is the content. When opened with a web browser, the content will be displayed in Italics.
Besides formatting text like the mentioned example, HTML elements also have other functions. They are responsible for defining the structure of a page such as headings, paragraphs, sections, and many more. Here’s an example of how you can structure an HTML page:
<html> <head> <title>Your Page Title</title> </head> <body> <h1>This is your heading</h1> <p>Write your paragraph here!</p> <p>You can also include a <a href=”example.com”>hyperlink</a></p> </body> </html>
Save that code into a .html file and open it with a browser. Web browsers will render your document into formatted content.
Common HTML Tags
Tags indicate the beginning and the ending of elements. When just starting out with HTML, you don’t have to learn all kinds of tags immediately. A handful of the common tags is enough to build a basic web page.
On a side note, the terms tag and element are often used interchangeably. However, there’s a slight difference between them.
Use the term element when referring to all parts of an element (the tag pair and the content). If you only want to mention the tags without its content, refer to it as a tag or tags.
Document Structure Tags
These tags below determine the basic structure of an HTML document:
- <html></html> tags identify the document as HTML.
- <head></head> tags provide the information about the document. It usually contains the title, meta information, styles, and more.
- <body></body> tags hold all visible contents within a web page.
Here’s a simple example on how to use them:
<html> <head> <title>Your HTML Document</title> </head> <body> <--PAGE CONTENT--> </body> </html>
The following tags structure the content of a web page:
- <h1></h1> to <h6></h6> tags create headings. H1 defines the main heading and h6 is for the lowest subheading
- <p></p> tags are used to create new paragraphs.
- <div></div> tags create a division or a section.
- <br> tag forces a line break. This tag doesn’t require a closing tag or contents and hence, it’s called an empty tag.
- <ol> element makes an ordered list, while <ul> defines unordered list.
This is how it looks like when you use content tags in an HTML document:
<html> <head> <title>Your HTML Document</title> </head> <body> <h1>I am the main heading</h1> <h2>And I am the second heading</h2> <p>A catchy paragraph here.</p> <p>You can write whatever you like</p> <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol> </body> </html>
Text Formatting Tags
These tags below format the texts on a web page:
- <strong></strong> tags emphasize that the content between them is important. Browsers will render the content in bold.
- <em></em> mark the text that have emphasis. The content of these tags is displayed in italics.
- <u></u> will underline text
- <sub></sub> subscript text while <sup></sup> superscript them.
Try to use all mentioned tags above (document structure, content, and text formatting tags) and you’ll get something like this:
<html> <head> <title>Your HTML Document</title> </head> <body> <h1>I am the main heading</h1> <h2>And I am the second heading</h2> <p>A <strong>catchy</strong> paragraph here.</p> <p>You can write <em>whatever</em> you like</p> <ol> <li><u>This text is underlined</u></li> <li>An example of <sup>superscripted text</sup></li> <li>And this is an example of <sub>subscripted text</sub></li ></ol> </body> </html>
Tags with HTML Attributes
Some tags are not as straightforward as text formatting tags. They need additional information known as HTML attributes. Rather than explaining it with words, let’s jump right ahead into some examples:
<a href=”yourwebsite.com”>My Blog</a>
The <a></a> tags are used to create hyperlinks. They need a href attribute to specify the destination link. The anchor text or the clickable text is “My Blog.”
Let’s check out another example below:
<img src=”eiffel_tower.jpg” width=”400” height=”600”>
When inserting an image with <img> tag, you have to include three attributes: src, width, and height. Src specifies the image path, while width and height define image dimensions.
HTML elements are grouped into two types based on their behavior: block-level and inline elements. The difference between the two is pretty simple.
Block-level elements cause a line break and start on a new one. They are called block-level because they create a block of content by taking the full available space (stretch out as far as they can from left to the right).
Take a look at the picture below to make it clearer for you:
Notice that even though the content (text) doesn’t take up much space, it doesn’t allow other elements to use it.
- The heading, no matter how long or short it is, takes an entire line of a page. That line cannot contain other elements. Hence, a heading blocks a whole space from left to right.
- The same thing goes for paragraphs and the lists. Even if they only consist of a few words, the remaining space can’t be occupied by other elements.
Some examples of block level elements are <div>, <h1> – <h6>, <ol>, <ul>, and <p>. If you want to learn more examples of this element type, check out the list of block-level elements.
Unlike block-level elements, inline elements don’t cause a line break and only take space as needed. As they don’t take up the full available space, you can have multiple inline elements in the same line.
To illustrate, take a look at the picture below. We’ve modified the previous example by adding three inline elements:
The inline elements are the word “main”, “catchy”, and the hyperlink. The word “main” is enclosed by <i></i> tags and the word “catchy” by <b></b> tags. Hyperlink is created by using <a></a> tags.
You’ll clearly notice from the picture that the inline elements don’t break the flow of the content. They don’t require a new line and sit within block-level elements. The space used is also minimal, only taking up as much as their content needs.
Besides <i> and <b>, examples of inline elements are <strong>, <em>, <a>, <br> and <u>. To see other examples, you can check out the list of inline elements.
HTML – What’s Next?
CSS (Cascading Style Sheets) determines the appearance of a page. You can change the background color, fonts, and much more.
We recommend you to learn CSS after mastering HTML. After making the structure of the page, style it with CSS so your page is not merely black and white.
To Sum It Up
HTML is a markup language that creates the basis of a website. It consists of a series of elements, which you use to make the content within them to look or act in a certain way. Then, any web browsers will render them into a visible form.
Learning HTML is the foundation of becoming a website developer. With this HTML overview, we hope it can help you to start learning HTML and begin your web development journey!