articles:~ What is HTML?

What is HTML?

HTML is a set of markup symbols or codes placed in a file intended for display on a Web browser page. The World Wide Web Consortium sets the standards for HTML and its related languages. Each markup code represents an HTML element, and every element has a purpose.

The newest draft version of HTML/XHTML is supported by modern browsers such as Safari, Google Chrome, Firefox, Internet Explorer 9 which are intended to be backward compatible.

A Document Type Definition (DTD) is a doctype statement which identifies the version of HTML contained in your document. Place it at the top of a web page document.

<!DOCTYPE html>

Sample HTML document structure looks like this:

What are HTML tags?

HTML tags are keywords in a specific format that tell the browser how to format the web page and organize its content. Tags are enclosed in angle brackets, "<" and ">" symbols. They label pieces of content such as “heading”, “paragraph”, “table”, etc. and are now shown by the browser but only used to render the content of the page.

HTML elements can be:

Paired, having an opening and a closing tag, like division element <div></div> or paragraph element <p></p>. These elements are able to contain some content inside;

and Single, empty or self-closing, like image tag <img/> or line break tag <br/>

They also differ in default width on the page. Block-level elements take whole page width by default, while inline elements take only as much width as their content requires.

Common block level elements would be

Division element (div tag)
Headings (h1 through h6 tags)
Paragraph (ptag)
Form (form)

Common inline elements are

Span element Link, anchor element (a tag) Button Image (img tag)

What are attributes of HTML elements?

HTML elements also have attributes. They allow to add new information or controll the behavior of the element. The most common attributes are:

Identification attributes, such as id, class or custom attributes like data-* where you can specify the name of the attribute. These are useful for finding elements to add styles or interactivity;

Other global attributes, applicable to all of the elements, like style or hidden, also event handler attributes, such as onclick, onmouseenter, onfocus;

Attributes, specific to certain HTML elements. For example, image element has src attribute for its source link and alt for its alternative description when image cannot be shown or seen.

What is new with HTML5?

HTML5 is the new standard of HTML and it introduces some exciting functionalities:

New input types and custom ui elements for them, such as type="date" or type="range". You don't have to build those yourselves with JavaScript.

Multimedia support with <video> and <audio> tags

Editable content with contenteditable="true" attribute. Try to edit this line of text

2D graphics with canvas and 3D graphics with WebGL

Canvas example from MDN docs

WebGL example from MDN docs

... and many more exciting and useful features which we'll introduce in next articles! Stay tuned 😎

Annie Phan

Annie Phan is a computer science graduate from Kwantlen Polytechnic University where she has studied setting networks in businesses; computer hardware and architecture; web servers and code. Presently... more about Annie Phan