Today we went over the fundamentals of HTML/CSS in our module. HTML, short for Hyper-Text Markup Language, is code that browsers read in order to show the structure of the website. Content is organized through tags classified as either semantic or non-semantic. Semantic tags, such as
<header> <main> <footer> <article> <aside> <nav>
tell you something about the content they contain. Utilizing these tags helps to make the structure of websites more streamlined and concise.
Non-Semantic tags such as
are used more generally to organize groups of elements. A best practice when writing HTML code is to not overuse the <div> tag as risk of the website being something known as a “div soup”, where elements in the code can seem and easily get more disorganized due to the lack of differentiation or semantic meaning of the elements being organized on the webpage.
Once a preliminary HTML page structure has been coded, developers are able to customize HTML elements with a style sheet language called CSS, also known as Cascading Style Sheets, to create styling rules for various values such as color, fonts, layouts and a lot more! By separating the HTML code from the CSS, it makes it easy to stylize elements on the page without altering the content and HTML structure.
CSS allows you to use the various tags of HTML elements as selectors as well as defining your own through the use of classes and ids. Defining selectors through CSS tells the browser to display the variable attributes and values of each HTML element selected. Classes enable the grouping of various elements to follow the same style and ids lets you style elements unique from the rest of the rules you have already created. In-line style attributes override all CSS styling rules.