Skip to main content

HTML

What is HTML?​

HTML stands for Hyper Text Markup Language. HTML is used to create and structure elements in a website or application.

HTML is not considered a programming language as it can’t create "dynamic" functionality, although it is now considered an official web standard.

How does HTML work?​

HTML documents have the file extension .html or .htm. You can view them using any web browser (Google Chrome, Safari, Mozilla Firefox, Microsoft Edge...). The browser will read the content of this HTML file from the tags inside and publish it into formatted content so that users can see and understand them.

Normally, a website can have multiple pages (For example: Home page, About page, Contact page...), all pages need to have corresponding HTML files.

HTML Structure​

Each HTML file is made up of HTML elements specified by pairs of tags.

  • Tags: surrounded by angle brackets <>.
    • There are 2 types of tags: start tag and end tag, for example: <div> and </div>
    • In between the start tag and the end tag is the content of the element.
  • Elements: HTML elements include all of the start tags, some content and the end tags.
    • <tagname>Content goes here...</tagname>
  • Attributes: provides additional information for an element
    • Attributes have the format attribute="value"
    • Some commonly used attributes are class, id, src, href…

Below is the structure of a simple HTML file:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is the first paragraph</p>
    <img src="abc.jpg" alt="" />
  </body>
</html>
  • <!DOCTYPE html>: declares the display data type, defines that this document is an HTML5 document
  • <html> and </html>: required pair of tags, top-level (root) element
  • <head> and </head>: declares meta information of the website such as: page title, charset...
  • <title> and </title>: locates inside the <head> tag, uses to declare the title of the page
  • <body> and </body>: contains all the content that will be displayed on the website
  • <h1> and </h1>: contains the heading, there are 6 levels of headings in HTML, from <h1> to <h6>.
  • <p> and </p>: contains the paragraph of the web page
  • <img />: contains the image of the web page, img tag does not have an end tag

HTML Tags​

HTML tags have 2 main types: block-level and inline tags.

Block-level tags​

  • A block-level element are made up of block-level tags, which always starts on a new line and the browser will automatically add some space (margin) before and after the element.
  • A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
  • 3 block-level tags that every HTML page must have: <html>, <head>, and <body>
  • The 2 most commonly used block-level tags: <div> and <p>
  • Some new block-level tags in HTML5: <header>, <footer>, <section>, <article>, <main>, <nav >...
  • Some other block-level tags: <h1>-><h6>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <form>, <table>...

Inline tags​

  • An inline element are made up of inline tags, which do not start on a new line.
  • An inline element only takes up as much width as necessary.
  • The most commonly used Inline tags: <span> and <a>
  • Some new inline tags in HTML5: <time>, <output>...
  • Some other inline tags: <b>, <strong>, <small>, <img>, <label>, <input>...

👉 See all HTML Tags

Advantages and Disadvantages of HTML​

Advantages​

  • Huge resource with a large user community.
  • Open-source and completely free.
  • Supported by all browsers.
  • Easy to learn and easy to use.
  • Neat and consistent markup.
  • Regulated according to a certain standard and operated by the World Wide Web Consortium (W3C).
  • Easily integrates with Backend languages such as PHP, Python...

Disadvantages​

  • Mainly applied to static websites, if you want to create dynamic functionality, you need to use JavaScript or another Backend language.
  • Each HTML page needs to be created separately, even if there are many similar elements such as header and footer.
  • Some browsers are slow to update to support new HTML features.
  • It is difficult to controll how browsers read and display HTML files.
  • Only applies to certain structures, no creativity.

Role of HTML in web pages​

HTML builds the basic structures on the website (including dividing frames, dividing the layout of website components). HTML elements tell the browser how to display content, "label" pieces of content like "this is a title", "this is a paragraph", "this is a link". .. and contributes to supporting information declaration of digital files such as videos, music, images...

Regardless of whether the website is built on any platform, communicates with any programming language to process data, it still requires HTML to display content for users to view.

Even though HTML is a powerful language, it still doesn't have enough features to build a professional and fully responsive website on your own. To overcome this drawback, HTML must combine with other languages to increase user experience and create more advanced functions:

  • CSS: plays a key role in designing, building layouts, creating styles, colors... and effects for the website.
  • Javascript: create interactive events with user actions such as galleries, sliders, pop-ups...
  • PHP: processes and exchanges data between the server and browser.

If a website is a person, HTML is the skeleton, CSS is the clothes and jewelry, Javascript is the actions and behavior of that person.

HTML Semantics​

  • A semantic element clearly describes its meaning to both the browser and the developer.
  • An essential skill for developers is to understand the meaning of html tags and use them for the right purpose.
  • Some of semantic tags: <form>, <table>, <article>, <aside>, <header>, <footer>, <nav>, section...
  • Some of non-semantic tags: <div>, <span>...

For example, create a menu bar:

<!-- Bad -->
<div>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
</div>

<!-- Good -->
<nav>
  <ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
</nav>

👉 Refer to HTML Semantics:

How to create some of common parts in a website​

Section​

List​

Reference​