Description and Basic Syntax

HTML - HyperText Markup Language

  • gives content structure and meaning

  • headings, paragraphs, images, etc.

  • represents the skeleton of a webpage

HTML Terminology

Tags - HTML tags are keywords that define how a web browser should display the content of a web page. They are enclosed in angle brackets (< >) and usually come in pairs, with an opening tag and a closing tag. Ex: <html> <a> <p> <h1>. Some self-closing tags: <img>, <br>, <hr>, <input>.

Elements - They are the individual components of a webpage. They are defined by start and end tags, and the text between the tags is the content of the element. HTML elements can be nested within each other to create complex structures.

Attributes - HTML attributes are special keywords that provide additional information about HTML elements. They are always specified in the start tag of the element, and they usually come in name/value pairs. Ex: id, class, href, src

A few examples:

  • the anchor element: <a></a>

  • the div element: <div></div>

  • the href attribute: <a href="http://www.facebook.com">Facebook</a>

  • the class attribute: <p class="quote">Eppur si muove</p>

  • the img element with the src attribute: <img src="https://example.com/logo.jpg">

Divisions and Spans

  • act as containers for the page content

  • help divide the page

  • no meaning or semantic value

  • exist only for styling purposes

The basic structure of a web page

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML basics</title>
  <meta name="description" content="The HTML basics">
  <meta name="author" content="Mihai Gheorghe">

  <link rel="stylesheet" href="css/styles.css">
  
  <!-- This is a comment and it will be ignored by the browser -->

</head>

<body>
  <h1>TIC</h1>
  <p>Hello world!</p>
  <script src="js/script.js"></script>
</body>
</html>

Linking between pages

Creating Hyperlinks:

  • used to link resources and pages

  • identified by the href attribute

  • relative paths to links pointing to other pages on the website

  • absolute paths to pages outside your domain

<a href="www.youtube.com">Youtube</a>
<a href=/contact.html>Contact</a>

Adding media

  • using the inline element

  • the <img> element doesn’t wrap any other type of content

  • the src attribute is needed to specify the source of the image

  • can also take the alt attribute

  • can also be added using the background-image property in CSS

  • background-image is mainly used when the image is not relevant to the content of the page

Block vs. Inline vs. Inline-block elements

Block elements

  • begin on new lines

  • occupy any available width

  • respect left, right top & bottom margins and padding

  • Examples:

    • <div>, <p>

    • <form>

    • <h1> ... <h6>

    • <ol>, <ul>, <li>

Inline elements

  • start anywhere in a line

  • maintain the width of their content

  • respect left & right margins and padding, but not top & bottom

  • cannot have a width and height set

  • Examples:

    • <span>

    • <a>

    • <img>

    • <input>, <button>

    • <b>, <i>, <ul>

    • <br>

Inline-block

  • allow other elements to sit to their left and right

  • respect top & bottom margins and padding

  • respect height and width

  • There are no inline-block default HTML elements. However, some HTML elements such as: <a>, <button>, <input>, <select>, <textarea>, can be displayed inline-block by setting their display property to inline-block using CSS, which we'll discuss later.

Structural elements

New in HTML 5. Provide semantical value to containers. Using semantic structural elements in HTML5 makes your code more readable and maintainable, and it also helps search engines and assistive technologies to understand the content of your page. They are block elements.

Examples:

  • <header> top of the web page (introduction to the page, navigation)

  • <navigation> primary navigation menus

  • <article> independent self-contained content

  • <section> used to break up a page based on thematic content

  • <aside> mainly used for sidebars or menus

Good practices

  • use semantic elements as much as you can

  • make sure you use the DOCTYPE declaration

  • indentation makes the code readable

  • inline styles are almost never a good idea

  • use the id and class attributes to identify elements. The id and class attributes can be used to identify elements in your HTML code. This can be useful for styling elements with CSS and for scripting elements with JavaScript.

  • use comments to explain your code.

  • validate your HTML code. HTML validation is the process of checking your HTML code for errors. There are many different HTML validators available, both online and offline. Validating your HTML code can help you to identify and fix errors before you publish your web pages.

PreviousExtra: Getting Started with GitHubNextExtra resources

Last updated

Was this helpful?