DEV Community

Cover image for Intro to HTML
Jay Cruz
Jay Cruz

Posted on

Intro to HTML

HTML stands for Hypertext Markup Language. It makes up the structure of content on the web. It is not a programming language like Ruby or Java because it can not process logic like programming languages can. For example you can not implement an if else conditional block in HTML.

HTML is strictly just a markup language. An HTML document is made up of tags or markup elements that wrap it's content. These usually consist of an opening and closing tag, though some tags are self closing. A tag that defines the document called the doctype declaration tag is needed at the top of the document to tell the web browser the type of HTML being used.

The HTML tag is used to tell the browser that everything in between these tags is HTML markup. Two other tags needed for your HTML document are the head tag and the body tag. The head tags contain the metadata between it which is data about the HTML document itself and it also contains other information for the web browser. The body tags contain the main content between it which usually includes other tags such as headers and paragraph tags. Headers range from h1 to h6 (largest to smallest), they change the way text appears and allow search engines to determine what the web page is about. A title tag is a tag that contains text which is displayed in the upper tab of the web page usually used to describe the page content.

<!DOCTYPE html>

<html>
  <head>

    <title>Webpage</title>
    <meta charset="UTF-8" />

  </head>
  <body>

  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Attributes

HTML attributes are used to provide additional information to your elements such as links or properties like width and height. They are implemented with a name="value" in the opening tag of an HTML element, where name is the attribute name and value is the attribute value.

Comments

HTML comments are used as helpful notes in the HTML document. They do not get rendered to the browser with the other code. <!-- This is a comment -->.

Images and Lists

Images can be inserted into our web pages using the img tag along with the src attribute <img src="image-url" alt="description of image"> , the alt attribute is used to describe the image, it is useful for users with disabilities and for images that have trouble loading. In HTML lists are another common markup element. The types that are usually used are unordered lists and ordered lists. Unordered lists contain list item tags that appear bulleted. Ordered lists contain list item tags that appear numbered.

<!-- Unordered Lists -->
<ul>
 <li></li>
 <li></li>
</ul>
Enter fullscreen mode Exit fullscreen mode
<!-- Ordered Lists -->
<ol>
 <li></li>
 <li></li>
</ol>
Enter fullscreen mode Exit fullscreen mode

Conclusion

In summary, HTML is needed to develop for the web as it is a necessary tool to build web pages and web apps. It makes up the structure of our websites.

Discussion (0)