What You’ll Learn

In this section, you will learn:

• Basics about HTML
• Anatomy of an HTML Element
• Basic HTML Example

What is HTML?

HTML stands for Hyper Text Markup Language, and is the standard markup language for webpages on the internet. HTML is composed of HTML elements, represented by <> tags that include a start tag, end tag, and content in between.

HTML only specifies the content and structure of the page, not the design (CSS), or interactivity (JS).

Anatomy of an HTML Element

Before we dive into some examples of HTML structure, let’s first define the components of an HTML element.

• An element is composed of an opening tag, content, and a closing tag.
• The type defines the kind of content that will be displayed on page.
• Attributes define features or metadata associated with the element, with their data contained within quotations.
• The content is what will be rendered on the webpage.

Some elements will have required attributes that define the behavior of the tag - for example, the img src attribute defines the URL path where the image can be found. These will be more clear with the next example.

Simple HTML Example

We’ll start with a simple example - a heading, a description, an image, and a link.

CopyCopied!

<div> <h1>Yext</h1> <p> Every day customers ask questions about your brand. Shouldn't the answers come from you? Deliver official answers with <span>Yext</span>. </p> <img src="https://www.yext.com/wp-content/uploads/2019/10/Icon_Answers.svg" alt="Yext Search Logo" style="height:100px"/> <a href="https://yext.com">Learn More</a> </div>

Yext

Every day customers ask questions about your brand. Shouldn't the answers come from you? Deliver official answers with Yext.

Learn More

Don’t worry, we’ll make it look prettier later. Remember, HTML is purely defining the content and order of the page.

On the page we see the following elements:

• An H1 tag as the title / headline of the page (<h1>)
• A body paragraph with a description (<p>)
• An image (<img>) with the image url specified in the src attribute.
• A link (<a>) with a destination specified in the href attribute.
• A span tag (<span>) that will allow us to add special styling to this component later.

These all compose the section that you see above. These are the essential building blocks of any webpage - you’ll see that these elements compose almost all HTML you see!

Try using the code editor to do the following:

• Add another link “Get a Demo”
• Create another section with an <h2> and a <p>
• Add any image you want!

Want to learn more?

You’ll get more comfortable with HTML as you continue to work with Pages and Answers. If you want to learn even more about HTML, here are some great places to start:

• W3Schools
• Traversy Media’s Video for Beginners
• Code Academy