5 Steps to Understanding Basic HTML Code
Whatsapp Pinterest
Advertisement

HTML is a vital part of the web as we know it. And while few web designers create pages by manually typing HTML, it’s still handy to know a little bit about it.

We’re going to look at some basics of the language, including what HTML really is, some fundamental concepts, and how it interacts with other languages. Think of this as an “HTML for dummies” crash course.

HTML Basics: What Is HTML?

HTML stands for Hypertext Markup Language. And while it’s sometimes lumped in with programming languages, this isn’t accurate.

As a markup language, HTML only lets you create the display layout of pages. A true programming language, like Java or C++, contains logic and commands that are carried out.

While it’s simple, HTML is at the backbone of every page on the web. It’s responsible for what text shows up as bold, adding images, and linking to other pages. We have an HTML FAQ The Essential HTML FAQ You Should Bookmark The Essential HTML FAQ You Should Bookmark HTML has been around for a while, so it's about time you learned the basics. Here's what is it, how it works, and how you can write some common elements in HTML today! Read More that explains more.

You can right-click on most webpages in your browser and choose View page source or similar to see the HTML behind them. This will likely also contain a lot of code that’s not HTML, but you can sift through that.

View HTML Source Example

Even if you have zero experience with markup or programming languages, learning a bit about HTML will make you a more informed web user. Let’s walk through five basic steps to help you understand how HTML works. We’ll provide examples along the way.

Step 1: Understanding the Concept of Tags

HTML uses a system of tags to categorize different elements of the document.

Most tags come in pairs to wrap the affected text inside them. Here’s a simple example (the <strong> tag makes text bold; we’ll discuss this more in a moment.)

<strong>This is some bold text</strong>.

Notice how the closing tag starts with a forward slash (/). This signifies a closing tag, which is important. If you don’t close a tag, everything from the start onward will have that attribute.

However, not all tags have a pair. Some HTML elements, called empty elements, have no content and exist on their own. An example is the <br> tag, which is a line break. You can “close” such tags by adding a slash (such as <br />) but it’s not strictly necessary.

Step 2: The Skeleton HTML Layout

A proper HTML document must have certain tags defined so it’s laid out correctly. These are the essential parts:

  • Every HTML document must begin with <!DOCTYPE html> to declare itself as such. Thus, its closing tag, </html>, is the last item in an HTML file.
  • Next, the <head>section includes information like the page title, various scripts that run on the page, and similar. As the name suggests, this typically comes right after the initial <html> tag. The end user doesn’t see much of the content in these tags.
  • Finally, the <body>tag holds the text of the page that the reader sees (plus much more). Here you’ll find images, links, and more.

Since the <body> section makes up the bulk of an HTML document, the rest of our walkthrough looks at elements that pertain to it.

Step 3: Basic HTML Tags for Formatting

Next, let’s look at some common tags that make up HTML documents. Of course, it’s not possible to cover every element, so we’ll review some of the most important. We’ve covered many more HTML examples 17 Simple HTML Code Examples You Can Learn in 10 Minutes 17 Simple HTML Code Examples You Can Learn in 10 Minutes Want to create a basic webpage? Learn these HTML tags and try them out in a text editor to see how they look in your browser. Read More if these don’t satisfy you.

If these tags seem pretty basic, remember that HTML was created all the way back in 1993. The web was very much text-based back then in its early stages.

Simple Text Formatting

HTML supports basic text styles like you’d find in Microsoft Word:

  • <strong> tags make text bold.
  • <em> tags (which stands for “emphasis”) will italicize text.

HTML also supports the older <b> tag for bold and <i> for italics. However, it’s preferable to use the ones above.

In short, <strong> and <em> show how something should be understood, while the latter tags only tell you how it should look. These former tags are more accessible for screen readers used by the visually impaired.

Paragraph and Other Divisions

HTML’s <div> tag lets you define a section of the document. Usually, this is paired with CSS (see below) to format a section in a certain way.

The <p> tag lets you divide text into paragraphs. Browsers will automatically put some space before and after these, letting you naturally break up text.

You can add headers to your document and make it easier to follow using the <h1> through <h6> tags. H1 is the most important header, while H6 is least important. Nearly every MakeUseOf article uses H2 and H3 headers to organize information.

Hitting Enter to add line breaks in your HTML document won’t actually display them. Instead, you can use <br> to add a line break.

Here’s an example that uses all of these:

<div class="example">
<h2>Example Heading</h2>
<p>This is one paragraph.</p>
<p>This is a second<br>paragraph split between two lines.</p>
</div>

