HTML Lesson 1: What is HTML?

Are you a graphic designer who needs to needs to take the next step towards creating dynamic web pages?  If you want your website to be accessible, quick-loading, and easy-to-edit you will need to learn a computer language named HTML.

<p> is for Paragraph

HTML is the language that web pages are written in; it is the code that your web browser uses to assemble the pages you view.  For example, you recognize this block of text as a paragraph, but your web browser doesn’t understand the word “paragraph.”  Instead, the HTML code for “paragraph” is <p>.  HTML codes (also known as elements) are wrapped in brackets.  For example, the HTML code for “image” is <img>.

In short, HTML is a language used to describe content; we give different types of content their own different and semantically chosen labels.  Before we go any further it is important to note that HTML is NOT for adding style (colors, fonts, sizes, background images, etc…) to web pages.  That is what Cascading Style Sheets (CSS) are for.  HTML is for raw content and raw content only.  This idea of separating content and style (presentation) is important, and will become clearer as you move through these lessons.  For now, forget about it, and enjoy the rest of this lesson.

What Does HTML Look Like?

Let’s kick things off by using XTHML code to actually create a couple paragraphs of text. Here is what the code would look like:

<P>This is our first sample paragraph.  This paragraph has only two sentences.</p>

<p>This is the second paragraph; with only one sentence!</p>

It is important to note that both of our paragraphs were followed by a </p> code. This “end tag” corresponds with the opening <p> start tag, and together the two tell the web browser where we want our paragraph element to start and end.

It’s (almost) That Simple!

That’s it! You just taught yourself the fundamentals of HTML! Now you just need to learn the codes for all the different elements that make up a page. For example, aside from paragraphs (<p>) and images, (<img>) what elements do you commonly find on web pages? Below is a short list of some of the most basic HTML codes. Don’t worry about memorizing them right now, just take a quick look and notice how intuitive most of the codes are.

<div>Division or Section of Page</div>
<a>Link</a>
<ul>Unordered List</ul>
<li>List Item</li>
<h1>Header (most important header)</h1>
<h2>Header (second most important header)</h2>
<h3>Header (third most important header) etc…</h3>
<table>Table</table>

It’s not THAT intimidating, right? Now we just need to learn the rest of the elements, how they relate to one another, and how to organize them within a page. In our next lesson, you will learn how to use HTML code to create and save a page and view it in your web browser.

About the Author

Brad Schiff

Brad Schiff is a front-end developer, designer, and educator who has been building user interfaces for over a decade. He’s done work for Fortune 500 companies, national political campaigns, and international technology leaders. His proudest achievement is helping people learn front-end web development.

Follow Brad on Twitter Subscribe on YouTube

10 thoughts on “HTML Lesson 1: What is HTML?

  1. Thanks for the information. In class I am a bit slow and intimidated by the other students so I am following your examples at home. Thanks again…………..

    1. Hi Arlene,

      That is great to hear! The other students probably have previous experience – which can definitely be intimidating!

      I hope my lessons are useful – if not just let me know what material you would like to see covered.

      Thanks!

  2. Thank you for your lessons they are amazing. I am going to live on your website for a while:) Until I`m done reading and trying ALL of your lessons.

  3. <a href= "nice tutorials" title= "enjoyed it soo much!"

    Hi, Brad!

    I found your tutorial really useful, as I am studying ICT in uni, so they always speak stuff dat I cannot understand. You explained it perfectly! I learned a few HTML tags off flickr!

  4. Whew! Thanks so much for these lessons. I never did any of this stuff for the last 10 years but now I belong to some forums and they are all in HTML format. I finally learned how to get a pix in from their support folks but I have been at a loss as to get some of my personal pictures or scanned stuff in. I am hopeful that this will do it-so many thanks for this. I just have a question. May be a dum-dum one, but, in the Forums they use the brackets [img] [/]] for the images that I have been able to post from the web. Does this impact what I’m finding out here? Thank you very much.

    1. Hi Patricia,

      I’m glad you found the information useful! Regarding the [img] and [/] brackets that are available for use in the forums: that isn’t HTML, it’s a shortcut that the forum software recognizes. This means if you use the [img] format of the code it will work within the forum, but if you are creating a website outside of the forum platform you will need to use the actual “<img src=”… format.

      Thanks!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>