What is HTML?

Short for HyperText Markup Language, HTML is the language used for document display in a web browser.

HTML is a “markup language”, as opposed to a “programming language.” It’s only used to display things on the screen. HTML by itself is not able to do much in terms of functionality and dynamics. Other languages such as “javascript” can be used to add functionality.

What you need to know

Tags
Tags wrap certain contents with angle brackets (<,> these are called “angle brackets”). A tag is started with an opening angle bracket “<tag info>” and closed with a closing angle bracket </tag info>.

Depending on the type of information that is to be wrapped by tags, different types of tags are selected.

Example)
<a href=“http://naver.com”>NAVER</a>

<a href=”http://naver.com” target=“_blank”> is the opening “anchor tag”. An anchor tag is an HTML element that links to a specific target URL (Uniform Resource Locator) or simply target web address.

Attributes
Attributes provide optional/additional functionality to tags. In the above example, the “href” attribute is used within the “anchor tag”. Information followed after the href attribute provides information about which URL to link to when clicking the HTML element.

target=“_blank” means that by clicking the above HTML element, linked document will be opened in a new window or tab.

Attributes are always provided as key/value pairs (attName=“attValue)

Inline vs Block Level Elements
Inline elements are used for specific purposes to manipulate elements within its surrounding block. For example, <a> tag does not start a new line or take extra space from its neighboring contents, but simply provides a link. Inline tags such as <em> and <strong> may be used to highlight important words or phrases within text information.

On the other hand, block elements start a new line and take up as much space (width) available in the document. For example, a <div> tag will create a whole new section separated from its previous element.

Frequently Used Tag Types You Need to Know
head, body, title, h1, h2, …h6, p, em, img, div, ul, ol, li, table, select, option, form, label, input, button, meta, br, hr

Frequently Used Attributes You Need to Know
style, id, class, name, href, value, src

Practice

1. Create an HTML file. Name it “someName.html”
2. Open the file with a text editor such as VS Code, Sublime Text, VIM, notepad.
3. Create HTML elements using various types of tags.

4. Save file.

5. Open html file on a web browser like chrome

6. Your first HTML file.

By reading this post, you will not master HTML skills but will provide you a starting point to exploring the world of front end software engineering.