Step 4: Inserting Images

Images are a vital part of most webpages. You can add them easily with HTML, and even set different properties for them.

You insert an image using the <img> tag. Combining this with the src attribute lets you specify where you want the image to load from.

Another important attribute of <img> tags is alt. Alt text allows you to describe the image for screen readers or in case the image doesn’t load properly. You can mouse over an image to see its alt text.

Use the width and height elements to specify the number of pixels the image appears at.

Put it all together, and an image tag looks like this:

<img src="https://img.drphil.com/wp-content/uploads/2016/04/DrPhil-1280x720px-Shareimage.jpg" alt="Dr. Phil" width="1280" height="720">

Step 5: Adding Links

The World Wide Web wouldn’t be much of a web without links to other pages. Using the <a> tag, you can link to other pages on any text.

Inside the <a> tag, the href attribute tells where you’re linking. Simply pasting the URL will work fine. You can use the title element to add a bit of text that appears when someone hovers over the link.

A basic link looks like this:

<a href="https://www.google.com/" title="Click here to search the web">Visit Google</a>

The <a> tag has many other possible elements, but we won’t dive into them here.

How HTML Connects With CSS and JavaScript

We’ve looked at the basic of HTML and how it establishes a webpage. But as you can imagine, HTML alone doesn’t cut it for the modern web. Simple HTML webpages were common in the “Web 1.0” days, when most websites were nothing more than static text.

Ancient Website HTML

But now, we have a lot more. CSS (Cascading Style Sheets) is a language used to describe how the text you prepared in HTML should look. Remember the <div> tag we discussed? Inside this (and other tags), you can define a class attribute. Then, in your accompanying CSS document, you can write instructions for how that class should look.

You can define these style elements inline in your HTML code, but this is considered poor practice as it’s much more difficult to maintain. Learn more with these simple CSS examples 10 Simple CSS Code Examples You Can Learn in 10 Minutes 10 Simple CSS Code Examples You Can Learn in 10 Minutes We'll go over how to create an inline stylesheet so you can practice your CSS skills. Then we'll move onto 10 basic CSS examples. From there, your imagination is the limit! Read More .

JavaScript

We’ve seen that HTML defines the content and CSS determines the appearance. JavaScript, the final member of the trio vital to the web, allows web pages to respond to people’s actions without loading a new page every time.

For example, JavaScript allows a website to warn you that the password you entered doesn’t meet its requirements before you try to submit it. A web designer might use JavaScript to cycle through images in a slideshow or prompt the user for input.

These are just a few elementary examples. JavaScript is a scripting language that’s capable of doing a whole lot, and is comparatively far more complicated than HTML and CSS. See our overview of JavaScript What Is JavaScript and How Does It Work? What Is JavaScript and How Does It Work? What is Javascript? It's a programming language used to enhance web pages. It includes dynamically updating web pages, user interfaces and more. Let's dive into what Javascript is all about. Read More for much more.

Looking at the complete scope of web design is beyond the scope of this article, but suffice it to say that HTML interacts with other languages to create the webpages we know today.

The Evolution of HTML

It’s important to note that HTML is not static. HTML has gone through several revisions, the most recent being HTML 5. Notably, this standard supports native video embedding instead of relying on proprietary formats like Adobe Flash.

New iterations of HTML also declare certain archaic tags as deprecated from time to time. These include awful tags like <marquee> and <blink> (that scroll and flash text respectively) commonly seen in 1990s website design. So keep in mind that standards change over time.

A Little HTML Knowledge Goes a Long Way

We’ve taken a brief tour of how an HTML document works. Now you know the fundamentals of how webpages are structured. Even if you don’t go on to build webpages, you’re a bit more aware about the web you use every day.

To learn more, check out our guide on how to design your first website How to Make a Website: For Beginners How to Make a Website: For Beginners Today I'll be guiding you through the process of making a complete website from scratch. Don't worry if this sounds difficult. I'll guide you through it every step of the way. Read More .

Image Credit: Belyaevskiy/Depositphotos

Explore more about: HTML, HTML5, JavaScript, Programming, Web Development, Webmaster Tools.

Enjoyed this article? Stay informed by joining our newsletter!

