Naomi Bastian Design

Tutorials

Back to the Assignments Archive

Beginning with HTML

HTML is the standard computer programming language used to create Web pages. HTML and CSS will work together with content management systems, blogging software, e-commerce platforms, and plugins to generate a fully functioning website. When you look at this website, your browser is receiving HTML and CSS from the web server that hosts this site. The browser will interpet the HTML, CSS, and other code to create the page that you see! More complex web pages will also include extra content such as images, audio, videos, or animations with external content or JavaScript. However, simple websites can be achieved easily by starting with HTML and CSS.

HTML Tags and Elements

HTML stands for Hyper Text Markup Language, and provides the structure of a web page. Pieces of content such as "heading", "paragraph", "table", and so on are represented by HTML elements, the building blocks of an HTML page. An element, in turn, consists of a start tag and an end tag, with content inserted in between.

<tag>Content</tag>

Keep in mind: <tag> is not an actual HTML element, but is used on this page as an example.

Browsers will not display the HTML tags, but will use them to render the content of a web page. An HTML element is everything from the start tag to the end tag. The following example is a complete HTML element:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

HTML elements can be nested, meaning that elements can contain other elements. Every single HTML document will consist of nested HTML elements, from your Facebook page, to your blog, to this website! For example, this basic HTML document layout contains four HTML elements.

<!DOCTYPE html>
<html>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>
</html>

The <html> element defines the entire document.
It has the start tag <html> and the end tag </html>. The element content is another, nested HTML element, the <body> element.

The <body> element defines the document body.
It has the start tag <body> and the end tag </body>. The element content is two other HTML elements, <h1> and <p>.

The <h1> element defines a heading. It has a start tag <h1> and an end tag </h1>. The element content is: Lorem ipsum dolor sit amet.

The <p> element defines a paragraph. It has a start tag <p> and an end tag </p>. The element content is: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML tags are not necessarily case sensitive: <P> means the same as <p>. HTML5 standards do not require lowercase tags, but lowercase tags are not recommended in HTML, and lowercase tags are required for stricter document types like XHTML.

For a complete list of possible HTML attributes, visit the HTML Element Reference page on W3Schools.

HTML Attributes

HTML attributes provide additional functionality and information to HTML elements. All HTML elements can have attributes, but the kind of attribute that can be included depends on the element. There is a list of global attributes that can apply to any HTML element, including:

The HTML global attribute data is taken from W3Schools.

You may not use most of the attributes above when you're just starting out with HTML, but they do exist! Generally, however, we tend to use attributes like href, which specify the URL of the page the link is pointing to. However, this attribute can only be used with <a>, <area>, <base>, and <link>, and should not be used outside these elements. For a complete list of possible HTML attributes, visit the All HTML Attributes page on W3Schools. Just remember that attributes provide additional information about an element, are always specified in the start tag of an element, and are usually formatted as name and value pairs, like this:

<a href="http://nsbastdesign.com/" target="_blank">Naomi Bastian Design</a>

The link will display as:

Naomi Bastian Design

The href attribute specifies that the link is pointing towards http://nsbastdesign.com/, and the target attribute is specifying that the link will open in a new tab. This can be very useful when you want to show a user new content without navigating them away from your page. When exploring for new HTML elements to include in your pages, take some time to review the possible attributes that can be included in the elements. You may be able to do something you hadn't even thought of to increase usability or make your content more engaging!

Using HTML

Once you have the HTML syntax down, you can get started with creating your own webpages! You can create HTML documents using anything from professional HTML editors like Adobe Dreamweaver or NetBeans, but you can also use simple text editors like Notepad or TextEdit. To use these programs, all you need to do is open the program and begin with a simple page. For example, we could try something like this:

<!DOCTYPE html>
<html>
<body>
<h1>Hello, world!</h1>
<p>This is my first HTML page!</p>
</body>
</html>

You can then save the file with the .html file extension, and set the encoding to UTF-8 if it is an option. If the encoding is set to UTF-8, it will recognize the HTML language and will display HTML characters correctly. Once your file has been saved, open the file in your favorite browser so you can view your first webpage!

HTML is a language that is full of possibilities, and it can be combined with JavaScript, CSS, and other languages to make the same kind of webpages that you're familiar with, or to create something entirely new! You can use HTML to build the framework for anything from an online retailer site, to a portfolio, to a social media site. Learning HTML will enable you to write better blog posts, understand how your favorite websites are created, and show you how to create your own pages. To learn more about HTML, check out the resources below, or take a look at my Codepen page or assignments archive to find inspiration and ideas!