What should html look like

Connect your favorite apps to HubSpot. See all integrations. We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services.

You may unsubscribe from these communications at any time. For more information, check out our privacy policy. Written by Lindsay Kolowich Cox lkolow.

Ever wondered how computer programming works, but haven't done anything more complicated on the web than upload a photo to Facebook? To someone who's never coded before, the concept of creating a website from scratch -- layout, design, and all -- can seem really intimidating. You might be picturing Harvard students from the movie, The Social Network , sitting at their computers with gigantic headphones on and hammering out code, and think to yourself, 'I could never do that.

Anyone can learn to code, just like anyone can learn a new language. In fact, programming is kind of like speaking a foreign language -- which is exactly why they're called programming languages. Each one has its own rules and syntax that need to be learned step by step. Those rules are ways to tell your computer what to do. More specifically, in web programming, they're ways of telling your browsers what to do.

But before we begin, let's get an idea of what programming languages actually are. Programming, or coding, is like solving a puzzle. Consider a human language, like English or French. We use these languages to turn thoughts and ideas into actions and behavior. In programming, the goal of the puzzle is exactly the same -- you're just driving different kinds of behavior, and the source of that behavior isn't a human. It's a computer. A programming language is our way of communicating with software.

The people who use programming languages are often called programmers or developers. The things we tell software using a programming language could be to make a webpage look a certain way, or to make an object on the page move if the human user takes a certain action.

So, when a web designer is given an end goal like "create a webpage that has this header, this font, these colors, these pictures, and an animated unicorn walking across the screen when users click on this button," the web designer's job is to take that big idea and break it apart into tiny pieces, and then translate these pieces into instructions that the computer can understand -- including putting all these instructions in the correct order or syntax.

Every page on the web that you visit is built using a sequence of separate instructions, one after another. Your browser Chrome, Firefox, Safari, and so on is a big actor in translating code into something we can see on our screens and even interact with. It can be easy to forget that code without a browser is just a text file -- it's when you put that text file into a browser that the magic happens.

When you open a web page, your browser fetches the HTML and other programming languages involved and interprets it.

But before moving on to JavaScript and other true languages, you need to know the basics of HTML and CSS, as they are on the front end of every web page and application. In the very early s, HTML was the only language available on the web. Web developers had to painstakingly code static sites, page by page. A lot's changed since then: Now there are many computer programming languages available.

Now, let's go over each one individually to help you understand the roles each plays on a website and then we'll cover how they fit together.

Let's start with good ol' HTML. HTML is at the core of every web page, regardless the complexity of a site or number of technologies involved. It's an essential skill for any web professional. It's the starting point for anyone learning how to create content for the web. And, luckily for us, it's surprisingly easy to learn. Let me show you what I mean. Take a look at the article below. If I were to ask you to label the types of content on the page, you'd probably do pretty well: There's the header at the top, then a subheader below it, the body text, and some images at the bottom followed by a few more bits of text.

Markup languages work in the same way as you just did when you labeled those content types, except they use code to do it -- specifically, they use HTML tags, also known as "elements. Every web page is made up of a bunch of these HTML tags denoting each type of content on the page.

Each type of content on the page is "wrapped" in, i. A consistent, clean, and tidy HTML code makes it easier for others to read and understand your code. Always specify the alt attribute for images. This attribute is important if the image for some reason cannot be displayed.

Also, always define the width and height of images. This reduces flickering, because the browser can reserve space for the image before loading. HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.

The contents of a page title is very important for search engine optimization SEO! The page title is used by search engine algorithms to decide the order when listing pages in search results. This is meant to assist search engines and browsers. The viewport is the user's visible area of a web page.

It varies with the device - it will be smaller on a mobile phone than on a computer screen. HTML is a markup language that defines the structure of your content. HTML consists of a series of elements , which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.

For example, take the following line of content:. If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:. Attributes contain extra information about the element that you don't want to appear in the actual content. Here, class is the attribute name and editor-note is the attribute value. The class attribute allows you to give the element a non-unique identifier that can be used to target it and any other elements with the same class value with style information and other things.

You can put elements inside other elements too — this is called nesting. You do however need to make sure that your elements are properly nested. The following is incorrect:. The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results.

So don't do it! Some elements have no content and are called empty elements. This is because an image element doesn't wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears. That wraps up the basics of individual HTML elements, but they aren't handy on their own. Now we'll look at how individual elements are combined to form an entire HTML page.

Let's revisit the code we put into our index. As we said before, it embeds an image into our page in the position it appears.

It does this via the src source attribute, which contains the path to our image file. We have also included an alt alternative attribute.