Enter your Email

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Adam
    November 20, 2018 at 12:51 pm

    I'm sure this is very well documented but I found it really difficult to focus on the material with so much stuff going on around the screen. I guess I just get distracted easily so I'll stick to books.

  2. Mariam
    October 29, 2017 at 8:12 pm

    Great website, very concise and easy to follow.
    Thank you for sharing.

  3. Rachel
    June 22, 2017 at 12:42 am

    Also I would like the comments to immediately be posted to my website rather than be submitted for approval like how your format is.

  4. Rachel
    June 22, 2017 at 12:41 am

    How do I make this exact comment box for my website?

  5. Adam
    January 3, 2017 at 6:45 pm

    Very simple breakdown! I just started a position as a SharePoint admin and I need to understand HTML at least basically. This give me a great starting point, thanks!

  6. Jo
    May 21, 2015 at 3:13 am

    I thoroughly enjoyed this article. I'm a total beginner, and this has helped me heaps. Thanks :)

  7. Massimo
    March 15, 2010 at 12:10 pm

    in XHTML you must close tags

    <b> is deprecated, use <strong<...</strong>
    <i> is deprecated, use <em>...</em>
    <u> i deprecated, use css (<span style="text-decoration:underline">...</span> and better if you use a class and define style apart
    such as <span class="specifyareasonwhyyouunderline">...</span> and in the header you define the css
    <style type="text/css"> .specifyareasonwhyyouunderline { text-decoration:underline; }
    or you link it from an external resource

    <font> is deprecated, use css (font-family: arial, verdana, sans-serif;)

    heigth="200": if you increase or decrease the page dimension this element doesn't change, use a relative unit like a percentage or em or ex

    onmouseover is device dependend, use onfocus (and onblur)
    ;-)

  8. Massimo
    March 15, 2010 at 12:07 pm

    in XHTML you must close all the tags

    is deprecated, use ...
    is deprecated, use ...
    i deprecated, use css (... and better if you use a class and define style apart
    such as ... and in the header you define the css
    .specifyareasonwhyyouunderline { text-decoration:underline; }
    or you link it from an external resource

    is deprecated, use css (font-family: arial, verdana, sans-serif;)

    heigth="200": if you increase or decrease the page dimension this element doesn't change, use a relative unit like a percentage or em or ex

    onmouseover is device dependent, use onfocus (and onblur)
    ;-)

  9. Massimo
    March 15, 2010 at 9:10 pm

    in XHTML you must close tags

    <b> is deprecated, use <strong<...</strong>
    <i> is deprecated, use <em>...</em>
    <u> i deprecated, use css (<span style="text-decoration:underline">...</span> and better if you use a class and define style apart
    such as <span class="specifyareasonwhyyouunderline">...</span> and in the header you define the css
    <style type="text/css"> .specifyareasonwhyyouunderline { text-decoration:underline; }
    or you link it from an external resource

    <font> is deprecated, use css (font-family: arial, verdana, sans-serif;)

    heigth="200": if you increase or decrease the page dimension this element doesn't change, use a relative unit like a percentage or em or ex

    onmouseover is device dependend, use onfocus (and onblur)
    ;-)

  10. Massimo
    March 15, 2010 at 9:07 pm

    in XHTML you must close all the tags

    is deprecated, use ...
    is deprecated, use ...
    i deprecated, use css (... and better if you use a class and define style apart
    such as ... and in the header you define the css
    .specifyareasonwhyyouunderline { text-decoration:underline; }
    or you link it from an external resource

    is deprecated, use css (font-family: arial, verdana, sans-serif;)

    heigth="200": if you increase or decrease the page dimension this element doesn't change, use a relative unit like a percentage or em or ex

    onmouseover is device dependent, use onfocus (and onblur)
    ;-)

  11. Jack Cola
    March 12, 2010 at 4:22 pm

    You forgot the basic table structure and that HTML is dead, it's now (X)HTML.

    Tables
    table //Open the table
    tr //the tr tags make a row
    td column /td //The td tags make a column. The more of these you have in between tr tags, the more columns you get.
    td column2 /td

    /tr //So if you want to make more rows, just repeat the above.

    Also note, //is not how to comment in HTML. Also, put a < and > around the words table, tr, and td. They don't show in comments, and sorry for the multiple comments. :(

  12. Jack Cola
    March 12, 2010 at 4:20 pm

    You forgot the basic table structure and that HTML is dead, it's now (X)HTML.

    Tables
    //Open the table
    //the

    tags make a row
    column //The tags make a column. The more of these you have in between

    tags, the more columns you get.
    column2

    //So if you want to make more rows, just repeat the above.

    Also note, //is not how to comment in HTML. Also, remove the . inside the tags, as they don't show in the comments.

  13. Jack Cola
    March 12, 2010 at 4:19 pm

    You forgot the basic table structure and that HTML is dead, it's now (X)HTML.

    Tables

    //Open the table

    //the tags make a row

    //The

    tags, the more columns you get.

    //So if you want to make more rows, just repeat the above.

    Also note, //is not how to comment in HTML

    column tags make a column. The more of these you have in between

    column2
  14. Jack Cola
    March 13, 2010 at 1:22 am

    You forgot the basic table structure and that HTML is dead, it's now (X)HTML.

    Tables
    table //Open the table
    tr //the tr tags make a row
    td column /td //The td tags make a column. The more of these you have in between tr tags, the more columns you get.
    td column2 /td

    /tr //So if you want to make more rows, just repeat the above.

    Also note, //is not how to comment in HTML. Also, put a < and > around the words table, tr, and td. They don't show in comments, and sorry for the multiple comments. :(

  15. Jack Cola
    March 13, 2010 at 1:20 am

    You forgot the basic table structure and that HTML is dead, it's now (X)HTML.

    Tables
    <t.able> //Open the table
    <t.r> //the tags make a row
    <t.d>column</t.d> //The <t.d> tags make a column. The more of these you have in between tags, the more columns you get.
    <t.d>column2</t.d>

    //So if you want to make more rows, just repeat the above.

    Also note, //is not how to comment in HTML. Also, remove the . inside the tags, as they don't show in the comments.</t.d></t.r></t.able>

  16. Jack Cola
    March 13, 2010 at 1:19 am

    You forgot the basic table structure and that HTML is dead, it's now (X)HTML.

    Tables
    //Open the table
    //the tags make a row
    //The tags, the more columns you get.

    //So if you want to make more rows, just repeat the above.

    Also note, //is not how to comment in HTML<table> <tbody><tr></tr><tr> <td>column</td><td> tags make a column. The more of these you have in between </td></tr><tr> <td>column2</td> </tr></tbody></table>

  17. topspin
    March 12, 2010 at 1:36 pm

    Doesn't XKCD use the title attribute for the funny afterthought text, rather than the alt attribute?

    • Simon Slangen
      March 12, 2010 at 3:40 pm

      It appears you're right, thanks for the fix.

  18. Chad R. Smith
    March 12, 2010 at 10:49 am

    I do think that this is a great simple tutorial to showcase the easy tags that every designer from here to X2191 needs to know for HTML. I would have liked to see more of the HTML4 vs HTML5 tags. Show the newer tags, and that's what we are doing at http://theeasyapi.com besides offering a simple API that interfaces with other API's through one easily accessible API we are moving our code to more of a HTML5 format. This is a great step though in the "newbie" instructions.

    Also yes, I think pseudocube meant not .

  19. Chad R. Smith
    March 12, 2010 at 7:49 pm

    I do think that this is a great simple tutorial to showcase the easy tags that every designer from here to X2191 needs to know for HTML. I would have liked to see more of the HTML4 vs HTML5 tags. Show the newer tags, and that's what we are doing at http://theeasyapi.com besides offering a simple API that interfaces with other API's through one easily accessible API we are moving our code to more of a HTML5 format. This is a great step though in the "newbie" instructions.

    Also yes, I think pseudocube meant not .

  20. pseudocube
    March 12, 2010 at 9:22 am

    needs to have a closing tag, and should be You used to be able to use as a large line break, but with all this new web tech coming out, you shouldn't introduce deprecated tags to 'newbies.' Very nice article otherwise, nice job.

    • pseudocube
      March 12, 2010 at 9:25 am

      I meant to say:

      <p> needs to have a closing tag, and <b> should be <b /> You used to be able to use as a large line break, but with all this new web tech coming out, you shouldn’t introduce deprecated tags to ‘newbies.’ Very nice article otherwise, nice job.

      • Simon Slangen
        March 12, 2010 at 9:42 am

        Thanks for the feedback.

        That's definitely where the 'arguably' part kicks in. :-D To be entirely in the green, you should indeed include that end tag. But right now, you generally don't have to. And a lot of people still don't. With this being an introduction to 'understanding', rather than developing, I chose not to stress the end tag too much.

        <b />? Sure you don't mean <br />?

  21. pseudocube
    March 12, 2010 at 6:22 pm

    needs to have a closing tag, and should be You used to be able to use as a large line break, but with all this new web tech coming out, you shouldn't introduce deprecated tags to 'newbies.' Very nice article otherwise, nice job.